语法说明
这里只是简单列举一些常用的，完整API参见：https://developer.chrome.com/extensions/contextMenus
chrome.contextMenus.create({
type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal
title: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
onclick: function(){}, // 单击时触发的方法
parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单
documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
});
// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId)；
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);override(覆盖特定页面)
使用override页可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。
扩展可以替代如下页面：
- 历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history
- 新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab
- 书签：浏览器的书签，或者直接输入 chrome://bookmarks
注意：
- 一个扩展只能替代一个页面；
- 不能替代隐身窗口的新标签页；
- 网页必须设置title，否则用户可能会看到网页的URL，造成困扰；
下面的截图是默认的新标签页和被扩展替换掉的新标签页。
代码（注意，一个插件只能替代一个默认页，以下仅为演示）：
"chrome_url_overrides":
{
"newtab": "newtab.html",
"history": "history.html",
"bookmarks": "bookmarks.html"
}
devtools(开发者工具)
预热
使用过vue的应该见过这种类型的插件：
是的，Chrome允许插件在开发者工具(devtools)上动手脚，主要表现在：
- 自定义一个和多个和
Elements、Console、Sources等同级别的面板； - 自定义侧边栏(sidebar)，目前只能自定义
Elements面板的侧边栏；
先来看2张简单的demo截图，自定义面板（判断当前页面是否使用了jQuery）：
自定义侧边栏（获取当前页面所有图片）：
devtools扩展介绍
主页：https://developer.chrome.com/extensions/devtools
来一张官方图片：
每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevTools API以及有限的扩展API，这组特有的DevTools API只有devtools页面才可以访问，background都无权访问，这些API包括：
chrome.devtools.panels：面板相关；chrome.devtools.inspectedWindow：获取被审查窗口的有关信息；chrome.devtools.network：获取有关网络请求的信息；
大部分扩展API都无法直接被DevTools页面调用，但它可以像content-script一样直接调用chrome.extension和chrome.runtimeAPI，同时它也可以像content-script一样使用Message交互的方式与background页面进行通信。
