Chrome与Firefox扩展集成Firebase Auth时Firefox端认证错误求助

我之前在开发跨浏览器扩展时也踩过这个Firebase Auth的坑，结合自己的调试经验和社区方案，给你几个可行的解决方向：

1. 正确配置Firebase授权域（解决验证失败问题） #

Firebase控制台对moz-extension://协议的支持需要注意两个关键点：

• 先固定Firefox扩展的ID：在你的manifest.json中添加固定ID，避免开发阶段临时ID变化导致授权域失效：

  "browser_specific_settings": {
    "gecko": {
      "id": "your-extension-unique-id@your-domain.com",
      "strict_min_version": "109.0"
    }
  }
  

• 添加完整的moz-extension前缀到授权域：复制moz-extension://your-extension-unique-id（注意不要加后缀路径）到Firebase控制台的「认证」→「设置」→「授权域」列表中。Firebase现在支持这个协议，但直接加带具体路径的URL会触发验证错误，只需要加前缀即可。

2. 调整Firebase Auth的初始化配置 #

针对Firefox扩展的环境，修改Firebase Auth的持久化设置和认证模式：

• 强制启用本地存储持久化：在初始化Auth时明确设置persistence，避免Firebase自动检测环境时出错：

  import { initializeApp } from "firebase/app";
  import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";
  
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  await setPersistence(auth, browserLocalPersistence);
  

• 优先使用Popup模式而非Redirect：在Firebase UI配置中指定signInFlow: 'popup'，并确保弹窗页面的URL是扩展内的合法路径（比如用browser.runtime.getURL('/sign-in-popup.html')获取），同时这个路径对应的域名已经在授权域中：

  const ui = new firebaseui.auth.AuthUI(auth);
  ui.start('#firebaseui-auth-container', {
    signInFlow: 'popup',
    signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
    signInSuccessUrl: browser.runtime.getURL('/dashboard.html'),
  });
  

3. 绕开Firebase UI限制：使用浏览器原生Identity API #

如果上述方案仍有问题，可以直接用Firefox的browser.identity API获取谷歌授权码，再传给Firebase Auth完成认证，这种方式更适配扩展环境：

• 第一步：在manifest中添加identity权限：

  "permissions": ["identity"]
  

• 第二步：调用browser.identity.launchWebAuthFlow获取授权码，再用signInWithCredential完成认证：

  const clientId = "YOUR_GOOGLE_OAUTH_CLIENT_ID";
  const redirectUri = browser.identity.getRedirectURL();
  
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&response_type=code&scope=openid%20email%20profile&redirect_uri=${encodeURIComponent(redirectUri)}`;
  
  browser.identity.launchWebAuthFlow({url: authUrl, interactive: true})
    .then(code => {
      // 用授权码交换Firebase凭证
      const credential = firebase.auth.GoogleAuthProvider.credential(null, code);
      return firebase.auth().signInWithCredential(credential);
    })
    .then(user => {
      // 认证成功逻辑
    })
    .catch(error => {
      console.error("认证失败:", error);
    });
  

  注意：需要在谷歌云控制台的OAuth 2.0客户端ID设置中，把browser.identity.getRedirectURL()返回的URL添加到授权重定向URI列表中。

额外排查点 #

• 确认扩展的manifest.json中没有禁用web storage：Firefox扩展默认允许localStorage/sessionStorage，但如果有特殊权限配置，确保没有限制。
• 检查Firebase SDK版本：使用最新版的Firebase Auth SDK，旧版本对moz-extension协议的支持不完善。

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