一起来做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发送消息呢？

很明显，我们要告诉它，它才会知道，所以这里分两步

1. 获取当前活动中的tab，因为活动中的就是你看的
2. 向这个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/，有任何问题都可以联系我。