Chrome 扩展 - 从清单 v2 迁移到 v3

Question

我需要将一些 chrome 扩展迁移到清单 v3。我有一个使用后台脚本拦截一些 ajax 请求以获取相关视频文件的扩展。我已经开始修改清单文件，但不确定如何处理清单 background 部分及其相关的 JavaScript 文件。

目前我已经这样修改了清单：

{
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",
  "default_locale": "en",
  "permissions": [
    "tabs",
    "activeTab",
    "webRequest"
  ],
  "host_permissions": [
    "https://*"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "web_accessible_resources": [{
    "resources": ["room.html"]
  }],
  "action": {},
  "version": "2.1.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' ; object-src 'self'"
  }
}

我不清楚如何修改背景部分，如果我知道我需要删除 persistent 并将 scripts 替换为 service_workers ，这是一个正确的字符串？

对于 background.js 文件内容，我不知道它是否可以按原样工作，或者我是否需要注册一个 service worker？

//
let payload = {}

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlMatches: 'www.mywebsite.com/video/*', schemes: ["https"] },
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

//
chrome.runtime.onInstalled.addListener( () => {
  chrome.tabs.create({
    url: browser.runtime.getURL('instructions.html')
  })
})

//
chrome.runtime.onUpdateAvailable.addListener( () => {
  chrome.runtime.reload()
})

//
chrome.pageAction.onClicked.addListener( () => {
  chrome.windows.create({
    url: browser.runtime.getURL('popup.html'),
    width: 500,
    height: 295,
    type: 'popup'
  })
})

//
chrome.webRequest.onCompleted.addListener( (details) => {
  payload.url = details.url
},{
  urls: ["https://*.akamaihd.net/*/index_0_av.m3u8*"],
  types: ["xmlhttprequest"]
},["responseHeaders"])

chrome.webRequest.onCompleted.addListener( (details) => {
  payload.streamInfo = details.url
},{
  urls: ["https://*.mywebsite.com/video/*/*.json*"],
  types: ["xmlhttprequest"]
},["responseHeaders"])

// 
chrome.runtime.onMessage.addListener( (message) => {
  console.log(message)
  if( message.action === 'openPopup' ){
    chrome.windows.create({
      url: browser.runtime.getURL('popup.html'),
      width: 500,
      height: 295,
      type: 'popup'
    })
  }
  if( message.status === 'ready' ){
    chrome.runtime.sendMessage( payload )
  }
  else if( message.status === 'refresh' ){
    chrome.runtime.sendMessage( payload )
  }
})

有人能帮帮我吗？

Answer 1

无需显式注册任何内容。
您只需要在 manifest.json 中正确声明脚本即可。

如果您希望 Chrome 92 或更早版本中的运行扩展，请将后台服务工作者脚本移动到扩展根目录中。这是您的 manifest.json 所在的位置。
在 manifest.json:
中仅指定一个后台服务工作者脚本
```
"background": {
  "service_worker": "background.js"
}
```
此文件可以使用同步内置 importScripts.
加载其他文件。
修改代码，使其不使用全局变量，如 payload，切换为 chrome.storage.local。它仅支持 JSON 兼容类型（字符串、数字、布尔值、null 和 arrays/objects 递归地仅包含这些类型），因此如果您的数据无法序列化，您将不得不.

Chrome 扩展 - 从清单 v2 迁移到 v3

Chrome extension - migrate from manifest v2 to v3

javascript

google-chrome

manifest

google-chrome-extension