十分钟带你入门Chrome插件开发

一、简述

我们所说的chrome插件一般都是指chrome扩展程序（Chrome Extension）。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等。

二、chrome插件的能力

除了支持传统的一切 web API、JavaScript API 以外，chrome插件额外支持以下API（chrome.xxx）：

bullet 浏览器窗口（chrome.window）
tab标签（chrome.tabs）
书签（chrome.bookmark）
历史（chrome.history）
下载（chrome.download）
网络请求（chrome.webRequest）
自定义右键菜单（chrome.contextMenus）
开发者工具扩展（chrome.devtool）
插件管理（chrome.extension）

三、chrome插件的组成

主要由以下部分组成：

manifest.json （配置文件，目前最新是v3版本）
popup (点击插件图标弹出的页面)
content script (插入到目标页面中执行的JS)
background script (在浏览器后台Service Workers中运行的程序)
options (选项页面，可有可无)

四、manifest v3的主要特性

Service Workers取代background pages，使用Service Workers，可对资源进行缓存，从而实现离线访问。
网络请求调整，新增了一个declarativeNetRequestAPI，允许插件修改及阻断网络请求。
远程资源访问限制，禁止访问外部的JavaScript及Wasm文件，图片、音视频文件不受影响。
Promises使用，可以愉快地使用promise了，包括async/await。
manifest文件的部分配置和chrome API做了部分调整。

五、基于manifest v3的chrome插件Demo展示

如需获取demo项目源码，请到我的github上自行clone，顺便给咱点个Star，非常感谢。
https://github.com/hepengwei/chrome-extension-basic-demo

六、chrome插件开发本地调试

调试popup.html页面：右键点击浏览器右上角插件图标，然后选择点击"审查弹出内容"。
调试background.html或background.js：在浏览器的扩展程序管理页面找到自己加载的扩展程序，然后点击"Service Worker"（MV2则是"背景页"）。
调试content_scripts.js：在注入的页面按F12，和正常页面一样调试。
调试options.html页面：右键点击浏览器右上角插件图标，然后选择点击"选项"，打开插件的选项页，然后按F12，和正常页面一样调试。

七、chrome插件开发注意事项总结

manifest.json必须放在插件项目的根目录，里面包含了插件的各种配置信息，其中也包括了popup、content script、background script等路径。
不支持使用SVG格式的图片。
在MV3中，由于Service Workers的机制，background页中不支持使用XMLHttpRequest，建议使用fetch()。
不允许在html文件中写js代码，只能通过script标签导入js文件的方式，导入文件也不能使用项目外部的文件，比如不能使用CDN上的文件
不要直接在元素中给onclick属性一个函数调用，例如testB，即使有定义onSave方法，也会报错onSave is not defined，要给元素添加事件要使用JS动态添加，例如$(“#save”).click(onSave)。
内容脚本和网站想要访问的所有资源都必须在web_accessible_resources属性下声明。
popup可以直接调用background中的JS方法，也可以直接访问background的DOM。
在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。
插件图标在未命中popup的URL匹配规则的页面时没有变灰，这是chrome自身的一个bug（可以关注bug论坛：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）。
chrome.tabs.connect或chrome.tabs.sendMessage不能用于与选项页面通信，选项页面可以使用chrome.runtime.connect和chrome.runtime.sendMessage与background页通信。
很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正是由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。
关于content script的注意事项

content script文件中可以获取web页面的DOM并修改，content script和原始页面共享DOM，但是不共享JS，JS是相互隔离的，可以通过window.postMessage和window.addEventListener来实现二者消息通讯。
不能访问background或popup中JS定义的变量或方法。
不能访问web页面或其他content script中定义的变量或方法。
不能发送跨域请求。
content script文件中只能使用下面列出的API:
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage

八、国际化配置

在项目根目录下创建名为 “_locales” 的文件夹，在该文件夹中加入如下文件夹及文件

_locales/en/messages.json
_locales/zh_CN/messages.json

在每种语言的messages.json中添加相同的属性变量，配置如下：

{
    "tooltip": {
       "message": "这里是字段显示的内容"
    }
}

使用时
在manifest.json或CSS文件中通过 __MSG_tooltip__ 引入，

{
    "action": {
        "default_title": "__MSG_tooltip__"，
    },
    "default_locale": "zh_CN",
}

在JS文件中通过 const tooltip = chrome.i18n.getMessage(“tooltip”) 引入。