怎样编写简单的chrome插件-选中文字分享功能
操作方法
- 01
功能描述 在chrome浏览器的页面中，当鼠标选中一些文字之后，在鼠标旁边会显示一个微博分享按钮，用户点击该按钮，页面会自动跳转到·分享到微博·界面，并且相关内容已经自动填好，用户只需点击分享按钮即可。 步骤一:实现获取文字功能 使用JS实现当用户选择一些文字之后，能够获取选中的内容的功能。对于获取选中文字，IE和其它遵循标准的浏览器有不同的做法，所以我们 首先要封装一个通用的方法。 functionselectText(){ if(document.selection){//For ie return document.selection.createRange().text; }else{ return window.getSelection().toString(); } } 接着是监听document的鼠标抬起事件(onmouseup),判断选中文字的长度(比如要符合一定的字数才有意义)，决定是否显示分享图标；若满足条件，就获取鼠标当前位置，然后把分享图标显示在鼠标旁边。 //创建图标 var objImg=new Image(); objImg.src='share.gif'; objImg.alt='微博分享图标'; objImg.title='将选中的文字分享到微博'; objImg.style.display='none'; objImg.style.position='absolute'; objImg.style.cursor='pointer'; document.body.appendChild(objImg); //绑定鼠标抬起事件 document.onmouseup=function(ev){ var ev=ev||window.event, left=ev.clientX, top=ev.clientY; if(selectText().length>0){ //解决IE下图标与鼠标对不齐的问题 setTimeout(function(){ objImg.style.display='block'; objImg.style.left=left+'px'; objImg.style.top=top+'px'; },100); } } 然后给图标添加点击事件，跳转到分享页面地址，手动拼接url链接。由于鼠标松开后，onmouseup事件会冒泡到document,导致图标位置再次改变，所以要给图标添加onmouseup事件，阻止事件冒泡。 objImg.onclick=function(ev){ //分享API window.location.href='http://v.t.sina.com.cn/share/share.php?searchPic=false&title='+selectText()+'&url='+window.location.href; } //鼠标松开会触发document的mouseup事件/冒泡 objImg.onmouseup=function(ev){ var ev=ev||window.event; ev.cancelBubble=true; } 最后就是点击页面任意位置，隐藏图标。 document.onclick=function(ev){ objImg.style.display='none'; } 总的代码，存为select.js，若是含有中文，要使用UTF-8编码。 window.onload=function(){ var objImg=new Image(); objImg.src='share.gif'; objImg.alt='微博分享图标'; objImg.title='将选中的文字分享到微博'; objImg.style.display='none'; objImg.style.position='absolute'; objImg.style.cursor='pointer'; document.body.appendChild(objImg); functionselectText(){ if(document.selection){//For ie return document.selection.createRange().text; }else{ return window.getSelection().toString(); } } document.onmouseup=function(ev){ var ev=ev||window.event, left=ev.clientX, top=ev.clientY; setTimeout(function(){ if(selectText().length>0){ setTimeout(function(){ objImg.style.display='block'; objImg.style.left=left+'px'; objImg.style.top=top+'px'; },100); } },200); } objImg.onclick=function(ev){ window.location.href='http://v.t.sina.com.cn/share/share.php?searchPic=false&title='+selectText()+'&url='+window.location.href; } //鼠标松开会触发document的mouseup事件/冒泡 objImg.onmouseup=function(ev){ var ev=ev||window.event; ev.cancelBubble=true; } document.onclick=function(ev){ objImg.style.display='none'; } } 步骤二：配置chrome插件 开发所必需的的文件 最主要的就是一个清单文件manifest.json(不可缺少)，如果包含中文，要使用UTF-8编码。其中内容如下，标*的都要填，查看更详细资料就Google下： { "name":"分享文字",//插件名字 * "version":"1.0",//插件版本 * "manifest_version":2,//清单文件格式的版本,在Chrome18之后,应该都是2 * "description":"将选中文字分享到微博",//插件功能描述 "browser_action":{//插件标识 "default_icon":"favicon.ico"//显示的插件图标 * }, "content_scripts":[//在浏览器运行时，需要加入的js或css { "matches":["http://*/*"],//哪些http协议支持该插件 "js":["select.js"]//运行插件需要哪些js文件 * } ] } 最后把js、css、图片、manifest.json等所需文件统一放入一个文件夹内。 步骤三：安装插件 打开chrome浏览器，点击右上角的设置面板，选择设置，再点击扩展程序，勾选开发者模式，再点击加载正在开发的扩展程序，选择定义好的扩展程序文件夹即可，如果程序有错误，会提示，按提示改正即可。安装成功后，在浏览器的右上角会看到自己的插件图标。