Chrome扩展集成Firebase RTDB遇CSP报错，如何解决？

问题原因 #

host_permissions仅控制扩展可访问的外部API域名，而你遇到的报错是**内容安全策略（CSP）**限制了脚本加载——当前CSP仅允许加载'self'（扩展自身）的脚本，Firebase的外部脚本被阻止。两者作用不同，所以单独设置host_permissions无效。

修复步骤 #

1. 调整Manifest V3的CSP配置
   在manifest.json中添加content_security_policy字段，将Firebase相关的脚本源加入script-src指令：

   {
     "manifest_version": 3,
     "name": "你的扩展名称",
     "version": "1.0",
     "host_permissions": [
       "https://*.firebaseio.com/*",
       "https://*.googleapis.com/*",
       "https://*.gstatic.com/*"
     ],
     "content_security_policy": {
       "extension_pages": "script-src 'self' https://www.gstatic.com https://*.firebaseio.com https://*.googleapis.com; object-src 'none';"
     },
     // 其他扩展配置字段（如action、background等）
   }
   

   • 若Firebase使用的脚本域名有变动，可根据控制台报错中的<URL>具体补充对应的域名。
   • extension_pages是Manifest V3中针对扩展页面（popup、background等）的CSP规则，禁止unsafe-inline和unsafe-eval，所以要确保Vue构建产物中没有内联脚本。

2. 解决Vue构建的内联脚本问题
   如果Vue构建后生成了内联脚本（会触发CSP的unsafe-inline限制），需调整Vue构建配置：
   在vue.config.js中添加以下配置，避免生成内联脚本和内联sourcemap：

   module.exports = {
     configureWebpack: {
       devtool: 'cheap-module-source-map'
     },
     chainWebpack: config => {
       config.plugin('html').tap(args => {
         args[0].inlineSource = false;
         return args;
       });
     }
   }
   

3. 验证配置
   重新构建Vue项目并加载扩展，检查控制台是否还有CSP报错。若仍有，确认报错中的脚本域名已添加到script-src中。

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