了解 Chrome 插件

#Chrome Extention 2021/05/13 19:32:09

Chrome 插件可以笼统的分为五个部分，manifest.json、backgorund、content scripts、popup page、option page，其中 manifest.json 是一个描述文件，囊括插件所有的部署信息。background 一直在后台运行监听事件，content scripts 与页面交互，唯一可以获取页面的 Dom 信息的地方，popup page 插件主体界面，option page 选项界面。

Chrome 插件在 2021.1.19 推出了 V3 版本，因此这里讲的都是 V3 版本。

manifest.json

{
  "name": "demo",
  "description": "this is a demo",
  "version": "1.0",
  "manifest_version": 3,
  //有了上面的基本配置信息就可以直接在浏览器里加载出来一个插件。
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png", //导航栏右侧展示的 icon
    "default_title": "wukong design"
  },
  "icons": { "128": "icon.png" }, //扩展程序列表的icon
  "background": {
    "service_worker": "backgorund.js"
  },
  "permissions": ["notifications", "tabs", "webRequest", "storage", "activeTab", "scripting", "declarativeContent"],
  "host_permissions": [],
  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/"],
      "run_at": "document_idle",
      "js": ["js/contentScript.js"],
      "css": []
    }
  ],
  "options_page": "options.html"
}

配置文件的 action 指的是插件在启用后显示的图标、标题以及在点击之后出现的界面。在 API 里有个 chrome.action 就是作用在这个地方的一些功能。在 V2 版本里，action 又分为 page action 和 browser action，page 是在特定特面生效，而 browser 在所有的页面生效。
permissions 顾名思义就是在这个地方声明需要用到的权限，tabs 是用来获取选项卡信息，storage 的存储功能跟页面的 localStorage 相似，scripting 在当前网页里嵌入 script 脚本。
host_permsissions 在这里指明插件需要请求的后台网址，这样就不会受到跨域限制。在 V2 版本里，host_permissions 与 permissions 写在一起。
content_scirpts 在匹配到指定的网址后加载指定的 js 文件，可以与该页面交互，操作 Dom。

background 插件是事件驱动型的程序，通过监听事件以修改和增强网页浏览体验，例如监听新页面的加载，书签的变化，标签栏的变化。插件利用后台的 service worker 脚本文件一直在后台运行以监控浏览器的变化对不同的事件及时作出反应。在 V2 版本里，background 可以是一个 page 即 html，但在 V3 版本里 servcie_worker 只能是 js 文件。另外，service_worker 所指定的文件必须在根目录里，不能包含在其他目录中。
```
chrome.runtime.onMessage.addListener((message) => {
  if (message == 'notify') {
    registration.showNotification('', {
      body: '网络请求成功',
      icon: 'images/icon.png',
    })
  }
})
```
backgorund 可以使用插件所有的 API，写这篇文章的时候，在 background 里使用 chrome.notifications.create() 接口会出现问题，看到 stackflow 上讲这是目前 V3 版本存在的 bug，可以用上面的方法替换，V2 版本正常。
content scripts
```
chrome.runtime.sendMessage('notify')
document.querySelector('#s_kw_wrap input').value = 'hello motherfucker'
document.querySelector('#s_btn_wr input').click()
```
content scripts 能够获取网页的 Dom 信息与网页直接交互，因此可以加载 js 或者 css 文件对页面进行操作和修改。但是它只能直接获取部分的 API：runtime storage 和 i18n，注入脚本有两个方式，静态注入 (本例) 或者在代码里手动注入。
content scripts 在一个隔绝的环境里，与它所在的选项卡绑定在一起，因此打开几个匹配的页面就会运行几个执行文件，而这几个不同的执行文件之间由所在选项卡 Id 区分。因此想要向某个网页的 content script 发送信息时需要指定 tab Id，如 chrome.tabs.sendMessage(tabId,message)。
popup page 和 options page 分别是弹出界面和选项界面，和普通 html 网页相似，可以加入 js 和 css 文件。
常用的 API
- action 修改插件 icon 界面的图标、徽标、标题信息
- notification 发送通知
- runtime 通信
- scripting 向 web 嵌入脚本
- storage 相当于 localStorage
- tabs 关于选项卡信息，每个选项卡都有一个 id
- webRequest 网络请求

参考链接：

Chrome 插件官方文档