Chrome扩展中Firebase登录状态无法同步至background.js的问题

核心原因 #

Chrome扩展的Offscreen文档与Background脚本属于隔离的执行上下文，各自的本地存储（包括Firebase Auth默认依赖的localStorage）不共享。直接在Offscreen中完成登录后，Background里的Firebase Auth实例无法感知到登录状态，导致onAuthStateChanged不触发、数据库权限校验失败。

解决方案 #

通过Chrome扩展的消息API，将Offscreen中获取的Auth凭证同步到Background脚本，在Background的Auth实例中完成二次登录，实现状态共享。

步骤1：Offscreen文档登录后发送Auth凭证 #

登录成功后，获取用户的ID Token，通过chrome.runtime.sendMessage传递给Background：

// offscreen.js
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new GoogleAuthProvider();

signInWithPopup(auth, provider)
  .then(async (result) => {
    // 获取当前用户的ID Token
    const idToken = await auth.currentUser.getIdToken();
    // 发送凭证到Background
    chrome.runtime.sendMessage({
      type: "SYNC_AUTH_TOKEN",
      token: idToken
    });
  })
  .catch(err => console.error("登录失败:", err));

步骤2：Background脚本接收凭证并同步Auth状态 #

在Background中监听消息，用收到的ID Token创建Auth凭证，通过signInWithCredential完成登录，触发onAuthStateChanged：

// background.js
import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";

// 确保Firebase Auth实例是单例（避免重复初始化）
const auth = getAuth();

// 监听Offscreen发来的凭证消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === "SYNC_AUTH_TOKEN") {
    // 用ID Token生成对应提供商的凭证
    const credential = GoogleAuthProvider.credential(msg.token);
    // 在Background的Auth实例中登录
    signInWithCredential(auth, credential)
      .then(userCred => {
        console.log("Auth状态同步完成:", userCred.user);
      })
      .catch(err => console.error("同步Auth状态失败:", err));
  }
});

// 现在可以正常监听Auth状态变化
auth.onAuthStateChanged(user => {
  if (user) {
    // 此处可执行需要认证的数据库操作（如userExists）
    console.log("当前登录用户（Background）:", user);
  } else {
    console.log("用户已退出登录");
  }
});

步骤3：统一Firebase初始化（可选但推荐） #

将Firebase初始化逻辑抽成单独模块，在Offscreen和Background中导入同一模块，避免因配置不一致导致的问题：

// firebase-init.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 你的Firebase配置
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

在Offscreen和Background中直接导入：

import { auth } from "./firebase-init.js";

关键注意事项 #

• 不要依赖Firebase默认的持久化设置跨上下文同步状态，Chrome扩展的上下文隔离特性会导致本地存储不共享。
• 若使用其他登录提供商（如Facebook、GitHub），对应替换GoogleAuthProvider为对应提供商的凭证生成方法即可。
• 同步完成后，Background的Auth实例会持有有效用户状态，调用Realtime Database时会自动带上认证信息，解决权限拒绝报错。

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