如何在Manifest V3版Chrome扩展中搭配使用Google Workbox？

核心结论 #

Chrome Manifest V3 规范中的后台Service Worker是完全符合W3C标准的原生Service Worker，并非阉割版本，仅额外扩展了Chrome扩展专属的API能力，基础的Service Worker特性完整支持，完全可以正常运行Workbox的核心功能。

报错根因 #

你抛出Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')错误的核心原因是错误使用了Workbox的页面侧API：
new Workbox()是workbox-window包提供的API，仅适用于普通Web页面的主进程上下文调用，作用是注册和管理与当前页面关联的Service Worker，依赖浏览器window全局对象。而扩展的后台Service Worker运行在独立的Service Worker全局上下文，不存在window对象，调用该API自然会找不到目标对象抛出错误。

正确使用方式 #

Workbox的核心缓存、路由等能力直接在后台Service Worker脚本内调用即可，无需用new Workbox()加载脚本：

1. 首先在manifest.json中正常配置后台Service Worker入口：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  // 其他扩展配置项
}

2. 在你的background.js脚本中导入Workbox后直接调用相关API，原有扩展后台逻辑可照常编写不冲突：

// 导入本地下载的Workbox预构建脚本，也可通过打包工具直接导入Workbox相关模块
importScripts('./workbox-sw.js');

// 配置Workbox运行参数
workbox.setConfig({
  debug: false
});

// 按需调用Workbox能力，示例：缓存所有JS资源请求
workbox.routing.registerRoute(
  ({request}) => request.destination === 'script',
  new workbox.strategies.CacheFirst()
);

// 原有扩展后台逻辑可直接放在同一文件中，互不影响
chrome.runtime.onInstalled.addListener(() => {
  console.log('扩展初始化完成')
});

内容的提问来源于stack exchange，提问作者AntonOfTheWoods