欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

教你创建Chrome插件

程序员文章站 2022-06-05 22:38:12
...
 插件需要实现的功能:在谷歌浏览器的页面上,当鼠标选中一段文字之后,浏览器中自动弹出提示,提示中显示的是已经选中的文字。

步骤:
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. }

这是我的文件夹下的目录:
教你创建Chrome插件
            
    
    博客分类: web前端开发 getSelection 
3.下面就将上面的文件夹放入谷歌浏览器,形成一个插件:
   打开chrome浏览器,点击右上角教你创建Chrome插件
            
    
    博客分类: web前端开发 getSelection 选中工具,扩展程序,将刚刚的文件夹拖拽入浏览器。插件就做好了。就可以看见你的icon.png在浏览器的右上角。

延伸:获取浏览器上鼠标选中的文本
chrome中:window.getSelection().toString()
IE:document.selection().createRange().text()
火狐:window.getSelection()
 
测试demo 见 test.zip
  • 教你创建Chrome插件
            
    
    博客分类: web前端开发 getSelection 
  • 大小: 1.3 KB
  • 教你创建Chrome插件
            
    
    博客分类: web前端开发 getSelection 
  • 大小: 6.7 KB
相关标签: getSelection