google-chrome - chrome 扩展 mv3 - 模块化服务 worker js 文件

Question

我正在尝试将我的 chrome 扩展从 list 版本 2 迁移到 3。现在后台脚本已被 list v3 中的服务人员替换，我不能再使用 html 文件并引用 js脚本标签中的文件。
有什么方法可以将我的单个脚本文件导入到 service_worker.js文件？
我在互联网上搜索了几乎所有内容，但找不到任何解决方案。甚至这里的官方文档 Register background scripts没有那么有帮助。任何帮助，将不胜感激。

Answer 1

首先，重要的警告:

警告:Chrome 92 或更早版本 没有显示 service worker 发生错误 - 它是 bug ，在较新的 Chrome 中已修复，现在显示 chrome://extensions 中的错误页。这些旧版本的 Chrome 无法注册后台脚本，如果在其编译期间发生未处理的异常(语法错误，如未闭合的括号)或初始化(例如访问 undefined variable )，因此如果您仍然支持旧版 Chrome，您可能想要将代码包装在 try/catch 中.

警告:Chrome 92 或更早版本 要求工作文件位于根路径 (bug) 中。

警告! 不要导入基于 DOM 的库，例如 jQuery 或 axios 因为服务 worker 没有 DOM，所以没有 document , XMLHttpRequest ， 等等。使用fetch直接或查找/编写基于 fetch 的库并且不使用 window或 document .

1. importScripts
这个内置函数同步获取并运行脚本，以便它们的全局变量和函数立即可用。
list .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 block 中单独导入此文件。
不要忘记指定文件扩展名，通常是 .js或 .mjs .
1b。监听器中的 importScripts
根据规范，我们必须使用服务人员的 install事件并导入我们希望稍后能够在异步事件中导入的所有脚本(从技术上讲，是 JS 事件循环初始任务之外的任何内容)。此处理程序仅在安装或更新扩展或重新加载未打包的扩展时调用(因为它等于更新)。
这在 MV3 中很复杂，因为服务 worker 是为 Web 设计的，远程脚本可能无法离线使用。希望它会在 crbug/1198822 中得到简化.
另见: webpack-target-webextension WebPack 插件。

const importedScripts = [];

function tryImport(...fileNames) {
  try {
    const toRun = new Set(fileNames.filter(f => !importedScripts.includes(f)));
    if (toRun.length) {
      importedScripts.push(...toRun);
      importScripts(...toRun);
    }
    return true;
  } catch (e) {
    console.error(e);
  }
}

self.oninstall = () => {
  // The imported script shouldn't do anything, but only declare a global function
  // (someComplexScriptAsyncHandler) or use an analog of require() to register a module
  tryImport('/js/some-complex-script.js');
};

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'somethingComplex') {
    if (tryImport('/js/some-complex-script.js')) {
      // calling a global function from some-complex-script.js
      someComplexScriptAsyncHandler(msg, sender, sendResponse);
      return true;
    }
  }
});

2. Chrome 92 及更新版本中的 ES 模块
通过添加 "type": "module" 启用致 background 的声明在 manifest.json 中。

静态 import可以使用语句。

动态import()尚未实现 (crbug/1198822)。

list .json:

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

bg.js:
模块名称必须以路径开头并以 .js 或 .mjs 之类的扩展名结尾

import {foo} from '/path/file.js';
import './file2.js';

如本答案开头所述，如果您仍然以 Chrome 92 或更早版本为目标，在注册期间不会显示错误，则每个导入的模块还应在可能出现异常的情况下使用 try/catch。