Manifest V3版Chrome扩展无法使用弹窗登录，如何实现Google登录？

针对Manifest V3中Service Worker无法执行弹窗操作的问题，这里提供两种可行的实现思路：

方案1：利用扩展Popup页面处理登录，同步凭证到Service Worker #

• 在manifest.json中配置Popup页面，并添加必要权限：

  {
    "action": { "default_popup": "popup.html" },
    "permissions": ["storage", "identity"],
    "oauth2": {
      "client_id": "你的Google OAuth客户端ID",
      "scopes": ["openid", "email", "profile"]
    }
  }
  

• 在Popup页面的JS中初始化Firebase，调用signInWithPopup完成登录：

  import { initializeApp } from "firebase/app";
  import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  
  const app = initializeApp(你的Firebase配置);
  const auth = getAuth(app);
  const provider = new GoogleAuthProvider();
  
  document.getElementById('login-btn').addEventListener('click', async () => {
    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;
      // 获取ID Token并发送给Service Worker
      const idToken = await user.getIdToken();
      chrome.runtime.sendMessage({ type: 'SAVE_TOKEN', token: idToken });
    } catch (error) {
      console.error('登录失败:', error);
    }
  });
  

• 在Service Worker中接收凭证并存储：

  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'SAVE_TOKEN') {
      chrome.storage.local.set({ firebaseToken: message.token });
    }
  });
  

方案2：使用Chrome Identity API获取授权码，对接Firebase Auth #

这种方法更贴合Chrome扩展的原生能力，避免依赖Firebase弹窗：

• 同样在manifest.json中配置identity权限和OAuth2信息（同方案1）
• 在Popup/Options页面中调用Chrome Identity API获取授权码：

  const clientId = "你的Google OAuth客户端ID";
  const redirectUri = chrome.identity.getRedirectURL();
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=openid email profile`;
  
  document.getElementById('login-btn').addEventListener('click', async () => {
    try {
      const authorizationCode = await chrome.identity.launchWebAuthFlow({
        url: authUrl,
        interactive: true
      });
      // 将授权码转为Firebase凭证
      const credential = GoogleAuthProvider.credential(null, authorizationCode);
      const result = await signInWithCredential(getAuth(app), credential);
      // 后续处理用户信息或同步到Service Worker
    } catch (error) {
      console.error('登录失败:', error);
    }
  });
  

关键注意事项 #

• 必须在Google Cloud控制台中，将扩展的ID（格式chrome-extension://<你的扩展ID>）添加到OAuth客户端的授权重定向URI和已授权的JavaScript来源中。
• Firebase Auth状态会在扩展的各个页面/脚本间自动同步，Service Worker可通过监听onAuthStateChanged获取用户状态，无需手动存储凭证。
• 测试时注意：未打包的扩展ID和打包后的正式ID不同，需将两者都添加到Google Cloud的授权列表中。

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