Chrome Manifest V3扩展接入Firebase报错：模块解析失败与CSP政策违规

报错的核心原因是浏览器原生的ES模块机制不支持裸模块导入（也就是导入路径不带/、./、../前缀的写法），Chrome扩展的运行环境没有解析node_modules路径的能力，两种修复方案：

• 方案一：使用前端打包工具
  用Vite、Webpack、Rollup等工具对项目代码进行打包，打包工具会自动把node_modules里的firebase依赖合并到输出的静态文件中，裸导入的语法会被自动转换为符合浏览器要求的路径格式，打包后的产物再放到扩展目录里加载即可。
• 方案二：手动拷贝ES模块文件到项目
  从node_modules/firebase/目录下把需要的ES模块文件拷贝到你项目的子目录（比如./libs/firebase/），然后修改导入语句为相对路径：

  import {initializeApp} from './libs/firebase/app.js';
  import {getFirestore} from './libs/firebase/firestore.js';
  

报错的核心原因是Manifest V3的扩展对不同页面的CSP规则是独立的，你把gstatic域名加到了sandbox的script-src配置中，但你的popup页面属于extension_pages范围，该范围的script-src默认只允许加载扩展本地的脚本，且Manifest V3规定extension_pages的script-src不允许添加外部远程域名，所以直接用CDN的方案在MV3的popup、background等核心页面中是不支持的，修复方案：

• 把用到的Firebase SDK的JS文件下载到本地扩展目录，使用相对路径引入，和问题1的方案二逻辑一致，既不会触发CSP报错，也不需要修改manifest.json的CSP配置。
• 额外注意：在popup.html中引入你的fireConn.js时，需要添加type="module"属性，否则ES模块的导入语法会无法识别：

  <script type="module" src="fireConn.js"></script>
  

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