教你创建Chrome插件
程序员文章站
2022-06-05 22:38:12
...
插件需要实现的功能:在谷歌浏览器的页面上,当鼠标选中一段文字之后,浏览器中自动弹出提示,提示中显示的是已经选中的文字。
步骤:
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
- }
- ]
- }
这是我的文件夹下的目录:
3.下面就将上面的文件夹放入谷歌浏览器,形成一个插件:
打开chrome浏览器,点击右上角选中工具,扩展程序,将刚刚的文件夹拖拽入浏览器。插件就做好了。就可以看见你的icon.png在浏览器的右上角。
延伸:获取浏览器上鼠标选中的文本
chrome中:window.getSelection().toString()
IE:document.selection().createRange().text()
火狐:window.getSelection()
测试demo 见 test.zip
推荐阅读
-
java在线运行工具(教你创建一个普通的 Java 项目)
-
谷歌Chrome浏览器怎么下载安装Postman插件?
-
教你在javascript中创建元素的三种方式
-
微信转发抽奖的活动怎么做,简单几步教你创建微信抽奖活动
-
恼火Flash插件 IE/Chrome/Firefox/Opera等如何设置点击播放?
-
js专家教你如何快速编写简单的jQuery提示插件
-
Pullywood插件怎么用?Chrome浏览器去广告方法介绍
-
借助谷歌浏览器chrome的的插件批量下载网页图片
-
python+selenium+chrome批量文件下载并自动创建文件夹实例
-
2018-11-04 在线代码离线翻译Chrome插件"一马"v0.0.14