图灵社区教程
当用户在网页中点击鼠标右键后，会唤出一个菜单，在上面有复制、粘贴和翻译等选项，为用户提供快捷便利的功能。Chrome 也将这里开放给了开发者，也就是说我们可以把自己所编写的扩展功能放到右键菜单中。
要将扩展加入到右键菜单中，首先要在 Manifest 的 permissions 域中声明
contextMenus 权限。
"permissions": [
"contextMenus"
]
同时还要在 icons 域声明 16 像素尺寸的图标，这样在右键菜单中才会显示出扩展的图标。
"icons": {
"16": "icon16.png"
}
要出现右键菜单我们的 manifest.json 应该是这样的：
{
"manifest_version": 2,
"name": "右键菜单",
"version": "1.0",
"description": "右键菜单 Demo",
"background": {
"scripts": [
// 菜单的样式可在背景js声明
"js/background.js"
]
},
// 设定菜单图标
"icons": {
"16": "images/icon16.png"
},
// 设置使用右键菜单的权限
"permissions": [
"contextMenus"
]
}
Chrome 提供了三种方法操作右键菜单，分别是 create、update 和remove，对应于创建、更新和移除操作。
右键菜单提供了 4 种类型，分别是 普通菜单、复选菜单、单选菜单 和 分割线，其中普通菜单还可以有下级菜单。连续相邻的单选菜单会被自动认为是对同一设置的选项，同时单选菜单会自动在两端生成分割线。
我们在 background.js 中声明右键菜单的样式。
普通菜单
chrome.contextMenus.create({
type: 'normal',
title: 'Menu A',
id: 'a'
});
chrome.contextMenus.create({
type: 'normal',
title: 'Menu B',
id: 'b',
});
效果：
单选菜单
chrome.contextMenus.create({
type: 'radio',
title: 'Menu A',
id: 'a',
checked: true
});
chrome.contextMenus.create({
type: 'radio',
title: 'Menu B',
id: 'b',
checked: true
});
chrome.contextMenus.create({
type: 'radio',
title: 'Menu C',
id: 'c',
checked: true
});
效果：
复选菜单
chrome.contextMenus.create({
type: 'checkbox',
title: 'Menu D',
id: 'd',
checked: true
});
chrome.contextMenus.create({
type: 'checkbox',
title: 'Menu E',
id: 'f',
checked: false
});
多重菜单
chrome.contextMenus.create({
type: 'normal',
title: 'Menu A',
id: 'a'
});
chrome.contextMenus.create({
type: 'normal',
title: 'Menu B',
id: 'b'
});
chrome.contextMenus.create({
type: 'normal',
title: 'Menu F',
id: 'f',
parentId: 'a'
});
chrome.contextMenus.create({
type: 'normal',
title: 'Menu G',
id: 'g',
parentId: 'a'
});
效果：
我们还可以定义自定义的右键菜单在何时显示比如当用户选择文本时，或者在超级链接上单击右键时。下面的代码定义当用户，在超级链接上点击右键时，在菜单中显示 "My Menu" 菜单：
chrome.contextMenus.create({
type: 'normal',
title: 'My Menu',
contexts: ['link']
});
效果：
contexts 域的值是数组型的，也就是说我们可以定义多种情况下显示自定义菜单，完整的选项包括 all、page、frame、selection、link、editable、image、video、audio 和 launcher，默认情况下为 page，即在所有的页面唤出右键菜单时都显示自定义菜单。
其中 launcher 只对 Chrome 应用有效，如果包含 launcher 选项，则当用户在 chrome://apps/ 或者其他地方的应用图标点击右键，将显示相应的自定义菜单。需要注意的是，all 选项不包括 launcher。
有时我们不仅想在特定的情况下显示自定义菜单，还希望限定 URL，chrome 同样提供了匹配 URL 的选项。documentUrlPatterns 允许限定页面的 URL。
chrome.contextMenus.create({
type: 'normal',
title: 'My Menu',
contexts: ['link'],
documentUrlPatterns: ['*://*.baidu.com/*']
});
这样就限定了该菜单只在百度页面内生效。
targetUrlPatterns 和 documentUrlPatterns 作用差不多，但它所限定的不是标签的 URL，而是诸如图片、视频和音频等资源的 URL。
如果在创建菜单时，定义了 onclick 域，则菜单被点击后就会调用 onclick 指定的函数。调用的函数会接收到两个参数，分别是点击后的相关信息和当前标签信息。
点击后的相关信息包括菜单 id、上级菜单 id、媒体类型（image、video 或 audio）、超级链接目标、媒体 URL、页面 URL、框架 URL、选择的文字、是否可编辑（只针对 text input 和 textarea 等控件）、用户点击前是否被选中和当前是否被选中（只针对 checkbox 或 radio）。
完整的信息结构可以通过 官方文档 查看。