从扩展注入的JS中导入外部JS文件报错的解决咨询

方案1：动态创建script标签 #

这是最通用的实现方式，不依赖模块规则，直接通过DOM操作加载外部脚本：

const script = document.createElement('script');
script.src = 'https://contoso.com/ownscript.js';
// 可选：设置async/defer控制脚本加载执行时机
script.async = true;
document.head.appendChild(script);

// 可选：监听脚本加载状态
script.onload = () => {
  console.log('外部脚本加载完成');
};
script.onerror = (err) => {
  console.error('脚本加载失败', err);
};

这种方式会让脚本在全局作用域执行，适合不需要模块化的场景。

方案2：使用动态import() #

ES6的动态import支持直接从URL加载模块，无需提前标记注入脚本为module，直接在注入代码里调用即可：

import('https://contoso.com/ownscript.js')
  .then(module => {
    // 调用模块导出的内容，比如默认导出：
    module.default.init();
    // 或具名导出：
    module.doSomething();
  })
  .catch(err => {
    console.error('模块加载失败', err);
  });

注意：外部JS必须是标准ES模块（包含export语句），且服务器需配置正确的CORS头，允许目标页面域名访问该脚本。

方案3：标记注入脚本为模块（Manifest V3） #

如果你的扩展使用Manifest V3，可以在content_scripts配置里指定脚本类型为module，这样注入的脚本本身就是模块，就能直接用import语句加载外部资源：

{
  "content_scripts": [
    {
      "matches": ["https://你的目标域名/*"],
      "js": ["inject-script.js"],
      "type": "module"
    }
  ]
}

随后在inject-script.js中直接编写导入逻辑：

import { init } from 'https://contoso.com/ownscript.js';
init();

此方案同样要求外部JS的服务器配置好CORS规则。

内容的提问来源于stack exchange，提问作者Robbit