一起来做chrome扩展《页面右键菜单》
本文主要内容
- contextMenus的设置
- 打开权限
- 创建菜单
- 点击菜单
- background script向content script发送消息
1. contextMenus的设置
1.1 打开权限
contextMenus同其它功能一样,都需要在permissions里指定开启,所以非常简单,在项目的manifest.json文件的permissions中加上contextMenus
"permissions": [
"contextMenus"
]
这样就可以在background script里使用contextMenus了
1.2 创建右键菜单
首先需要明确,创建菜单以及菜单的事件都是由background script操作的,不是content script,不要被菜单在页面上的现象蒙蔽了。所以,在manifest.json里,一定要配置background scripts(这是重点,勾上,要考)
在background script里,创建菜单代码:
chrome.contextMenus.create({
type: 'normal',
title: 'Menu Demo',
id: 'menuDemo',
contexts: ['all'],
onclick: genericOnClick
}, function () {
console.log('contextMenus are create.');
});
create方法第一个参数是菜单信息对象,具体可以查看:https://developer.chrome.com/extensions/contextMenus
这里主要提的是title,id,onclick
title 很显示就是menu的名字
id 当然就是它的ID,点击后要判断点的是谁,就得靠它了,所以名字好好取
onclick 点击事件,跟的就是处理的方法名,如genericOnClick,就是对应的一个function
1.3 点击菜单
使用create参数的onclick或是监听事件方法都可以对菜单的点击事件进行监听,它们的回调函数都会带两个参数,info和tabs
function genericOnClick(info, tab) {
// do something.
}
info 是一个字典数据,包含页面及菜单的一些信息,以及在页面上选中的内容文本
{
editable: false
frameId: 0
menuItemId: "menuDemo"
pageUrl: "https://www.colorgamer.com/"
selectionText: "colorgamer"
}
信息一目了然
tab 同样是一个字典,包含页面比较具体的一些信息,如tab id等信息,页面宽度等,具体可以自行查看,这里我们将用到tab的id。
那么菜单有了,事件也有了,接下来的问题就是,通过contextMenus拿到的信息,执行的操作都是在background script里的,那如果传回content script里呢?因为很多事情还是要在页面上处理,而不是后台处理。
在前面一篇一起来做chrome扩展《AJAX请求》,我们说过content script如果向background script发送消息,其实倒过来也是成立的,只是有一点(重点,要考)
每个extension的后台都只有一个,而tabs有无数个,所以,每个tabs向background script发送消息不需要指定什么就能送达,而倒过来后,background script要向哪个tab发送消息呢?
很明显,我们要告诉它,它才会知道,所以这里分两步
- 获取当前活动中的tab,因为活动中的就是你看的
- 向这个tab发送消息
代码如下:
// 向该tab发送消息
chrome.tabs.sendMessage(tab.id, {'contextMenuId': info.menuItemId, 'info': info}, function(response) {});
发送消息,之前我们使用的是chrome.extension.sendMessage,这里使用chrome.tabs.sendMessage,很明显,是向指定的tab发送,sendMessage方法有三个参数
- 第一个参数是tab的ID
- 第二个参数是发送的数据对象
- 第三个就是回调函数了,有什么要传回来的,都是通过它进行
content script接收消息和之前一样
chrome.extension.onMessage.addListener(function(request, _, response) {
console.log(request);
});
request即是sendMessage的第二个参数的数据对象,response当然就是回调函数了。
好了,关于Chrome Extension的contextMenus的使用就这些内容,关于contextMenus更多的信息可以参考官方文档。
谢谢您的阅读,本文同时发布于我的个人网站:http://www.colorgamer.com/index.php/archives/39/,有任何问题都可以联系我。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?