Chrome 插件开发指南
一般来说，插件的原理是向页面中注入 javascript 脚本，对页面进行处理，比如屏蔽页面中可能的广告元素，改变某些元素的样式，增加一些 UI。
开发插件需要使用前端技术：html css javascript。
本文就从入门开始讲述如何开发一款 chrome 插件。
注意：chrome 插件机制本身也在更新，本文讲述的是目前普遍使用的 V2 插件的开发。
Manifest V3 is available beginning with Chrome 88, and the Chrome Web Store begins accepting MV3 extensions in January 2021.
插件构成
chrome 插件通常由以下几部分组成：
manifest.json：相当于插件的 meta 信息，包含插件的名称、版本号、图标、脚本文件名称等，这个文件是每个插件都必须提供的，其他几部分都是可选的。
background script：可以调用全部的 chrome 插件 API，实现跨域请求、网页截屏、弹出 chrome 通知消息等功能。相当于在一个隐藏的浏览器页面内默默运行。
功能页面：包括点击插件图标弹出的页面（简称 popup）、插件的配置页面（简称 options）。
content script：早期也被称为 injected script，是插件注入到页面的脚本，但是不会体现在页面 DOM 结构里。content script 可以操作 DOM，但是它和页面其他的脚本是隔离的，访问不到其他脚本定义的变量、函数等，相当于运行在单独的沙盒里。content script 可以调用有限的 chrome 插件 API，网络请求收到同源策略限制。
插件的架构可以参考：https://developer.chrome.com/docs/extensions/mv2/architecture-overview/
重点说明以下几点：
browser action 和 page action：这俩我们可以理解为插件的按钮。browser action 会固定在 chrome 的工具栏。而 page action 可以设置特定的网页才显示图标，在地址栏的右端，如下图：
大部分插件点击之后会显示 UI，也就是上文描述的插件功能页面部分，一般称为 popup 页面，如下图：
popup 无法通过程序打开，只能由用户点击打开。点击 popup 之外的区域会导致 popup 收起。
page action 和 browser action 分别由 manifest.json 的 page_action 和 browser_action 字段配置。
由于 content script 受到同源策略的限制，所以一般网络请求都交给 background script 处理。content script、插件功能页面、background script 之间的通信架构如下图：
chrome 可以打开多个浏览器窗口，而一个窗口会有多个 tab，所以插件的结构大致如下：
如上图，功能页面是每个 window 一份，但是每个 tab 都会注入 content script。
manifest.json
下文简称 manifest ，其中有这么几个字段可以重点说明：
content_scripts
content_scripts 可以使用以下两种方式注入页面，这两种方式并不冲突，可以结合使用。
声明式注入
举例如下：
{
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_idle",
"js": ["content.js"]
}
]
}
在 manifest 中声明要加载的脚本，各个字段都比较直观。其中：
matches 表示页面 url 匹配时才加载run_at
