背景：
- 2023.1月：chrome商店停止接收现有的Manifest v2版本更新,市面上的大多数v2插件基本停止运行。
- 2024.6月：Manifest v2版本扩展全部下架。
官网：
developer.chrome.com/docs/extens…
改动点：
- 以下列举了Manifest v2到Manifest v3的主要改动点，遵守以下改动点即可快速的完成V2到v3的插件转型。
清单改动：
1.版本号修改menifest v3
"manifest_version": 3
2.background替换成service worker
//v3后台页写法
"background": {
"service_worker": "js/background.js"
},
3.主机权限请求和API权限请求分离
//API权限
"permissions": [
"activeTab",
"storage"
],
//主机权限
"host_permissions":[
"*://*.facebook.com/*",
"*://*.twitter.com/*",
"*://*.pinterest.com/*",
"*://*.reddit.com/*"
],
4.插件图标API统一
- 把browser_action对象和page_action对象合并成为了一个action对象
"action": {
"default_popup": "popup.html",
"default_title": "__MSG_extName__",
"default_icon": {
"128": "icons/logo.png"
}
}
5.content_security_policy(csp)参数填写格式改动和权限改动(对vue开发人员影响较大)
- 清单格式改动，如下图：
- 禁止了一些CSP选项的更改，主要的影响是禁止了内联JavaScript和动态代码的执行，导致vue-cli的开发环境无法进行热更新调试，插件会报以下错误。
解决方案：
- 若使用vue，则需要在正式包中的manifest.json文件中删除content_security_policy参数，但是测试包无法在浏览器中正常使用。
- 整体插件模板采用vite+vue3的插件开发模板，具体参考
6.清单声明web_accessible_resourses
- 该参数声明了允许被web网站访问的插件中的资源。
- v2版本中只需填写哪些文件允许被web访问，v3版本中所需填写参数更加细致，需要确定具体某个对象允许被某个url访问。
API改动：
1.废弃API：
若插件中使用到了以下API，在V3版本中需要进行适当的修改。
- chrome.extension.sendRequest()
- chrome.extension.onRequest
- chrome.extension.onRequestExternal
- chrome.extension.lastError
- chrome.extension.getURL()
- chrome.extension.getExtensionTabs()
- chrome.tabs.Tab.selected
- chrome.tabs.sendRequest()
- chrome.tabs.getSelected()
- chrome.tabs.getAllInWindow()
- chrome.tabs.onSelectionChanged
- chrome.tabs.onActiveChanged
- chrome.tabs.onHighlightChanged
2.长连接和短连接通讯API废弃
废弃以下API：
- chrome.extension.sendMessage()
- chrome.extension.connect()
- chrome.extension.onConnect
- chrome.extension.onMessage
快速查找： chrome.extension.sendRequest|chrome.extension.onRequest|chrome.extension.onRequestExternal|chrome.extension.lastError|chrome.extension.getURL|chrome.extension.getExtensionTabs|chrome.tabs.Tab.selected|chrome.tabs.sendRequest|chrome.tabs.getSelected|chrome.tabs.getAllInWindow|chrome.tabs.onSelectionChanged|chrome.tabs.onActiveChanged|chrome.tabs.onHighlightChanged|chrome.extension.sendMessage|chrome.extension.connect|chrome.extension.onConnect|chrome.extension.onMessage
替代方案：
- chrome.runtime.sendMessage //发消息
- chrome.runtime.onMessage.addListener // 接收消息
//主动给后台发送消息
chrome.runtime.sendMessage({
action: "videoDownload"
},function(res){
})
);
//后台接收消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (typeof msg === "object" && "action" in msg) {
switch (msg.action) {
// 保存vod链接
case "":
return
}
}
}
3.chrome.tabs.executeScript动态注入代码
- 原有API废弃，改成chrome.scripting.executeScript
- 相比较v2的写法，v3的写法中需要新增一个tabId属性，因此需要通过getCurrentTab API去获取需要注入的tabId，如以下代码
- v2写法：
// background.js
chrome.tabs.executeScript({
file: 'content-script.js'
});
- v3写法：
// background.js
//首先获取tabId
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();
//调用新的Api注入js文件
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['content-script.js']
});
4.修改网络请求 采用declarativeNetRequest替代webRequest
Service worker特性
- v3版本采用service worker代替之前的background页，并有以下几点重要改动：
- service worker在闲余时间保持休眠状态，只有被使用的时候才运行，几秒后又会自动关闭。
- service worker独立于页面，无法使用window对象，无权访问dom，擅自调用会报错。
- service worker不再支持HMLHttpRequest API，因此由XMLHttpRequest方法封装的库都不支持使用，但是仍然支持fetch API,因此调用接口的方式统一改成fetch。
- 在service worker运行的时候，在popup页控制台也能看到service worker的控制台打印内容，但并非是执行service worker的代码。
