如何将 ES6 模块导入 Chrome 扩展内容脚本？

在 Chrome 扩展内容脚本中导入 ES6 模块

问题：

在 Chrome 63 中，使用 import/ 导入 ES6 模块内容脚本中的导出语法导致语法错误。

原因：

与 HTML 脚本不同，内容脚本本身不支持模块加载。

解决方案：异步动态导入（ ) 函数

要解决此问题，请使用以下命令解决方法：

1. 在 manifest.json 中，将模块脚本声明为可通过 Web 访问的资源。
2. 在 content_script.js 中，使用import() 函数异步加载您的模块。
3. 等待导入并运行您的 main 函数模块.

示例：

manifest.json：

{
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["my-module.js"]
    }
  ],
  ...
}

content_script.js:

(async () => {
  const src = chrome.runtime.getURL("my-module.js");
  const module = await import(src);
  module.main();
})();

同步导入解决方法

或者，您可以对非模块脚本使用同步导入解决方法：

1. 将脚本添加到 manifest 中的“js”数组。 json.
2. 直接在主要内容中引用脚本的全局变量和函数脚本。

以上是如何将 ES6 模块导入 Chrome 扩展内容脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！