插件需要实现的功能:在谷歌浏览器的页面上,当鼠标选中一段文字之后,浏览器中自动弹出提示,提示中显示的是已经选中的文字。
步骤:
1.首先我写了一个js,主要执行的功能就是在鼠标选中一段文字之后,弹出被选中的文字
使用的方法:window.getSelection().toString()
该js代码如下,保存为my.js:
2.将自己的js放在一个文件夹中,例如test,该文件夹中包含自己要引入的js,manifest.json,和一些图片等。
manifest.json是必不可少的,这是配置谷歌插件的必须品。其中的内容如下:
这是我的文件夹下的目录:
3.下面就将上面的文件夹放入谷歌浏览器,形成一个插件:
打开chrome浏览器,点击右上角
选中工具,扩展程序,将刚刚的文件夹拖拽入浏览器。插件就做好了。就可以看见你的icon.png在浏览器的右上角。
延伸:获取浏览器上鼠标选中的文本
chrome中:window.getSelection().toString()
IE:document.selection().createRange().text()
火狐:window.getSelection()
步骤:
1.首先我写了一个js,主要执行的功能就是在鼠标选中一段文字之后,弹出被选中的文字
使用的方法:window.getSelection().toString()
该js代码如下,保存为my.js:
- window.onload = function(){
- document.documentElement.onmouseup = function(){
- if(window.getSelection().toString().trim().length != 0){
- alert(window.getSelection().toString());
- }
- }
- }
2.将自己的js放在一个文件夹中,例如test,该文件夹中包含自己要引入的js,manifest.json,和一些图片等。
manifest.json是必不可少的,这是配置谷歌插件的必须品。其中的内容如下:
- {
- "name": "我的测试插件",//插件名称
- "version": "1.0",//插件版本
- "manifest_version":2,//这个必不可少
- "description": "这是我的测试",//鼠标hover时显示的文字
- "browser_action": {//你的插件的标识
- "default_icon": "14.png",//小图标
- },
- "content_scripts": [//在浏览器运行时,需要加入的js或者css
- {
- "matches": ["http://*/*"],//哪些http协议支持该插件
- "js": ["my.js", "jquery-2.0.3.min.js"]//插入哪些js
- }
- ]
- }
这是我的文件夹下的目录:
![](https://i-blog.csdnimg.cn/blog_migrate/11a632835d10753eb6959ef3382e6f92.png)
3.下面就将上面的文件夹放入谷歌浏览器,形成一个插件:
打开chrome浏览器,点击右上角
![](https://i-blog.csdnimg.cn/blog_migrate/0f44c14137f1030024f9c974299b3705.jpeg)
延伸:获取浏览器上鼠标选中的文本
chrome中:window.getSelection().toString()
IE:document.selection().createRange().text()
火狐:window.getSelection()
测试demo 见 test.zip