Chrome扩展Manifest V3集成Firebase Auth：弹窗登录可行性问询

关于登录弹窗的疑问 #

不是无法展示账号选择的登录弹窗——Service Worker确实不能直接触发UI弹窗，但你可以在扩展的可交互页面（弹出页、选项页、内容脚本注入的页面）中调用Firebase Auth的登录方法，这些页面具备DOM环境，能正常唤起浏览器的账号选择弹窗。

具体实现步骤 #

1. 配置Manifest权限
   在manifest.json中添加必要的权限和主机权限：

{
  "manifest_version": 3,
  "permissions": ["identity", "storage"],
  "host_permissions": [
    "https://*.firebaseapp.com/*",
    "https://*.googleapis.com/*"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

2. 在可交互页面初始化Firebase并触发登录
   以弹出页（popup.html）为例，在对应的JS文件（popup.js）中完成Firebase初始化和登录逻辑：

// 导入Firebase SDK模块（需配置manifest的type为module）
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 绑定登录按钮点击事件
document.getElementById("login-btn").addEventListener("click", async () => {
  const provider = new GoogleAuthProvider();
  try {
    // 唤起账号选择弹窗
    const result = await signInWithPopup(auth, provider);
    const user = result.user;
    
    // 将登录状态同步到Service Worker
    await chrome.runtime.sendMessage({
      type: "USER_LOGIN",
      userData: { uid: user.uid, email: user.email, idToken: await user.getIdToken() }
    });
    
    // 关闭弹出页（可选）
    window.close();
  } catch (error) {
    console.error("登录失败:", error);
  }
});

3. 在Service Worker中处理后台逻辑
   Service Worker负责持久化用户状态、处理后台同步等，无需处理UI：

// 监听来自弹出页的登录消息
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === "USER_LOGIN") {
    // 将用户信息和Token存入chrome.storage.local持久化
    await chrome.storage.local.set({
      currentUser: message.userData
    });
    
    // 执行后续后台操作，比如同步数据到Firebase数据库等
    console.log("用户已登录，状态已保存");
  }
});

// 扩展启动时读取本地存储的登录状态
chrome.runtime.onStartup.addListener(async () => {
  const { currentUser } = await chrome.storage.local.get("currentUser");
  if (currentUser) {
    // 已登录，执行后台初始化逻辑
    console.log("用户已登录，启动后台服务");
  }
});

关键注意事项 #

• 不要在Service Worker中调用signInWithPopup或其他需要UI的Auth方法，必须在具备DOM的页面中执行。
• 若需要在Service Worker中验证用户身份，可使用存储的ID Token调用Firebase的验证API，无需重新初始化Auth实例在Service Worker中。
• 确保Firebase SDK的版本兼容Manifest V3，建议使用最新稳定版。

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