使用来自 Web 扩展的 content_scripts 的 ES 模块（附加组件）

Question

由于最新的 Firefox 支持没有标志的 ES 模块以及 Chrome，我想使用import/export作为我的网络扩展（附加组件）。只需使用<script type="module">.

你如何让模块在内容脚本中工作？

我尝试并看到以下内容：

（1）只写import在acript在声明content_scripts.js中manifest.json

import Foo from './foo.js';

(Chrome) 未捕获的语法错误：意外的标识符

Firefox 无法正常工作。

(2) 跑通 tabs.executeScript()

browser.tabs.executeScript(undefined, {
  file: "foo.js",
});

(Chrome) 未捕获的语法错误：意外的标识符

(Firefox) 错误：导入声明只能出现在模块的顶层

(3) 插入一个用创建的脚本元素 type="module"

const el = document.createElement("script");
el.src = browser.extension.getURL("foo.js");
el.type = "module";
document.body.appendChild(el);

(Chrome) Uncaught (in promise) ReferenceError: browser is not defined

(Firefox) ReferenceError: 浏览器未定义

你有什么其他想法吗？

Answer 1

一种简单的解决方案是使用一些捆绑程序来捆绑您的内容脚本。
这听起来可能很复杂，但是使用像Rollup这样的捆绑器，您可以使用超级简单的“rollup.config.js”文件轻松完成此操作：

export default {
  input: 'content_script.js',
  output: {
    file: 'bundle_content_script.js',
    format: 'iife',
  },
};

Rollup 只会用实际代码替换您的导入，因此没有样板并且代码仍然可读。

您可能还想阅读：

使用捆绑器还会加快加载时间，对我来说它从 335 毫秒下降到 63 毫秒（但我现在有 100 多个模块）。