另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。
严格来讲，我们正在说的东西应该叫Chrome扩展(ChromeExtension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。
个人猜测crx可能是ChromeExtension如下3个字母的简写：
另外，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI)，比如全屏幕截图。
由于安全原因，Chrome浏览器42以上版本已经陆续不再支持NPAPI插件，取而代之的是更安全的PPAPI。
增强浏览器功能，轻松实现属于自己的“定制版”浏览器，等等。
Chrome插件提供了很多实用API供我们使用，包括但不限于：
Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即可，也不需要专门的IDE，普通的web开发工具即可。
勾选开发者模式即可以文件夹的形式直接加载插件，否则只能安装.crx格式的文件。Chrome要求插件必须从它的Chrome应用商店安装，其它任何网站下载的都无法直接安装，所以，其实我们可以把crx文件解压，然后通过开发者模式直接加载。
开发中，代码有任何改动都必须重新加载插件，只需要在插件管理页按下Ctrl+R即可，以防万一最好还把页面刷新一下。
示例配置：
其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。
好了，Chrome插件给我们提供了这么强大的JS注入功能，剩下的就是发挥你的想象力去玩弄浏览器了。
后台（姑且这么翻译吧），是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。
经过测试，其实不止是background，所有的直接通过chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。
配置中，background可以通过page指定一张网页，也可以通过scripts直接指定一个JS，Chrome会自动为这个JS生成一个默认的网页：
{//会一直常驻的后台JS或后台页面"background":{//2种指定方式，如果指定JS，那么会自动生成一个背景页"page":"background.html"//"scripts":["js/background.js"]},}需要特别说明的是，虽然你可以通过chrome-extension://xxx/background.html直接打开后台页，但是你打开的后台页和真正一直在后台运行的那个页面不是同一个，换句话说，你可以打开无数个background.html，但是真正在后台常驻的只有一个，而且这个你永远看不到它的界面，只能调试它的代码。
{"background":{"scripts":["event-page.js"],"persistent":false},}它的生命周期是：在被需要时加载，在空闲时被关闭，什么叫被需要时呢？比如第一次安装、插件更新、有content-script向它发送消息，等等。
除了配置文件的变化，代码上也有一些细微变化，个人这个简单了解一下就行了，一般情况下background也不会很消耗性能的。
popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。
popup可以包含任意你想要的HTML内容，并且会自适应大小。可以通过default_popup字段来指定popup页面，也可以调用setPopup()方法。
配置方式：
在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
这里的injected-script是我给它取的，指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢？又或者说为什么需要通过这种方式注入JS呢？
这是因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？其实这就是本小节要讲的。
在content-script中通过DOM方式向页面注入inject-script代码示例：
{//普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的"web_accessible_resources":["js/inject.js"],}至于inject-script如何调用content-script中的代码，后面我会在专门的一个消息通信章节详细介绍。
开发者或者插件主页设置，一般会在如下2个地方显示：
通过配置browser_action可以在浏览器的右上角增加一个图标，一个browser_action可以拥有一个图标，一个tooltip，一个badge和一个popup。
示例配置如下：
"browser_action":{"default_icon":"img/icon.png","default_title":"这是一个示例Chrome插件","default_popup":"popup.html"}5.1.1.图标browser_action图标推荐使用宽高都为19像素的图片，更大的图标会被缩小，格式随意，一般推荐png，可以通过manifest中default_icon字段配置，也可以调用setIcon()方法。
修改browser_action的manifest中default_title字段，或者调用setTitle()方法。
所谓badge就是在图标上显示一些文本，可以用来更新一些小的扩展状态提示信息。因为badge空间有限，所以只支持4个以下的字符（英文4个，中文2个）。badge无法通过配置文件来指定，必须通过代码实现，设置badge文字和颜色可以分别使用setBadgeText()和setBadgeBackgroundColor()。
所谓pageAction，指的是只有当某些特定页面打开才显示的图标，它和browserAction最大的区别是一个始终都显示，一个只在特定情况才显示。
而新版的Chrome更改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：
具体是从哪一版本开始改的没去仔细考究，反正知道v50.0的时候还是前者，v58.0的时候已改为后者。
调整之后的pageAction我们可以简单地把它看成是可以置灰的browserAction。
示例(只有打开百度才显示图标)：
通过开发Chrome插件可以自定义浏览器的右键菜单，主要是通过chrome.contextMenusAPI实现，右键菜单可以出现在不同的上下文，比如普通页面、选中的文字、图片、链接，等等，如果有同一个插件里面定义了多个菜单，Chrome会自动组合放到以插件名字命名的二级菜单里，如下：
扩展可以替代如下页面：
注意：
下面的截图是默认的新标签页和被扩展替换掉的新标签页。
代码（注意，一个插件只能替代一个默认页，以下仅为演示）：
"chrome_url_overrides":{"newtab":"newtab.html","history":"history.html","bookmarks":"bookmarks.html"}5.5.devtools(开发者工具)5.5.1.预热使用过vue的应该见过这种类型的插件：
是的，Chrome允许插件在开发者工具(devtools)上动手脚，主要表现在：
先来看2张简单的demo截图，自定义面板（判断当前页面是否使用了jQuery）：
自定义侧边栏（获取当前页面所有图片）：
来一张官方图片：
每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevToolsAPI以及有限的扩展API，这组特有的DevToolsAPI只有devtools页面才可以访问，background都无权访问，这些API包括：
大部分扩展API都无法直接被DevTools页面调用，但它可以像content-script一样直接调用chrome.extension和chrome.runtimeAPI，同时它也可以像content-script一样使用Message交互的方式与background页面进行通信。
{//只能指向一个HTML文件，不能是JS文件"devtools_page":"devtools.html"}这个devtools.html里面一般什么都没有，就引入一个js：
再来看devtools.js的代码：
以下截图示例的代码：
所谓options页，就是插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面：
在Chrome40以前，options页面和其它普通页面没什么区别，Chrome40以后则有了一些变化。
{//Chrome40以前的插件配置页写法"options_page":"options.html",}这个页面里面的内容就随你自己发挥了，配置之后在插件管理页就会看到一个选项按钮入口，点进去就是打开一个网页，没啥好讲的。
效果:
{"options_ui":{"page":"options.html",//添加一些默认的样式，推荐使用"chrome_style":true},}options.html的代码我们没有任何改动，只是配置文件改了，之后效果如下：
看起来是不是高大上了？
几点注意：
omnibox是向用户提供搜索建议的一种方式。先来看个gif图以便了解一下这东西到底是个什么鬼：
注册某个关键字以触发插件自己的搜索建议界面，然后可以任意发挥了。
首先，配置文件如下：
{//向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字"omnibox":{"keyword":"go"},}然后background.js中注册监听事件：
在后台JS中，无论是使用chrome.notifications还是Notification都不需要申请权限（HTML5方式需要申请权限），直接使用即可。
最简单的通知：
代码：
这个没有深入研究，有需要的可以去看官方文档。
Chrome插件的JS主要可以分为这5类：injectedscript、content-script、popupjs、backgroundjs和devtoolsjs，
前面我们介绍了Chrome插件中存在的5种JS，那么它们之间如何互相通信呢？下面先来系统概况一下，然后再分类细说。需要知道的是，popup和background其实几乎可以视为一种东西，因为它们可访问的API都一样、通信机制一样、都可以跨域。
注：-表示不存在或者无意义，或者待验证。
popup可以直接调用background中的JS方法，也可以直接访问background的DOM：
至于background访问popup如下（前提是popup已经打开）：
网上有些老代码中用的是chrome.extension.onMessage，没有完全查清二者的区别(貌似是别名)，但是建议统一使用chrome.runtime.onMessage。
content-script.js：
content-script和页面内的脚本（injected-script自然也属于页面内的脚本）之间唯一共享的东西就是页面的DOM元素，有2种方法可以实现二者通讯：
第一种方法（推荐）：
injected-script中：
window.addEventListener("message",function(e){console.log(e.data);},false);第二种方法：
短连接的话就是挤牙膏一样，我发送一下，你收到了再回复一下，如果对方不回复，你只能重新发，而长连接类似WebSocket会一直建立连接，双方可以随时互发消息。
短连接上面已经有代码示例了，这里只讲一下长连接。
popup.js：
示例manifest.json配置：
//获取当前选项卡IDfunctiongetCurrentTabId(callback){chrome.tabs.query({active:true,currentWindow:true},function(tabs){if(callback)callback(tabs.lengthtabs[0].id:null);});}获取当前选项卡id的另一种方法，大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时）
//获取当前选项卡IDfunctiongetCurrentTabId2(){chrome.windows.getCurrent(function(currentWindow){chrome.tabs.query({active:true,windowId:currentWindow.id},function(tabs){if(callback)callback(tabs.lengthtabs[0].id:null);});});}8.5.本地存储本地存储建议用chrome.storage而不是普通的localStorage，区别有好几点，个人认为最重要的2点区别是：
_locales\en\messages.json内容：
{"pluginDesc":{"message":"Asimplechromeextensiondemo"},"helloWorld":{"message":"HelloWorld!"}}_locales\zh_CN\messages.json内容：
{"pluginDesc":{"message":"一个简单的Chrome插件demo"},"helloWorld":{"message":"你好啊，世界！"}}在manifest.json和CSS文件中通过__MSG_messagename__引入，如：
{"description":"__MSG_pluginDesc__",//默认语言"default_locale":"zh_CN",}JS中则直接chrome.i18n.getMessage("helloWorld")。
测试时，通过给chrome建立一个不同的快捷方式chrome.exe--lang=en来切换语言，如：
英文效果：
中文效果：
比较常用用的一些API系列：
已安装的插件源码路径：C:\Users\用户名\AppData\Local\Google\Chrome\UserData\Default\Extensions，每一个插件被放在以插件ID为名的文件夹里面，想要学习某个插件的某个功能是如何实现的，看人家的源码是最好的方法了：
很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正式由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。
在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。这种方法在某些情况下很实用！
也就是不支持将js直接写在html中，比如：
如果这样写：
之所以强调这个，是因为这个带来的问题非常隐蔽，不太容易找到，可能你正在写某个网页，昨天样式还是好好的，怎么今天就突然不行了？然后你辛辛苦苦找来找去，找了半天才发现竟然是因为插件里面的一个样式影响的！
打包的话直接在插件管理页有一个打包按钮：
推荐查看官方文档，虽然是英文，但是全且新，国内的中文资料都比较旧（注意以下全部需要FQ）：