教你创建Chrome插件

 插件需要实现的功能：在谷歌浏览器的页面上，当鼠标选中一段文字之后，浏览器中自动弹出提示，提示中显示的是已经选中的文字。

步骤：
1.首先我写了一个js，主要执行的功能就是在鼠标选中一段文字之后，弹出被选中的文字
   使用的方法：window.getSelection().toString()
   该js代码如下，保存为my.js：

1. window.onload = function(){
2.     document.documentElement.onmouseup = function(){
3.         if(window.getSelection().toString().trim().length != 0){
4.             alert(window.getSelection().toString());
5.         }
6.     }
7. }

2.将自己的js放在一个文件夹中，例如test，该文件夹中包含自己要引入的js，manifest.json，和一些图片等。
manifest.json是必不可少的，这是配置谷歌插件的必须品。其中的内容如下：

1. {
2.   "name": "我的测试插件",//插件名称
3.   "version": "1.0",//插件版本
4.   "manifest_version":2,//这个必不可少
5.   "description": "这是我的测试",//鼠标hover时显示的文字
6.   "browser_action": {//你的插件的标识
7.     "default_icon": "14.png",//小图标
8.   },
9.   "content_scripts": [//在浏览器运行时，需要加入的js或者css
10.     {
11.       "matches": ["http://*/*"],//哪些http协议支持该插件
12.       "js": ["my.js", "jquery-2.0.3.min.js"]//插入哪些js
13.     }
14.   ]
15. }

这是我的文件夹下的目录：

3.下面就将上面的文件夹放入谷歌浏览器，形成一个插件：
   打开chrome浏览器，点击右上角选中工具，扩展程序，将刚刚的文件夹拖拽入浏览器。插件就做好了。就可以看见你的icon.png在浏览器的右上角。

延伸：获取浏览器上鼠标选中的文本
chrome中：window.getSelection().toString()
IE:document.selection().createRange().text()
火狐：window.getSelection()

 

测试demo 见 test.zip