如何以 MV2/MV3 兼容的方式在内容脚本和 Service Worker 之间重用 javascript 函数？

Question

在 Chrome 扩展中，我有一个 javascript 函数，我需要从内容脚本和后台工作 JS 文件中重用该函数。

我如何为此组织脚本？

---

common.js到目前为止，我只设法在as中定义可重用函数

export function commonFunction()
{
  ...
}

...并将其导入background.js：

import { commonFunction } from './common.js';

但是，我找不到从内容脚本重用该函数的方法。理想情况下，我需要在 Manifest V2 和 V3 浏览器之间重复使用相同的代码。

---

此外，稳定的 Firefox（仍然是 MV2）即使在以下情况下也会因该设计而失败background.js：Uncaught SyntaxError: import declarations may only appear at top level of a module

该错误消息没有帮助，因为该import行确实出现在模块的顶层background.js。

---

---

更新 2：这是我可以为 Chrome MV3 制定的最短解决方案。仍然需要帮助使其更加简单/优雅：

async function commonImporter()
{
    return await import((chrome.runtime.getURL ||
      chrome.extension.getURL)("common.js"));
}

async function contentScriptFunctionUsingCommon()
{
    ...
    result = await (await commonImporter()).commonFunction();
    return result;
}

---

更新3：对于带有MV2的Firefox，我正在努力正确创建background.html：使用预先存在的background.js，它现在显示：

<script src="common.js" type="module"></script>
<script src="background.js" type="module"></script>

...而 common.js 和 background.js 也都列在background.scriptsof中manifest.json。但是，当我从...的对象中删除scripts数组时backgroundmanifest.json

  "background": {
    "page": "background.html",
    "persistent": false
    },

...Firefox 给出了我无法谷歌的错误：

协议错误（NS_BASE_STREAM_CLOSED）：组件返回失败代码：0x80470002（NS_BASE_STREAM_CLOSED）[nsIInputStream.available]来自：server0.conn0.webExtensionDescriptor304（resource://gre/modules/Extension.jsm:777:0）

Answer 1

对于内容脚本，内容脚本不是模块，但您可以动态导入模块。您可以像这样导入模块：

import((chrome.runtime.getURL || chrome.extension.getURL)('...'));

请注意，您需要将以这种方式导入的任何模块添加到您的web_accessible_resources.

对于 Firefox，消息的关键部分是“模块的”。直接指定后台脚本（没有后台页面）不会使它们作为模块运行。要解决此问题，请添加一个后台页面并通过类型为 的脚本标记运行后台脚本module：<script src="..." type="module"></script> 对于支持 MV3 的浏览器，您可以添加"type":"module"到background对象中。