使用Parcel构建Chrome扩展时构建阶段出现unsafe-eval错误如何解决？

问题原因 #

Parcel生产构建时，默认的代码压缩或优化逻辑可能生成依赖eval()/动态代码执行的片段，而Chrome扩展的Content Security Policy（CSP）默认禁止unsafe-eval，导致build后的扩展加载失败。开发阶段Parcel的热更新机制或宽松的开发配置跳过了这类限制，所以不会报错。

解决方案 #

1. 配置Parcel禁用生成eval()的优化 #

在项目根目录的package.json中添加Parcel的压缩配置，强制Terser（Parcel默认的JS压缩器）禁用eval相关的压缩选项：

"parcel": {
  "compressors": {
    ".js": [
      "@parcel/compressor-terser",
      {
        "terserOptions": {
          "compress": {
            "eval": false
          }
        }
      }
    ]
  }
}

重新执行npm run build，Parcel会生成不依赖eval()的代码，符合Chrome扩展的CSP要求。

2. 排查并移除项目中手动编写的动态执行代码 #

检查你的代码中是否存在eval()、new Function()这类动态执行逻辑，替换为静态代码实现。这类代码在Chrome扩展的生产环境中会直接触发CSP限制，必须移除。

3. （不推荐，仅应急使用）调整扩展Manifest的CSP #

如果上述方法无法解决，且你确认需要unsafe-eval，可以修改扩展的manifest.json（仅适用于Manifest V2，Manifest V3不允许添加unsafe-eval）：

"content_security_policy": "script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; object-src 'self'"

注意：此操作会降低扩展的安全性，尽量避免使用。

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