Chrome扩展多上下文共享匿名登录用户的技术方案问询

Chrome扩展的popup、content script等运行在独立上下文环境中，Firebase Auth的认证状态无法自动在这些上下文间同步——比如在popup完成匿名登录后，content script里的Auth实例仍会显示未登录状态。针对这个问题，以下是稳定可行的解决方案：

核心思路 #

利用Chrome的storage.local存储匿名用户的refreshToken，在其他上下文启动时读取该token，通过Firebase Auth的signInWithRefreshToken方法重新恢复登录状态，实现跨上下文的状态同步。

步骤与代码实现 #

1. 配置Chrome扩展权限 #

在manifest.json中添加storage权限，确保所有上下文能访问共享存储：

{
  "permissions": ["storage"]
}

2. Popup上下文：登录并存储RefreshToken #

在popup完成匿名登录后，提取用户的refreshToken存入Chrome本地存储：

// popup.ts
import { getAuth, signInAnonymously } from "firebase/auth";

const auth = getAuth();

// 执行匿名登录
const userCreds = await signInAnonymously(auth);
const refreshToken = userCreds.user.refreshToken;

// 将token存入共享存储
await chrome.storage.local.set({ firebaseAnonymousRefreshToken: refreshToken });

// 监听当前上下文的状态变化
auth.onAuthStateChanged(user => console.log("Popup用户状态:", user));

3. Content Script上下文：读取Token并恢复登录 #

在content script初始化时，读取存储的refreshToken，用它恢复登录状态；如果token失效或不存在，则重新执行匿名登录：

// content.ts
import { getAuth, signInWithRefreshToken, signInAnonymously } from "firebase/auth";

const auth = getAuth();

// 从共享存储获取refreshToken
const storageData = await chrome.storage.local.get("firebaseAnonymousRefreshToken");
const refreshToken = storageData.firebaseAnonymousRefreshToken;

if (refreshToken) {
  try {
    // 使用refreshToken恢复登录状态
    const userCreds = await signInWithRefreshToken(auth, refreshToken);
    console.log("Content Script已同步登录状态:", userCreds.user);
  } catch (error) {
    console.error("同步登录状态失败，重新执行匿名登录:", error);
    await signInAnonymously(auth);
  }
} else {
  // 无token时直接匿名登录
  await signInAnonymously(auth);
}

// 监听状态变化，此时能正常捕获用户状态
auth.onAuthStateChanged(user => console.log("Content用户状态:", user));

关键说明 #

• refreshToken是Firebase Auth用于持久化用户会话的核心凭证，匿名用户的token有效期较长，能稳定跨上下文复用。
• 需确保所有上下文的Firebase Auth实例初始化配置完全一致（如项目ID、API密钥等），否则会导致认证失败。
• 处理token失效场景：当token过期或被吊销时，signInWithRefreshToken会抛出错误，此时重新执行signInAnonymously即可创建新的匿名会话。

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