Chrome扩展Manifest V3：signInWithPopup弹窗被浏览器遮挡问题求助

问题核心：你当前通过offscreen页面的iframe触发signInWithPopup，但offscreen是后台隐藏页面，登录弹窗会以这个后台窗口为父级，因此被浏览器主窗口覆盖。以下是两种可行的解决方法：

方法一：直接从侧边栏页面触发认证 #

将认证逻辑移到侧边栏页面（前台可见窗口），这样signInWithPopup的弹窗会以侧边栏为父级，自然显示在浏览器顶层。

示例代码（侧边栏页面）：

// 初始化Firebase Auth
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  // 你的Firebase配置
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const PROVIDER = new GoogleAuthProvider();

// 触发登录的函数
async function startAuth() {
  try {
    PROVIDER.setCustomParameters({ prompt: 'select_account' });
    const result = await signInWithPopup(auth, PROVIDER);
    
    // 处理登录成功逻辑，比如把用户信息传回后台或存储
    console.log('登录成功：', result.user.uid);
  } catch (error) {
    console.error('登录失败：', error.message);
  }
}

// 绑定到侧边栏的登录按钮
document.querySelector('#login-btn').addEventListener('click', startAuth);

方法二：通过前台Popup窗口触发认证（保留offscreen流程） #

如果必须通过offscreen中转，可以让offscreen打开一个前台Popup窗口，在这个窗口里执行认证逻辑，确保弹窗层级正确。

步骤1：在manifest.json中添加Popup配置 #

{
  "manifest_version": 3,
  "permissions": ["windows"],
  "action": {
    "default_popup": "auth-popup.html"
  }
}

步骤2：修改offscreen页面代码 #

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getAuth' && message.target === 'offscreen') {
    // 打开前台认证Popup窗口
    chrome.windows.create({
      url: 'auth-popup.html',
      type: 'popup',
      width: 400,
      height: 600,
      focused: true // 强制窗口获得焦点
    });
    
    sendResponse({ success: true });
    return false;
  }
});

// 监听认证结果并转发给侧边栏
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.type === 'auth_result') {
    chrome.runtime.sendMessage(msg.data);
  }
});

步骤3：创建auth-popup.html及对应JS #

<!-- auth-popup.html -->
<!DOCTYPE html>
<html>
<body>
  <script type="module">
    import { initializeApp } from "firebase/app";
    import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

    const firebaseConfig = {
      // 你的Firebase配置
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const PROVIDER = new GoogleAuthProvider();

    // 页面加载后自动触发认证
    window.addEventListener('load', async () => {
      try {
        PROVIDER.setCustomParameters({ prompt: 'select_account' });
        const result = await signInWithPopup(auth, PROVIDER);
        
        // 发送成功结果
        chrome.runtime.sendMessage({
          type: 'auth_result',
          data: { success: true, user: result.user }
        });
      } catch (error) {
        // 发送错误结果
        chrome.runtime.sendMessage({
          type: 'auth_result',
          data: {
            success: false,
            error: { code: error.code, message: error.message }
          }
        });
      } finally {
        // 完成后关闭Popup窗口
        window.close();
      }
    });
  </script>
</body>
</html>

关键原理 #

signInWithPopup的弹窗层级由调用它的窗口决定：后台窗口（如offscreen）触发的弹窗会被浏览器主窗口覆盖，而前台可见窗口（侧边栏、Popup）触发的弹窗会显示在浏览器顶层。

内容的提问来源于stack exchange，提问作者Cyrus the Great