Chrome插件开发-右键菜单开启页面编辑
开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version
版本为3。
Chrome插件基本知识
Chrome插件通常由以下几部分组成:
- manifest.json
该文件为必须项,其它文件都是可选的。该文件相当于插件的meta信息,包含manifest版本、插件名称、插件版本、插件描述、popup、background、content等配置。
- content script
通过manifest.json的content_scripts
配置,可用正则匹配决定该脚本需要在哪些网站的页面执行。该脚本直接作用于具体的页面,是插件注入到页面的脚本,但是不会体现在页面DOM结构里,相当于我们F12后在控制台执行脚本。content_scripts可以操作DOM,但是它和页面其他的脚本是隔离的,访问不到其他脚本定义的变量、函数等,相当于运行在单独的沙盒里。content script可以调用有限的Chrome插件API,网络请求受到同源策略限制。
- popup
通过manifest.json的action
下的default_popup
配置,点击插件栏的插件图标后的弹出页面。
- background.js
通过manifest.json的background
下的service_worker
配置,可以调用全部的Chrome插件API,实现跨域请求、网页截屏、弹出Chrome通知消息等功能。该页面的输出信息可以在【扩展程序】找到对应插件,点开【查看视图】后面的【Service Worker】,在弹出窗口中查看。
content、popup、background之间的通信
每个页面都会有一个content和popup,所有页面共用一个background。它们之间的通信需要使用Chrome API,具体用法可以参考官方文档。本文代码仅展示background和content的通信。
代码实现
把以下文件放在同一个文件夹中,打开Chrome的插件界面,打开开发者模式,直接把文件夹拖进Chrome的插件界面即可。
manifest.json
{"manifest_version": 3,"name": "开启/关闭页面编辑","version": "0.0.1","description": "鼠标右键菜单开启/关闭页面编辑功能","action": {"default_icon": "./icon.png","default_popup": "./popup.html"},"icons": {"16": "./icon_16.png"},"permissions": ["contextMenus","tabs","notifications"],"background": {"service_worker": "./background.js"},"content_scripts": [{"matches": ["http://*/*","https://*/*"],"run_at": "document_idle","js": ["./content-script.js"]}]
}
content-script.js
chrome.runtime.onMessage.addListener((data, pluginInfo) => {console.log("data:", JSON.stringify(data));console.log("pluginInfo:", JSON.stringify(pluginInfo));if (data.menuInfo.parentMenuItemId != "editHtml") {console.log("不是页面编辑开启/关闭按钮");return;}document.body.contentEditable = data.menuInfo.menuItemId == "editHtmlOn";
});
background.js
// 右键一级菜单
chrome.contextMenus.create({title: '开启/关闭页面编辑',id: 'editHtml',contexts: ['all'],type: "normal" // "normal", "checkbox", "radio", "separator"
}, () => {console.log('contextMenus are created.');
});// 右键二级菜单-关闭
chrome.contextMenus.create({title: '关闭',id: 'editHtmlOff',parentId: "editHtml",contexts: ['all'],type: "radio", // "normal", "checkbox", "radio", "separator"checked: true
}, () => {console.log('OFF contextMenus are created.');
});// 右键二级菜单-开启
chrome.contextMenus.create({title: '开启',id: 'editHtmlOn',parentId: "editHtml",contexts: ['all'],type: "radio", // "normal", "checkbox", "radio", "separator"checked: false
}, () => {console.log('ON contextMenus are created.');
});// 监听右键菜单被点击事件
chrome.contextMenus.onClicked.addListener((menuInfo, tabInfo) => {// 菜单信息,具体内容请自行查看调试窗口的调试日志console.log("menuInfo:", JSON.stringify(menuInfo))// 页面信息,具体内容请自行查看调试窗口的调试日志console.log("tabInfo:", JSON.stringify(tabInfo))chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {// 页签信息,具体内容请自行查看调试窗口的调试日志console.log("tabs:", JSON.stringify(tabs))// 向当前页签(即tabs[0])发送消息chrome.tabs.sendMessage(tabs[0].id,{menuInfo: menuInfo,tabInfo: tabInfo,msg: "msg from background"},(res) => {console.info(JSON.stringify("res:", res));if (res) {// 发送系统通知chrome.notifications.create("reminder", {type: "basic",iconUrl: "notifications.png",title: "出错!!!",message: "开启页面编辑出错!!!" + JSON.stringify(res)})return;}// 发送系统通知chrome.notifications.create("reminder", {type: "basic",iconUrl: "./notifications.png", // 通知使用的图标title: (menuInfo.menuItemId == "editHtmlOn" ? "已开启" : "已关闭") + "编辑功能", // 通知标题,一定要有内容,哪怕是空字符串,否则不会发送通知message: "当前页面已" + (menuInfo.menuItemId == "editHtmlOn" ? "开启" : "关闭") + "编辑功能" // 通知内容,一定要有内容,哪怕是空字符串,否则不会发送通知})})})
});
popup.html
<!DOCTYPE html>
<html><head><meta charset='utf-8'>
</head><body><h1 id="title" style="color:blueviolet;background-color: orange;">这是一个示例popup</h1>
</body></html>
icon.png & icon_16.png & notifications.png
随便找些图片就行
参考
chrome 插件开发指南
Chrome插件开发-右键菜单开启页面编辑相关推荐
- Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项 浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档 插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图 浏览器页面右键 ...
- chrome添加右键菜单收藏CSDN文章到我的博客
需求: 看到好的文章时,想收藏,但是chrome的收藏夹不支持搜索(虽然有其他插件可以用),收藏的多了以后不好找,而且万一某一天浏览器或系统重装,而没有登录同步数据或者没有导出由的话这些收藏就会丢失. ...
- java 树 右键菜单_VUE实现Studio管理后台(八):用右键菜单contextmenu,编辑树形结构...
RXEdior预设会有文件管理功能,但是灵活性需求不大,目前的设想是文件夹不允许修改,只允许增删改文件.基于这样的设想,把界面实现成这个效果: 这个功能并不是一个通用功能,并且我们做的代码,也没有按照 ...
- eclipse插件开发 -右键菜单 - popup menu
右键时,想只对java文件显示插件,可以这样设置 在Extensions - (objectContribution) - 左边的objectClass中设置: org.eclipse.jdt.cor ...
- 创建chrome右键菜单划词搜索扩展
转载请注明出处:http://blog.csdn.net/zhymax/article/details/8552830 上网时经常在多个搜索引擎间切换,但使用chrome自带的搜索引擎切换比较麻烦,换 ...
- wxpython 右键菜单_使用wxPython打造印象笔记(14)笔记本管理
上一篇文章中,我们用peewee对数据库建模并创建了数据库,然后成功的加载了默认笔记本.这篇文章将完成笔记本的管理功能,分为创建笔记本,修改笔记本,删除笔记本这三个功能.创建笔记本编辑笔记本删除笔记本 ...
- 记事本TXT中文默认保存的ANSI格式文件乱码,一些软件菜单乱码,右键菜单某些乱码...
记事本TXT中文默认保存的ANSI格式文件乱码,一些软件菜单乱码,右键菜单某些乱码 发现的乱码现象主要体现在WinRAR软件的右键菜单.记事本编辑打开的所有ANSI格式编码的文件.FlashFXP上传 ...
- OnContextMenu事件-单禁用右键菜单
OnContextMenu事件 用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用οncοntextmenu='return false'来取消鼠标右键:在JS中设置οncοnt ...
- ps右键不显示编辑选项_90%的用户都不知道这项Chrome隐藏功能如何开启,超级实用!...
为了增强浏览器的功能,我们通常会在Chrome上安装各种插件. 甚至一些需要第三方电脑软件才能实现的,通过插件都可以在浏览器内完成. 但是,Chrome的运行机制是把所有打开的网页标签.插件.播放的视 ...
最新文章
- Android的消息机制
- Runtime.getRuntime().exec(...)使用方法
- Android-RelativeLayout布局技巧(一)
- 无线路由器——多路由器无线桥联解决方案
- window系统下安装TensorFlow-gpu
- FireMonkey 保存图片到JPG的方法 BMP转JPG
- 在计算机领域提到的假说,量子力学中假说的发展及相关影响
- 计算机二级C语言题库
- Revit 2019注册机
- 新一配:文言文也能编程?该项目在GitHub摘得5500星
- 如何测试充电宝输出电压-20210127
- python购买股票_Python|买卖股票的最佳时机
- SolidWorks怎么开启RealView图形渲染功能
- htpps安装证书检查提示“错误: 服务器缺少中间证书”
- 7-Zip压缩包如何删除密码
- python爬虫_爬取京东商品写入Excel表
- 数据结构和算法 绪论
- Salesforce中Billing Address和Shipping Address的区别
- matlab出图时汉字都变成方框_汉字显示成方框的问题
- 牛客网习题之牛妹的蛋糕