Chrome扩展集成Firebase触发Content Security Policy报错如何解决

错误根因 #

你使用的是Manifest V3版本的扩展，CSP规则按作用域独立生效，你的配置存在作用域错配问题：

• extension_pages 作用域覆盖扩展的背景页、弹窗页、选项页等核心页面，你配置的该作用域script-src只有'self'，仅允许加载扩展本地的脚本
• 你把Firebase相关CDN域名配置到了sandbox作用域的规则中，该规则仅对显式声明为沙箱的页面生效，对你当前加载脚本的核心页面不生效
• Manifest V3 明确禁止在extension_pages的script-src中添加远程HTTP/HTTPS域名，就算手动添加也会被Chrome忽略，无法生效

可行解决方案 #

方案1：本地引入Firebase SDK（最推荐） #

直接将你需要的Firebase SDK文件（比如https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js）下载到扩展的本地目录中，通过相对路径引用即可，无需修改现有CSP配置，完全符合Manifest V3的安全要求。

方案2：使用沙箱页面加载远程脚本 #

如果必须使用远程CDN加载Firebase脚本，可以将需要加载脚本的页面配置为沙箱页面：

1. 在manifest.json的sandbox.pages字段中添加你要使用的页面路径，示例：

"sandbox": {
  "pages": ["your-sandbox-page.html"]
}

2. 在web_accessible_resources中声明该沙箱页面，允许扩展内部访问
3. 你现有sandbox作用域的CSP已经包含了https://www.gstatic.com/*域名，无需额外修改，沙箱页面内加载Firebase脚本不会被拦截

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