首页 > web前端 > js教程 > 如何将 ES6 模块导入 Chrome 扩展内容脚本?

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

Barbara Streisand
发布: 2024-11-27 11:36:19
原创
739 人浏览过

How Can I Import ES6 Modules into Chrome Extension Content Scripts?

在 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板