[11] chrome 扩展开发 - 页面右键选项增加菜单并处理 contextMenus - Postbird

一、说明

contextMenus API 能够增强扩展程序的能力到当前页面上，在当前页面的右键菜单中直接注入扩展程序的功能选项或者其他操作按钮。

比如 google 翻译控制了选择了某些英文文本之后右键菜单有翻译选项：

二、权限说明

如果需要使用 contextMenus，则需要在 manifest 中配置 permissions：

{
        "name": "My extension",
        ...
        "permissions": [
          "contextMenus"
        ],
        "icons": {
          "16": "icon-bitty.png",
          "48": "icon-small.png",
          "128": "icon-large.png"
        },
        ...
      }

三、 contextMenus 属性和方法说明

1、ContextType - 上下文类型

这里 ContextType 是枚举类型，枚举了在什么样的上下文中要去注入右键菜单选项，可选值如下：

"all", 
"page", 
"frame", 
"selection", 
"link", 
"editable", 
"image",
"video", 
"audio", 
"launcher",
"browser_action", 
"page_action"

比如 link 是指在一个链接上使用右键菜单的时候，才会显示我们注入的菜单，google 翻译则是使用的 **selection**，选择了某些内容之后，右键菜单才会显示。

2、ItemType - 菜单类型

目前支持几种不同的菜单类型，比如 checkbox 多选框，在用于配置的时候颇有用，或者是 radio 单选框。

支持的菜单类型如下：

"normal", 
"checkbox", 
"radio", 
"separator"

3、create({}, ()=>{}) 创建菜单

chrome.contextMenus.create 方法用于向菜单中注入菜单，第一个参数是传入一个对象，对象中针对不同的场景，也需要传入不同的配置项。

必传的选项中，需要传入 id，这是菜单的唯一选项。

4、update(id, {}, () => {})

chrome.contextMenus.update 方法用于更新某个菜单选项，第一个参数需要传入菜单的 id，这个 id 在指定的时候就已经传入并且决定，是唯一的。

5、remove(id, () => {}) 移除菜单

chrome.contextMenus.remove 方法用于移除某个菜单选项，第一个参数是创建菜单的 id

6、removeAll(() => {}) 移除所有菜单

7、onClicked click 监听

对于按钮事件的点击，我们如果希望能够收到消息，这个时候就需要使用 chrome.contextMenus.onClicked.addEventListener((iknfo) => {}) 去监听，每次点击之后都会发过消息来。

当然创建 contextMenus 的时候，配置项可以配置一个 onclick 方法，但是在 ItemType === page 的时候是不起作用的，必须通过事件监听

不同类型的菜单，点击返回的内容也不尽相同，这和

四、使用示例

在界面上写了多个 button，每次点击 button，触发事件，这些代码不赘述，后面会贴出完整 demo。

1、创建一个普通菜单

button1.onclick = () => {
    const options = {
        type: 'normal',
        id: '1',
        title: 'demoMenu1',
        visible: true,
    }
    chrome.contextMenus.create(options, () => {
        alert(`Created Success, id:${options.id}`);
    });
}

菜单显示：

点击事件触发结果：

{
    "editable":false,
    "frameId":0,
    "menuItemId":"1",
    "pageUrl":"chrome://extensions/"
}

2、创建一个子菜单

创建子菜单需要有 parentId，指定父菜单是谁。

button2.onclick = () => {
    const options = {
        type: 'normal',
        id: '1_2',
        title: 'sub normal menu',
        visible: true,
        checked: true,
        parentId: '1',
    }
    chrome.contextMenus.create(options, () => {
        alert(`Created Success, id:${options.id}`);
    });
}

菜单显示：

3、创建一个 checkbox 菜单

checked: false 这个属性是可以指定默认是否选中的

button3.onclick = () => {
    const options = {
        type: 'checkbox',
        id: '1_3',
        title: 'checkbox menu',
        visible: true,
        checked: false
    }
    chrome.contextMenus.create(options, () => {
        alert(`Created Success, id:${options.id}`);
    });
}

菜单显示：

点击事件参数：

checked 能够接受到当前的选择状态

{
    "checked":false,
    "editable":false,
    "frameId":0,
    "menuItemId":"1_3",
    "pageUrl":"chrome-extension://agcjhkjgcnpomgfclijgmcomdjicnfjb/popup.html",
    "wasChecked":true
}

4、创建一个 radio 菜单

checked: false 这个属性是可以指定默认是否选中的

button4.onclick = () => {
    const options = {
        type: 'radio',
        id: '1_4',
        title: 'radio menu',
        checked: true
    }
    chrome.contextMenus.create(options, () => {
        alert(`Created Success, id:${options.id}`);
    });
}

菜单显示：

点击事件参数：

{
    "checked":true,
    "editable":false,
    "frameId":0,
    "menuItemId":"1_4",
    "pageUrl":"chrome-extension://agcjhkjgcnpomgfclijgmcomdjicnfjb/popup.html",
    "wasChecked":true
}

5、创建在链接上起作用的菜单

通过 contexts: ['link'] 是一个 array 类型的配置选项

button5.onclick = () => {
    const options = {
        type: 'normal',
        contexts: ['link'],
        id: '1_5',
        title: 'menu on link',
    }
    chrome.contextMenus.create(options, () => {
        alert(`Created Success, id:${options.id}`);
    });
}

菜单显示：

点击菜单事件参数：

在点击的时候，能够收到链接，从而做一些事情

{
    "editable":false,
    "frameId":0,
    "linkUrl":"https://developer.chrome.com/extensions/contextMenus#type-ItemType",
    "menuItemId":"1_5",
    "pageUrl":"https://developer.chrome.com/extensions/contextMenus#type-ContextType"
}

6、移除某个菜单

移除菜单需要传入菜单 id：

button6.onclick = () => {
    chrome.contextMenus.remove('1', () => {
        alert('removed')
    });
}

7、移除所有菜单

能够移除当前扩展程序注入的所有菜单

button7.onclick = () => {
    chrome.contextMenus.removeAll(() => {
        alert('removed')
    });
}

代码

完整的代码示例 github 地址：

https://github.com/postbird/chrome-extensions-demo/tree/master/demo9-contextMenus

Postbird