使用Angular 5构建Chrome扩展遇unsafe-eval错误，求解决方法

我来帮你搞定这个问题！先给你拆解下错误的原因，再一步步教你解决：

错误原因解析 #

这个报错是Chrome扩展的**内容安全策略（CSP）**在起作用。Chrome为了扩展的安全性，默认禁止了unsafe-eval这种动态执行字符串代码的行为——而Angular默认的JIT（即时编译）模式，会在运行时动态生成并执行JavaScript代码，刚好撞在了CSP的禁令上，所以被浏览器拦截了。

解决步骤 #

1. 切换到Angular的AOT编译模式

AOT（提前编译）是解决这个问题的核心！它会在构建阶段就把所有Angular组件编译成浏览器能直接运行的原生JS，完全不需要在运行时做动态编译，自然就避开了unsafe-eval的限制。

• 临时构建时直接用AOT：

  ng build --aot --prod
  

  加上--prod还能开启生产环境的压缩、优化，让你的扩展体积更小、运行更快。

• 永久配置默认AOT：
  打开项目根目录的angular.json，找到对应项目的architect.build.options节点，添加"aot": true，这样以后直接跑ng build就会自动用AOT模式编译。

2. 修正你的manifest配置

你之前把Angular生成的一堆脚本都塞到background里，这其实完全没必要——popup页面（也就是你指定的index.html）会自动加载它需要的所有资源，不需要在background里提前引入。修改后的manifest可以简化成这样：

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "page_action": {
    "default_popup": "index.html"
  },
  "manifest_version": 2
}

如果你的扩展确实需要后台脚本逻辑，那单独写一个专门的background.js文件放进去就行，别把Angular的编译产物混到background里。

3. 最后验证

用ng build --aot --prod生成编译产物后，在Chrome的扩展管理页面（打开chrome://extensions/，开启开发者模式），选择「加载已解压的扩展程序」，选中Angular生成的dist目录，就能正常看到你的popup扩展运行了。

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