收款定制开发Chrome扩展manifest V3变化、升级迁移指南

前言:

Google Chrome收款定制开发商店目前已经停止Manifest V2收款定制开发版本的扩展程序的上架,已上架的V2收款定制开发扩展仍可提交。收款定制开发虽然谷歌说2023年1收款定制开发月才将彻底关停V2,收款定制开发但目前已有部分开发者收到邮件要求一个月内升级v3并提交,否则会被下架处理。

所以需要尽快升级,一起来看下manifest V3做了哪些改动吧。

1.Service worker替换backgroud page/js

  1. 在 manifest.json 中替换background.pagebackground.scripts替换为service_worker​​​​​​​
    1. "background": {
    2. "service_worker": "js/background.js"
    3. },
  2. background.persistent从 manifest.json 中删除。 

  3. 使用Service worker编写代码。只能注册事件侦听器,不能持续运行。 举个例子:

  1. // 错误用法
  2. const count = 1
  3. chrome.runtime.onMessage.addListener(({ type, name }) => {
  4. if (type === "add-count") {
  5. count++;
  6. }
  7. });
  8. // 迁移方案
  9. chrome.runtime.onMessage.addListener(({ type, name }) => {
  10. const count = await chrome.storage.local.get(['count']);
  11. if (type === "add-count") {
  12. count++;
  13. chrome.storage.local.set({'count': count})
  14. }
  15. });

   注意:执行环境中是不可以使用localStorage、window变量的

2.使用新的declarativeNetRequest来修改请求  

      在manifestv2扩展中,如果想要修改请求的headers我们会这样做:

  1. chrome.webRequest.onBeforeSendHeaders.addListener(
  2. function(info) {
  3. const headers = info.requestHeaders;
  4. for (var i = headers.length - 1; i >= 0; --i) {
  5. var header = headers[i];
  6. var isRemoveKey = header.name.toLowerCase() === 'foo';
  7. headers.splice(i, 1); // Remove header
  8. }
  9. return { requestHeaders: headers };
  10. },
  11. {
  12. urls: ['https://a.b.net/api/*'],
  13. },
  14. ['blocking', 'requestHeaders', chrome.webRequest.OnBeforeSendHeadersOptions.EXTRA_HEADERS].filter(Boolean)
  15. );

      在manifest V3中,要实现以上功能迁移方案为 declarativeNetRequest API。通过指定声明性规则来阻止或修改网络请求。这使扩展程序可以修改网络请求,而无需拦截它们并查看其内容,从而提供更多隐私。 

      首先需要在manifest中添加对应权限和指定静态规则集,

  1. {
  2. "name": "My extension",
  3. ...
  4. "declarative_net_request" : {
  5. "rule_resources" : [
  6. {
  7. "id": "ruleset_1",
  8. "enabled": true,
  9. "path": "rules_1.json"
  10. }
  11. ]
  12. },
  13. "permissions": [
  14. "declarativeNetRequest",
  15. "declarativeNetRequestFeedback",
  16. ...
  17. ],
  18. ...
  19. }

    然后在目录下新建rules_1.json, 我们还是以修改Headers为例

  1. [
  2. {
  3. "id": 1,
  4. "priority": 1,
  5. "condition": {
  6. "regexFilter": "https://XXX.XXX.XXX/api/*",
  7. "resourceTypes": [
  8. "xmlhttprequest"
  9. ]
  10. },
  11. "action": {
  12. "type": "modifyHeaders",
  13. "requestHeaders": [
  14. {
  15. "header": "h1",
  16. "operation": "set",
  17. "value": "v4"
  18. },
  19. {
  20. "header": "foo",
  21. "operation": "remove"
  22. }
  23. ]
  24. }
  25. }
  26. ]

 与webRequest API的比较:

  1. ​使用 declarativeNetRequest API 阻止或修改请求一般不需要主机declarativeNetRequest权限
  2. 因为请求不会被扩展进程拦截,所以 declarativeNetRequest 不需要扩展有后台页面,从而减少内存消耗。
  3. ​​​​​​ 在决定请求是被阻止还是重定向时,declarativeNetRequest API 的优先级高于 webRequest API,因为它允许同步拦截。
  4. webRequest API 更灵活,因为允许以编程方式进行修改。

  API更多细节请见:

3.不再允许执行远程代码,只可以执行插件包内的脚本/CSS

    Manifest V3 的一个关键安全改进是扩展不能加载远程代码,如 JavaScript 或 Wasm 文件。比如:cdn上的脚本、从服务器获取的 JavaScript 文件、 从后端获取的。 具体来说,所有脚本都必须包含在扩展包中。

  在 Manifest V2 中,可以使用的属性和属性来执行任意代码字符串。Manifest V3 不允许任意代码执行。为了适应这种需求,扩展开发者可以使用该方法注入静态文件或函数 (注意: 没有code参数了)

   使用方式:

  1. {
  2. "manifest_version": 3,
  3. "permissions": ["scripting"],
  4. ...
  5. }
  1. // Manifest V2
  2. // background.js
  3. ...
  4. chrome.tabs.executeScript({
  5. file: 'content-script.js'
  6. });
  7. ...
  8. // content-script.js
  9. ...
  10. alert('File test alert');
  11. ...
  12. // Manifest V3
  13. // background.js
  14. ...
  15. async function getCurrentTab() {/* ... */}
  16. let tab = await getCurrentTab();
  17. chrome.scripting.executeScript({
  18. target: {tabId: tab.id},
  19. files: ['content-script.js']
  20. });
  21. ...
  22. // content-script.js
  23. ...
  24. alert('File test alert');
  25. ...

   这个修改说实话影响太大了,直接影响了像是这种扩展的核心功能。暂不清楚谷歌到时候会不会放宽一些限制,目前来看不太现实

4.其他修改点​​​​​​​​​​​​​​

  1. 如果有主机权限,需要将主机权限移动到host_permissions manifest.json 中的字段中。
    1. "host_permissions": [
    2. "<all_urls>"
    3. ],
  2. browser_action和page_action 统一为了action字段,同样的chrome.browserAction还是chrome.pageAction统一为了chrome.action API

    1. "action": {
    2. "default_popup": "pages/popup.html",
    3. "default_icon": "icons/icon-logo.png",
    4. "default_title": "Popup"
    5. },

5.彻底移除的API

  • chrome.extension.getExtensionTabs()
  • chrome.extension.getURL()
  • chrome.extension.lastError
  • chrome.extension.onRequest
  • chrome.extension.onRequestExternal
  • chrome.extension.sendRequest()
  • chrome.tabs.getAllInWindow()
  • chrome.tabs.getSelected()
  • chrome.tabs.onActiveChanged
  • chrome.tabs.onHighlightChanged
  • chrome.tabs.onSelectionChanged
  • chrome.tabs.sendRequest()
  • chrome.tabs.Tab.selected

   

参考地址:

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发