CHROME扩展开发文档之·MV2到MV3的background.js迁移文档(从后台页面迁移到服务人员)

从后台页面迁移到服务人员

发表于2020 年 7 月 29 日，星期三 •更新日期2020 年 10 月 6 日，星期二

自推出以来，后台页面一直是 Chrome 扩展平台的基本组件。简而言之，后台页面为扩展作者提供了一个独立于任何其他窗口或选项卡的环境。这允许扩展观察并采取行动以响应事件。

在 Manifest V3 中，Chrome 扩展平台从后台页面转移到服务工作者。正如Service Workers: an Introduction中所述，“Service Worker 是您的浏览器在后台运行的脚本，与网页分开，为不需要网页或用户交互的功能打开了大门。” 这项技术可以实现类似原生的体验，例如推送通知、丰富的离线支持、后台同步和开放网络上的“添加到主屏幕”。Service Worker 的部分灵感来自 Chrome 扩展中的背景页面，但他们通过针对 Web 规模对其进行调整来迭代和改进此模型。

迁移到这个新的背景上下文时，您需要牢记两个主要事项。首先，服务工作者在不使用时终止，并在需要时重新启动（类似于事件页面）。其次，服务工作者无权访问 DOM。我们将分别在下面的Thinking with Events和Working with Workers部分探讨如何适应这些挑战。

更新您的清单

扩展在该字段下的清单中注册其后台服务人员。"background"此字段使用"service_worker"指定单个 JavaScript 文件的键。在 Manifest V2 中，该字段被调用"scripts"并允许多个脚本。

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

在使用服务工作人员参考页面管理事件中了解更多信息。

用事件思考

与事件页面一样，服务工作者是一种特殊的执行环境，它开始处理他们感兴趣的事件，并在不再需要时终止。以下部分提供了在短暂的事件执行上下文中编写代码的建议。

Manifest V2 页面Migrate to Event Driven Background Scripts介绍了其中几个概念。

顶级事件监听器

为了让 Chrome 成功地将事件分派给适当的侦听器，扩展程序必须在事件循环的第一轮中注册侦听器。实现这一点最直接的方法是将事件注册移动到服务工作者脚本的顶层。

下面的代码片段显示了现有扩展如何在持久背景页面中初始化其浏览器操作侦听器。

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

  // Listener is registered asynchronously
  // This is NOT guaranteed to work in Manifest V3/service workers! Don't do this!
  chrome.action.onClicked.addListener(handleActionClick);
});

虽然这种方法在持久后台页面中有效，但由于Storage API的异步特性，它不能保证在服务工作者中有效。当服务工作者终止时，与之关联的事件侦听器也会终止。而且由于事件是在服务工作者启动时分派的，异步注册事件会导致它们被丢弃，因为在它第一次启动时没有注册监听器。

要解决此问题，请将事件侦听器注册移动到脚本的顶层。这确保 Chrome 能够立即找到并调用您的操作的点击处理程序，即使您的扩展程序尚未完成其异步启动逻辑的执行。

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

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

Manifest V3 整合chrome.browserAction到chrome.pageAction一个单一的chrome.actionAPI 中。

使用存储 API 保持状态

采用 Service Worker 时要习惯的主要事情之一是它们是短暂的执行环境。在更实际的情况下，扩展的服务工作者将在用户的浏览器会话中启动、执行一些工作并反复终止。这对习惯于长期存在的后台页面的扩展开发人员提出了挑战，因为应用程序数据不能立即在全局变量中可用。

以下 Manifest V2 示例从内容脚本中接收名称并将其保留以供以后使用：

// background.js

// Don't do this! The service worker will be created and destroyed over the lifetime of your
// extension, and this variable will be reset.
let savedName = undefined;

chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    savedName = name;
  }
});

chrome.browserAction.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, { name: savedName });
});

如果我们将此代码直接移植到 Manifest V3，需要服务工作者，则代码可能会在设置名称和用户单击浏览器操作之间终止。如果发生这种情况，集合名称将丢失，并且savedName将再次变为undefined.

我们可以通过将存储 API视为我们的事实来源来修复此错误：

// 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 });
  });
});

从计时器到闹钟

setTimeoutWeb 开发人员使用orsetInterval方法执行延迟或定期操作是很常见的。但是，这些 API 在服务工作人员中可能会失败，因为调度程序将在服务工作人员终止时取消计时器。

// background.js

// This worked in Manifest V2.
const TIMEOUT = 3 * 60 * 1000; // 3 minutes in milliseconds
setTimeout(() => {
  chrome.action.setIcon({
    path: getRandomIconPath(),
  });
}, TIMEOUT);

相反，我们可以使用警报alarm API。与其他侦听器一样，警报侦听器应注册在脚本的顶层。

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

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

与工人一起工作

Service Worker是一种特殊的Web Worker，它与大多数 Web 开发人员习惯使用的网页有很大不同。在典型的网页（或扩展背景页面）上，JavaScript 的全局执行上下文类型为Window. 此对象公开了 Web 开发人员习惯使用的功能：window、元素、IndexedDB、、cookie等localStorage。

Service Worker的全局范围受到了明显的限制，并且没有很多这些功能。最值得注意的是，服务工作者无权访问 DOM。工人不再提供XMLHttpRequest，而是支持更现代的fetch()。

以下部分介绍了一些受迁移到服务人员影响的主要用例以及有关如何适应的建议。

使用 XML/HTML 解析和遍历

由于 service worker 无权访问 DOM，因此扩展的 service worker 无法访问DOMParserAPI 或创建解析和遍历文档。扩展开发人员有两种方法可以解决此限制：创建新选项卡或使用库。您选择哪个取决于您的用例。

诸如此类的库jsdom可用于模拟典型的浏览器窗口环境，包括 DOMParser、事件传播和其他功能，如requestAnimationFrame. 更轻量级的替代方案，例如undom提供足够多的 DOM 来支持许多前端框架和库。

需要完整本机浏览器环境的扩展可以使用服务工作者内部的chrome.windows.create()和chrome.tabs.create()API 来创建真正的浏览器窗口。此外，扩展的弹出窗口仍然提供完整的（临时）窗口环境。

音频/视频播放和捕获

目前无法直接在 service worker 中播放或捕获媒体。为了让 Manifest V3 扩展能够利用 Web 的媒体播放和捕获功能，扩展需要使用chrome.windows.create()和chrome.tabs.create(). 创建后，扩展程序可以使用消息传递在播放文档和服务工作者之间进行协调。

渲染到画布

在某些情况下，开发人员使用后台页面来呈现内容以在其他上下文中显示或创建和缓存资产。虽然服务工作者无法访问 DOM，因此无法使用元素，但服务工作者确实可以访问OffscreenCanvas API

// background.js
// for Manifest V2 background pages
function buildCanvas(width, height) {
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  return canvas;
}

在上面的块中，我们正在构建一个画布元素。要迁移到屏幕外画布，请替换document.createElement(‘canvas’)为new OffscreenCanvas(width, height).

// background.js
// for Manifest V3 service workers
function buildCanvas(width, height) {
  const canvas = new OffscreenCanvas(width, height);
  return canvas;
}

有关使用 的其他指导OffscreenCanvas，请参阅OffscreenCanvas - 使用 Web Worker 加快 Canvas 操作。

最近更新时间：2020 年 10 月 6 日，星期二 改进文章