一块儿来作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/，有任何问题均可以联系我。