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

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

问题： 在 Chrome 63 中，使用内容中的导入/导出语法导入 ES6 模块脚本结果语法

解决方案：

Chrome 扩展通过异步动态 import() 函数支持 ES6 模块：

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

但是，此方法有限制：

• 可能被网站服务屏蔽
• 需要在清单的 Web 可访问资源中声明导入的脚本。

对于非模块脚本，请考虑：

• 使用普通的非-module script。
• 将其名称添加到“content_scripts”中主要内容之前的“js”中脚本。
• 直接使用全局变量/函数。

附加信息：

• [如何使用 ES6 “import” ”与 Chrome扩展](https://stackoverflow.com/a/50132415)
• [Chrome 中 ES6 导入的工作示例扩展](https://github.com/browsers-toolbox/es-import-in-extension)
• [chrome.runtime.getURL](https://developer.chrome.com/extensions/runtime #method-getURL)

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