Chrome扩展中index.mjs无法导入模块的问题求助

问题根源 #

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module报错，即便添加了type="module"和修改文件后缀仍未解决，核心原因是Chrome扩展的特殊运行环境限制，以及模块导入路径的配置错误。

分步解决方案 #

1. 确认HTML脚本标签的模块声明 #

先再次确认script标签已正确设置type="module"，这是ES模块运行的基础：

<script type="module" src="index.mjs"></script>

2. 修正manifest.json配置（关键步骤） #

Chrome扩展对模块脚本有额外的安全策略要求，必须在manifest.json中正确配置：

• 若使用Manifest V3（推荐）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "index.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  }
}

V3默认支持模块脚本，但自定义CSP时不能限制模块加载权限。

• 若使用Manifest V2（逐步淘汰）：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'none'"
}

3. 调整webextension-polyfill的导入路径 #

直接用import Browser from "webextension-polyfill"无法在Chrome扩展中生效，因为扩展的模块系统不会自动解析npm包名，必须使用相对路径：

1. 下载webextension-polyfill的browser-polyfill.js文件（从官方源码的dist目录获取）
2. 将该文件放到扩展目录的根目录（与index.mjs同级）
3. 修改index.mjs的导入语句：

import Browser from './browser-polyfill.js';

const port = Browser.runtime.connect();

4. 验证扩展文件结构 #

确保你的文件层级正确：

你的扩展目录/
├─ manifest.json
├─ index.html
├─ index.mjs
└─ browser-polyfill.js

额外排查项 #

• 若使用Chrome V89及以下版本，模块脚本在扩展中的支持存在兼容性问题，建议升级到最新稳定版
• 打开Chrome开发者工具控制台，检查是否有文件找不到的报错，可能是路径拼写错误

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