插件需要实现的功能:在谷歌浏览器的页面上,当鼠标选中一段文字之后,浏览器中自动弹出提示,提示中显示的是已经选中的文字。
步骤:
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
相关推荐
如果你之前从来没有写过Chrome插件,我建议你读一下这个。在这篇教程中,我们将教你如何使用Python代替JavaScript。 创建一个谷歌Chrome插件 首先,我们必须创建一个清单文件:manifest.json。 { "manifest_...
热门 高效开发 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器...
热门 工具 办公效率 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN ...
高效开发 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手:...
办公效率 工具 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器...
安全 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手: ...
安全 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手: ...
高效开发 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手:...
热门 办公效率 工具 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN ...
热门 创意 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手...
一 简介 特点: 创建 + 测试:创建和发送任何的HTTP请求,请求可以...document:依据你创建的Clollections自动生成API文档,并将其发布成规范的格式 collarorate:通过同步连接你的team和你的api,以及权限控制,API库.
高效开发 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手:...
热门 办公效率 工具 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN ...
创意 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手: ...
热门 安全 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手...
热门 工具 美化 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器...
Google Chrome浏览器扩展程序可让您先了解PhpCable的最新消息。 PhpCable是一个免费的在线PHP教程网站,专门为寻求在PHP开发领域中基于实践的完整指导的候选人而定制。 本教程向初学者以及经验丰富PHP程序员提供了...
语言:English在眨眼间的任何Web应用程序中创建教程!在眨眼间的任何Web应用程序中构建逐步的在线教程! 由于Slidetorial,您可以在... 不要浪费你的时间和金钱来创建复杂的软件指南,专注于对贵公司真正重要的事情!
请参阅中的API以及有关创建自己的自定义项的用户指南。 该插件使用 。 先决条件 IITC( ) IITC插件:绘图工具 IITC插件:显示门户列表 安装 目前,仅受邀请才能访问Ingress Resistance代理程序的此插件。 ...