如何在 Firefox WebExtension 的后台脚本中 import/use 外部 JavaScript 文件？

Question

在我的 WebExtension 的后台脚本中，我想使用来自另一个 JavaScript 文件的 functions/constants。但是听起来很简单，我无法让它工作。

我使用以下四个文件作为我的问题的最小示例：

manifest.json:

{
    "manifest_version": 2,
    "name": "MinimalCompleteReproducibleExample",
    "version": "0.0.0.0",

    "background": {
        "page": "background.html"
    }
}

它基本上只是加载 background.html 作为背景 script/page。

background.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="module" src="/mylib.js"></script>
        <script src="background.js"></script>
    </body>
</html>

它加载“外部”JavaScript 文件 mylib.js，其中包含我要重用的 functions/constants 和实际后台脚本 background.js.

mylib.js:
```
export const foo = 42;
```
它只是导出常量 foo。
background.js:
```
console.log(foo);
```
它尝试使用“外部”JavaScript 文件的内容 mylib.js。

当我加载此扩展程序时，我在调试器中收到以下错误消息：

Uncaught ReferenceError: foo is not defined

这似乎表明 mylib.js 的内容不可用。

在此之前，我确实直接在manifest.json中加载了background.js，并在background.js中添加了以下行：

import { foo } from "/mylib.js";

但这在 WebExtensions 中似乎是不允许的，也不起作用：

Uncaught SyntaxError: import declarations may only appear at top level of a module

有人能告诉我，如何在后台脚本中创建另一个 JavaScript 文件吗？

Answer 1

帮我解决了。需要进行两项更改：

在 background.html

type="module"

<script src="background.js"></script>

将 import { foo } from "/mylib.js"; 添加到 background.js

background.html中的<script type="module" src="/mylib.js"></script>行可以省略。

完整的工作示例：

manifest.json:

{
    "manifest_version": 2,
    "name": "MinimalCompleteReproducibleExample",
    "version": "0.0.0.0",

    "background": {
        "page": "background.html"
    }
}

background.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="module" src="/background.js"></script>
    </body>
</html>

mylib.js:
```
export const foo = 42;
```

background.js:

import { foo } from "/mylib.js";
console.log(foo);

如何在 Firefox WebExtension 的后台脚本中 import/use 外部 JavaScript 文件？

How to import/use an external JavaScript file in the background script of a Firefox WebExtension?

javascript

firefox-addon-webextensions