Chrome扩展添加unsafe-inline仍报CSP脚本加载拒绝错误求助

首先，我先帮你排查核心问题——你的manifest.json里存在语法错误，这大概率是引发CSP异常的源头之一。你提供的代码中，content_security_policy的闭合大括号后多了一个多余的引号，导致整个manifest解析失败，进而触发一系列CSP相关报错。

先给你修正后的完整manifest.json配置：

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "content_security_policy": "script-src 'unsafe-inline' https://www.gstatic.com https://ajax.googleapis.com; object-src 'none'",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

这里做了几个关键调整：

• 移除了多余的引号，修复manifest语法错误
• 把Firebase脚本的源https://www.gstatic.com明确加入script-src（你引入的Firebase脚本来自这个域名），避免CSP拦截远程资源
• 将object-src设为'none'，既符合安全规范，也解决了你原本不必要的unsafe-inline配置

接下来分两种场景解决Firebase初始化的问题：

场景1：在options.html内联脚本中初始化Firebase #

虽然你允许了'unsafe-inline'，但Chrome扩展的CSP对内联脚本有额外限制（即使声明了unsafe-inline，部分严格模式下仍可能拦截）。不过既然是课程项目，只要确保CSP配置包含所有必要源即可：

• 确认script-src包含https://www.gstatic.com和'unsafe-inline'
• 内联初始化脚本必须放在Firebase远程脚本之后，保证firebase对象已加载完成

场景2：将初始化代码移到options.js（推荐方案） #

你之前遇到的firebase is not defined错误，本质是加载顺序问题——你的options.js先于Firebase脚本执行，自然找不到firebase对象。解决方法很简单：

1. 在options.html中调整脚本加载顺序，先引入Firebase远程脚本，再引入本地的options.js：

<script src="https://www.gstatic.com/firebasejs/5.0.2/firebase.js"></script>
<script src="options.js"></script>

2. 在options.js中编写初始化代码：

var config = { /* 你的Firebase配置内容 */ };
firebase.initializeApp(config);

最后，修改完配置后，记得在Chrome扩展管理页面点击「重新加载」按钮，让新的manifest生效，再打开options页面查看控制台错误是否消失。

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