Chrome扩展开发报错：Uncaught SyntaxError模块外无法使用import

问题原因 #

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module错误，是因为通过content script注入到页面的脚本默认是普通脚本，而import属于ES模块语法，只能在声明为module类型的脚本中使用。同时，依赖的文件也需要配置为网页可访问资源，否则浏览器无法加载它们。

解决方案1：将注入脚本声明为ES模块 #

步骤1：修改content.js的注入代码 #

在创建<script>标签时，添加type="module"属性，告诉浏览器这是一个ES模块：

var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.type = 'module'; // 新增这一行
s.onload = function() { this.remove(); };
(document.head || document.documentElement).appendChild(s);

步骤2：更新manifest.json的可访问资源配置 #

把依赖的some_file.js也加入web_accessible_resources，确保页面能加载到这个文件：

{
  "manifest_version": 3,
  ...
  "web_accessible_resources": [
    {
      "resources": [
        "injected.js",
        "some_file.js" // 新增依赖文件
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

注意事项 #

• 模块脚本中的相对路径是相对于injected.js的位置，确保some_file.js的路径正确。
• 模块脚本会延迟执行（类似defer），不过你设置了run_at: document_start，结合模块的特性，依然能在页面早期完成注入。

解决方案2：打包成单文件（推荐） #

如果你的扩展依赖多个文件，更稳妥的方式是用打包工具（如Webpack、Rollup）把injected.js和它的依赖打包成一个独立的文件。这样：

1. 打包后的文件没有import语句，不需要声明type="module"
2. 只需要在web_accessible_resources中配置打包后的单个文件
3. 避免模块路径的潜在问题

比如用Rollup打包后，你只需要注入打包后的injected-bundle.js，manifest中也只需要配置这个文件即可。

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