Angular开发Chrome扩展时signInWithPopup弹窗关闭致认证失败如何解决

你遇到的问题核心是登录触发逻辑运行在**扩展弹出层页面（点击扩展图标唤起的小窗口）**中，Chrome的默认机制会在该页面失去焦点时自动销毁页面及对应的JS上下文，此时signInWithPopup的回调监听函数被销毁，Firebase检测到发起请求的上下文丢失，就判定登录流程终止。打开开发者工具时，扩展弹出层会被强制保持存活，因此流程可以正常运行。

方案1：将登录逻辑迁移到扩展内部标签页实现 #

这是改造成本最低的方案：

• 新增一个扩展内部的登录页面（比如login.html），把登录按钮和相关Firebase认证逻辑都迁移到这个页面
• 原本扩展弹出层的登录按钮点击后，调用chrome.tabs.create打开新标签页指向chrome-extension://<你的扩展ID>/login.html
• 在标签页内调用signInWithPopup即可，标签页不会因为失去焦点被销毁，认证流程可以正常完成

方案2：改用signInWithRedirect替代signInWithPopup #

如果希望保持在弹出层内触发，可改用重定向认证流程：

• 先在Firebase控制台的授权域名列表中添加你的扩展地址：chrome-extension://<你的扩展ID>
• 登录触发时调用signInWithRedirect方法，示例代码：

import { getAuth, signInWithRedirect, GoogleAuthProvider, getRedirectResult } from '@angular/fire/auth';

// 登录触发逻辑
const auth = getAuth();
const provider = new GoogleAuthProvider();
signInWithRedirect(auth, provider);

// 页面初始化时监听重定向结果
ngOnInit() {
  const auth = getAuth();
  getRedirectResult(auth)
    .then((result) => {
      if (result) {
        // 登录成功逻辑
      }
    })
    .catch((error) => {
      // 错误处理
    });
}

方案3：结合Chrome Identity API实现认证（最稳定） #

针对Chrome扩展场景，使用Chrome官方提供的chrome.identity.launchWebAuthFlow实现认证，适配性最高：

• 先在manifest.json中声明identity权限，以及配置OAuth重定向地址
• 手动构造OAuth请求链接，调用launchWebAuthFlow唤起授权弹窗，拿到授权码后和Firebase交换认证凭证，示例代码：

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

// 构造OAuth授权链接
const authUrl = await auth.generateSignInWithPopupLink(provider, {
  redirectUrl: chrome.identity.getRedirectURL()
});

// 调用Chrome Identity API拉起授权
chrome.identity.launchWebAuthFlow({
  url: authUrl,
  interactive: true
}, (redirectUrl) => {
  // 解析重定向地址中的凭证，完成Firebase登录
  signInWithPopupLink(auth, redirectUrl)
    .then((result) => {
      // 登录成功逻辑
    });
});

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