• 更改版本配置选项 manifest_version: 3
• 在 MV3 中新增了配置选项 host_permissions 以声明允许扩展程序访问哪些安全的域名
  提示

  You do not have to declare content script match patterns in host_permissions in order to inject content scripts. However, they are treated as host permissions requests by the Chrome Web Store review process.

  官方文档是这一段说明，指配置选项 host_permissions 是可选的，在其中可以声明网页的匹配规则/模式，以表示 content script 内容脚本支持植入哪些类型的网页。如果声明了该配置选项，就会在 Web Store 审核时将它们看作是该插件会作出的主机请求。

• 将选项 page_action 和 broser_action 进行必要的删减，合并为统一的 action 选项

• MV3 不允许执行从外部服务器（一般是 CDN）获取的脚本文件，需要更新这部分的代码逻辑，要将依赖的模块脚本预先整合到扩展程序内，如果你需要依赖外部服务器，可以有两个解决方案：
  • 将代码逻辑进行拆分，从原来的加载整包代码变成配置驱动，即将核心代码保留在扩展程序内，将配置文件外置在服务器中，在运行扩展程序时只需要从远端服务器获取相应的配置参数即可
  • Externalize logic with a remote service
• 植入内容脚本的方法更改为 chrome.scripting.executeScript()。类似地，植入 CSS 相关方法 insertCSS() 和 removeCSS() 也从 chrome.tabs API 更改为 chrome.scripting API
• 在 MV3 中执行的内容脚本代码，只能是以脚本文件（数组）files: ['content-script.js'] 或是函数 func: functionName（执行环境上下文并不同步传递植入，需要以参数 args 的形式传递）的形式呈现，而不能是任意的字符串形式
  background.js

  js

  // Manifest V3
  async function getCurrentTab() {/* ... */}
  let tab = await getCurrentTab();
  
  // file format
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content-script.js']
  });
  
  // function format
  function showAlert(givenName) {
    alert(`Hello, ${givenName}`);
  }
  
  let name = 'World';
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: showAlert,
    args: [name],
  });
  

后台脚本在 service workers 环境中执行

这是 MV3 一个很明显的非兼容式改变，会影响大部分 MV2 版本的扩展程序的升级，需要对原来后台页面 background page 的代码逻辑进行重构。

在迁移时，需要记住以下两点：

• Service workers 是基于事件-响应模式实现功能的（就像之前 MV2 的 event pages），它并不会常驻在后台，只有在相应的事件触发时才重新运行
• Service workers 环境中无法访问 DOM，因此无法使用相关的 API

如果要使用后台脚本，需要先在配置清单 manifest.json 的选项 background.service_work 中声明/注册需要运行的（单个）后台脚本

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

在后台脚本的逻辑代码中，需要在事件循环的第一轮中完成事件监听的注册，即将事件监听程序写在后台脚本最顶层的作用域中，而不应该内嵌在其他的逻辑代码中（因为 Service Workers 执行完代码会终止而不会长期驻留，当有事件需要分派时它才再次运行，如果未能在第一次事件轮询中注册监听器，这就无法响应事件）

chrome.storage.local.get(["badgeText"], ({ badgeText }) => {
  chrome.action.setBadgeText({ text: badgeText });
});

// Listener is registered ⚠️ on startup
chrome.action.onClicked.addListener(handleActionClick);

由于 Service workers 无法常驻后台，因此对于需要持久化的数据，可以使用 Storage API 将其保存，待 Service workers 重启时再从数据库读取。

// background.js
chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    chrome.storage.local.set({ name });
  }
});

chrome.action.onClicked.addListener((tab) => {
  chrome.storage.local.get(["name"], ({ name }) => {
    chrome.tabs.sendMessage(tab.id, { name });
  });
});

由于 Service workers 无法访问 DOM 和相关的 API，所以无法使用方法 window.setTimeout() 和 window.setInterval()，因为在 Service workers 环境中没有 window 这个变量对象。如果后台脚本需要使用调度实现功能，可以使用 Alarms API 代替

chrome.alarms.create({ delayInMinutes: 3 });

chrome.alarms.onAlarm.addListener(() => {
  chrome.action.setIcon({
    path: getRandomIconPath(),
  });
});

一些已经失效的 API 需要使用其他替代的方法来实现相应的功能

• 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

还有一些未在文档中明确声明的已失效的 API

• chrome.extension.sendMessage()
• chrome.extension.connect()
• chrome.extension.onConnect
• chrome.extension.onMessage