一、简述
我们所说的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”) 引入。
评论(0)