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 文件内容，我不知道它是否会按原样工作，或者我是否需要注册服务人员？

//
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 中正确声明脚本即可。

1. 如果您希望扩展程序在 Chrome 92 或更早版本中运行，请将后台服务工作者脚本移至扩展程序根目录。这是您的 manifest.json 所在的位置。

2. 在 manifest.json 中只指定一个后台服务工作者脚本：

   "background": {
     "service_worker": "background.js"
   }
   

   这个文件可以使用同步内置的importScripts来加载里面的其他文件。

3. 修改您的代码，使其不使用像payload 这样的全局变量，方法是切换到chrome.storage.local。它仅支持与 JSON 兼容的类型（字符串、数字、布尔值、null 和仅由这些类型递归组成的数组/对象），因此如果您的数据无法序列化，您将不得不force the service worker to persist。