Manifest V3版本Chrome扩展如何用纯JS实现Firebase谷歌账号登录

实现结论 #

Manifest V3完全支持通过Firebase实现谷歌账号登录，你遇到的问题核心是两个配置/逻辑错误：

1. 远程加载Firebase SDK的域名仅配置在sandbox的CSP规则中，未加入实际生效的extension_pages规则，导致脚本被拦截
2. Firebase客户端Auth SDK依赖window对象，不能在无DOM上下文的Service Worker中运行

方案1：最小改动适配现有代码 #

适合快速复用你已写好的Firebase登录逻辑，改动量极低：

• 优先选择把用到的所有Firebase SDK文件（firebase-app.js、firebase-auth.js、firebase-firestore.js）下载到扩展本地目录，引用路径改为本地相对路径，完全符合script-src 'self'的CSP要求，不需要修改CSP配置。
  示例导入代码：

  import { initializeApp } from './lib/firebase/firebase-app.js';
  import { getAuth, GoogleAuthProvider, signInWithPopup } from './lib/firebase/firebase-auth.js';
  

• 登录逻辑保留在popup.js中即可，popup页面有完整的window上下文，完全支持Firebase的signInWithPopup交互，不需要迁移到后台Service Worker。
• 如果你坚持要远程加载CDN的SDK，需要调整Manifest的CSP配置，把允许的域名加到extension_pages规则下：

  "content_security_policy": {
    "extension_pages": "script-src 'self' https://www.gstatic.com https://apis.google.com; object-src 'self'"
  }
  

• 补充配置：在Firebase控制台的【Authentication→设置→授权域名】中，添加你的扩展地址chrome-extension://<你的扩展ID>，避免跨域拦截。

方案2：高稳定性方案（推荐） #

避免popup调用signInWithPopup被浏览器弹窗拦截的问题，适配Manifest V3最佳实践：

• 在Manifest中声明identity权限，同时在谷歌云后台创建OAuth2 Web客户端ID，授权重定向URI设置为https://<你的扩展ID>.chromiumapp.org/。
• 后台Service Worker只负责监听登录触发消息，调用chrome.identity.launchWebAuthFlow拉起谷歌官方授权页，不需要引入Firebase Auth SDK，避免window对象报错。
• 拿到授权回调的授权码后，交换得到谷歌ID令牌和访问令牌，在popup页面调用Firebase的signInWithCredential方法完成登录，所有Firebase SDK逻辑仍在有window上下文的页面中运行。
• 可将登录后拿到的用户凭证存储在chrome.storage.local中，Service Worker需要验证用户身份时直接读取存储的凭证即可，不需要在后台运行完整的Firebase Auth SDK。

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