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

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

问题：

尝试在 Chrome 中导入 ES6 模块时使用标准导入/导出语法的扩展内容脚本，错误消息是

上下文：

Chrome 61 引入了对 JavaScript 模块的支持，但 Chrome 扩展的内容脚本无法识别导入语法。

解决方案：异步动态 import() 函数

在 Chrome 中导入 ES6 模块扩展内容脚本，使用异步动态 import() 函数：

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

其他注意事项：

• 将扩展清单中的导入脚本声明为可通过 Web 访问资源。
• 此方法依赖于异步函数，该函数可能会被网站服务阻止

同步“导入”解决方法

作为替代方案，使用普通的非模块脚本并将其名称添加到中的“js”数组中主要内容脚本之前的“content_scripts”。可以直接访问脚本中的全局变量和函数。

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