chrome 扩展 mv3 - 模块化服务工作者 js 文件

Question

我正在尝试将我的 chrome 扩展程序从清单版本 2 迁移到 3。现在后台脚本已被清单 v3 中的服务工作者替换，我无法再使用 html 文件并在脚本标签中引用 js 文件.

有什么方法可以将我的单个脚本文件导入到 service_worker.js 文件中吗？

我在互联网上搜索了几乎所有内容，但找不到任何解决方案。即使这里的官方文档 Register background scripts 也没有那么有用。任何帮助将不胜感激。

Answer 1

首先，重要警告：

• 警告！由于 bug in Chrome，如果在编译期间发生未处理的异常（语法错误，如未关闭的括号）或初始化（例如访问一个未定义的变量），所以我们将把代码包装在 try/catch 中。

• 警告！工作文件必须位于根路径 in Chrome versions older than 93 中。

• 警告！不要导入像 jQuery 这样的基于 DOM 的库，因为 Service Worker 没有 DOM，所以没有 document，{ {1}}，依此类推。

1. importScripts

这个内置函数同步获取和运行脚本，以便它们的全局变量和函数立即可用。它只能在 worker 初始化时在第一个 JS 事件循环任务中使用，即您不能稍后从事件侦听器 (crbug) 中调用它。

manifest.json：

XMLHttpRequest

bg-loader.js 只是单独文件中实际代码的 try/catch 包装器：

"background": { "service_worker": "bg-loader.js" },

如果某个文件抛出错误，则不会导入后续文件。如果您想忽略此类错误并继续导入，请在其自己的 try-catch 块中单独导入此文件。

2. Chrome 92 及更新版本中的 ES 模块

通过将 try { importScripts('/path/file.js', '/path2/file2.js' /*, and so on */); } catch (e) { console.error(e); } 添加到 manifest.json 中的 "type": "module" 声明来启用。

• 可以使用静态 background 语句。
• 动态 import 尚未实现 (crbug)。

manifest.json：

import()

bg.js：

"background": { "service_worker": "bg.js", "type": "module" },
"minimum_chrome_version": 92,