如何在 Chrome 扩展的内容脚本中加载 ES6 模块？

在 Chrome 扩展的内容脚本中加载 ES6 模块

背景：
Chrome 61 引入了对JavaScript 模块。但是，由于内容脚本环境的限制，在 Chrome 扩展程序的内容脚本中加载模块可能会很困难。

问题：
您正在尝试使用导入/导出语法在内容脚本中，但遇到语法错误。

解决方案：
有两种方法在内容脚本中加载模块：

ES 模块的异步动态 import() 函数：

• 声明要在扩展的清单中加载的脚本作为Web 可访问资源。
• 在内容脚本中使用 import() 函数动态导入模块

示例：

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

普通非模块脚本的同步“导入”解决方法：

• 写入将模块作为普通的非模块脚本。
• 将其名称添加到清单的“content_scripts”部分中的“js”数组，位于主要内容脚本之前。
• 直接在内容脚本中访问模块的变量和函数。

注意：
异步动态导入方式更安全、更灵活，但可能会被网站的 Service Worker 阻止。同步“导入”解决方法不太稳健，但可能更可靠。

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