正如已经提到的，对于后台脚本，使用background.page和使用<script type="module">来踢你的 JavaScript是个好主意。

问题是content script，注入<script>带有type属性的标签可以是一个解决方案。

除了注入脚本标签之外，另一种方法是使用dynamic import函数。通过这种方法，您不需要松散chromemodule的范围，仍然可以使用chrome.runtime或其他module。

• 动态导入()

在content_script.js，它看起来像

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

您还需要在清单的Web Accessible Resources 中声明导入的脚本：

{
  "web_accessible_resources": [
    "your/content_main.js"
  ]
}

更多细节：

• 如何在 Chrome 扩展中使用 ES6 “导入”
• Chrome 扩展中 ES6 导入的工作示例
• chrome.runtime.getURL

希望能帮助到你。

我设法找到了解决方法。

免责声明

首先，重要的是要说明内容脚本自 2018 年 1 月起不支持module。此变通方法通过将modulescript标记嵌入到返回扩展程序的页面中来避开限制。

解决方法

这是我的manifest.json：

    "content_scripts": [ {
       "js": [
         "content.js"
       ]
    }],
    "web_accessible_resources": [
       "main.js",
       "my-script.js"
    ]

请注意，我在web_accessible_resources.

这是我的content.js：

    'use strict';

    const script = document.createElement('script');
    script.setAttribute("type", "module");
    script.setAttribute("src", chrome.extension.getURL('main.js'));
    const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    head.insertBefore(script, head.lastChild);

这将main.js作为module脚本插入到网页中。

我所有的业务逻辑现在都在main.js.

要使此方法起作用，main.js（以及我将要使用的所有脚本 import）必须web_accessible_resources在清单中。

示例用法： my-script.js

    'use strict';

    const injectFunction = () => window.alert('hello world');

    export {injectFunction};

而在main.js这导入脚本的例子：

    'use strict';

    import {injectFunction} from './my-script.js';
    injectFunction();

这有效！没有抛出任何错误，我很高兴。:)

imports 在内容脚本中不可用。

这是使用全局范围的解决方法。

由于内容脚本存在于它们自己的“孤立世界”中- 它们共享相同的全局命名空间。它只能被 中声明的内容脚本访问manifest.json。

这是实现：

清单文件.json

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": [
      "content-scripts/globals.js",
      "content-scripts/script1.js",
      "content-scripts/script2.js"
    ]
  }
],

globals.js

globalThis.foo = 123;

脚本1.js

some_fn_that_needs_foo(globalThis.foo);

以同样的方式，您可以将可重用的功能和其他演员分解import出内容脚本文件中的其他角色。

注意：内容脚本的全局命名空间对除内容脚本外的任何页面都不可用 - 因此几乎没有全局范围污染。

如果您需要导入一些库 - 您将不得不使用一个Parcel打包器，比如将您的内容脚本文件与所需的库huge-content-script.js打包成一个文件，然后在manifest.json.

PS：关于 globalThis 的文档

最好的方法是使用像 webpack 或 Rollup 这样的打包器。

我摆脱了基本配置

const path = require('path');

module.exports = {
  entry: {
    background: './background.js',
    content: './content.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../build')
  }
};

使用命令运行文件

webpack --config ./ext/webpack-ext.config.js

捆绑器组合相关文件，我们可以在 chrome 扩展中使用module化！:D

您需要在构建文件夹中保留所有其他文件，如清单和静态文件。

玩弄它，你最终会找到让它工作的方法！

我只是在尝试自己解决同样的问题时偶然发现了这个问题。

无论如何，我认为有一个更简单的解决方案可以将您自己的自定义module注入您的内容脚本。我正在研究 Jquery 是如何注入的，我发现你可以通过创建一个IIFE（立即调用的函数表达式）并在你的manifest.json 中声明它来做同样的事情

它是这样的：

在您的 manifest.json 中：

"content_scripts": [
{
  "matches": ["https://*"],
  "css": ["css/popup.css"],
  "js": ["helpers/helpers.js"]
}],

然后在 helpers/helpers.js 中创建一个 IIFE：

var Helpers = (function() {
  var getRandomArbitrary = function(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  return {
    getRandomArbitrary: getRandomArbitrary
  }
})()

现在，您可以在内容脚本中自由使用辅助函数：

Helpers.getRandomArbitrary(0, 10) // voila!

我认为如果您使用这种方法来重构您的一些通用功能，那就太好了。希望这可以帮助！