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

Question

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

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

我在互联网上搜索了几乎所有内容，但找不到任何解决方案。甚至这里的官方文档注册背景脚本也没有那么有用。任何帮助，将不胜感激。

Answer 1

首先，重要警告：

• 警告！由于架构限制，如果在编译（如未闭括号的语法错误）或初始化（例如访问未定义的变量）期间发生未处理的异常，则无法注册服务工作者，因此我们将代码包装在try/catch. 请注意，在 Chrome 93 之前，错误未显示在任何地方（这是一个错误），现在它显示在 chrome://extensions 页面中扩展卡上的错误列表中。

• 警告！在早于 93 的 Chrome 版本中，工作文件必须位于根路径中。

• 警告！不要导入像jQuery这样的基于 DOM 的库，因为 Service Worker 没有 DOM，所以没有document,XMLHttpRequest等等。

1.导入脚本

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

清单.json：

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

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

try {
  importScripts('/path/file.js', '/path2/file2.js' /*, and so on */);
} catch (e) {
  console.error(e);
}

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

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

通过添加"type": "module"到backgroundmanifest.json 中的声明来启用。

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

清单.json：

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

bg.js：

// module names must start with a path and end with an extension like .js or .mjs
import {foo} from '/path/file.js';
import './file2.js';

// each imported module should also use try/catch for their own init
try { init(); } catch (e) { console.error(e); }
function init() {
  // .........
}