Webpack编译Chrome扩展出现unsafe-eval错误如何解决？

嘿，我之前也踩过类似的坑，咱们一步步来搞定这个问题：

先确认你的Manifest版本 #

Chrome扩展的Manifest V2和V3对CSP（内容安全策略）的限制完全不一样，先搞清楚你用的是哪个版本：

如果是Manifest V2 #

你已经添加了unsafe-eval的配置，但可能有几个容易忽略的小问题：

• 先检查manifest.json里的配置有没有拼写错误，比如引号是否配对、有没有多余符号。正确的配置格式应该是这样：

  {
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }
  

• 另外，Webpack的source map类型可能才是核心问题！如果你只是开发环境需要source map，把Webpack配置里的devtool换成不需要依赖eval()的类型就行，比如：

  module.exports = {
    // ...其他配置项
    devtool: 'inline-source-map' // 或者用'source-map'，别用带eval前缀的类型，比如'eval-cheap-module-source-map'
  };
  

  那些带eval的devtool会生成依赖eval()的source map，哪怕你开了unsafe-eval权限，Chrome有时候也会严格拦截，换成非eval的类型就能绕过这个限制。

如果是Manifest V3 #

划重点：Manifest V3完全不允许使用unsafe-eval，官方直接移除了这个权限，所以你加了配置也没用。这时候只能换思路解决：

• 必须把Webpack的devtool改成'inline-source-map'或者'source-map'，彻底避开eval()的使用。
• 如果开发时实在想用构建速度更快的eval类型source map，只能用Chrome的开发模式临时放宽限制：
  1. 打开Chrome扩展页面（chrome://extensions/）
  2. 开启右上角的「开发者模式」
  3. 点击你扩展的「详细信息」
  4. 勾选「允许访问文件URL」，或者直接用--disable-content-security-policy参数启动Chrome——但这个方法只适合本地开发，绝对不能用于生产环境！

额外排查点 #

• 看看是不是有其他安全类插件或者Chrome全局设置覆盖了你的CSP，比如某些广告拦截、安全扩展可能会强制禁用unsafe-eval。
• 检查Webpack的插件/loader，有没有哪个默认注入了eval()代码，比如某些热重载插件？可以搜一下打包后的bundle文件，看看有没有意外出现的eval(语句。

总的来说，最稳妥的方案就是调整Webpack的devtool配置，使用不依赖eval()的source map类型，既符合Chrome扩展的规则，又能正常进行调试。

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