如何在Chrome扩展MV3中添加Google登录功能（含Firebase/无Firebase方案）

核心限制说明 #

MV3相比MV2有更严格的安全规则，直接沿用旧方案失败的核心原因包括：禁止inline script、更严格的CSP（内容安全策略）、取消background页面改用service worker，这些都需要针对性适配。

方案一：使用Chrome官方identity API（推荐） #

这是最符合MV3规范的实现方式，无需加载外部脚本，依赖Chrome原生API完成授权流程。

1. 配置manifest.json #

添加必要权限、OAuth2配置和CSP：

{
  "manifest_version": 3,
  "name": "Google Login Extension",
  "version": "1.0",
  "permissions": ["identity", "storage"],
  "oauth2": {
    "client_id": "你的Google OAuth客户端ID.apps.googleusercontent.com",
    "scopes": ["openid", "email", "profile"]
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

注意：需先在Google Cloud控制台创建Chrome应用类型的OAuth客户端ID，填写扩展的实际ID（扩展管理页开启开发者模式后可查看）。

2. 实现登录逻辑 #

popup.html

<!DOCTYPE html>
<html>
<head>
  <style>button { padding: 10px 20px; cursor: pointer; }</style>
</head>
<body>
  <button id="googleLoginBtn">Google登录</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('googleLoginBtn').addEventListener('click', async () => {
  const clientId = '你的Google OAuth客户端ID';
  const redirectUri = chrome.identity.getRedirectURL();
  // 构造授权URL
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=openid email profile`;

  try {
    // 启动授权流程
    const responseUrl = await chrome.identity.launchWebAuthFlow({
      url: authUrl,
      interactive: true
    });
    // 解析返回的令牌
    const params = new URLSearchParams(responseUrl.split('#')[1]);
    const accessToken = params.get('access_token');
    const idToken = params.get('id_token');

    // 获取用户信息
    const userInfo = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
      headers: { Authorization: `Bearer ${accessToken}` }
    }).then(res => res.json());

    // 保存用户信息到本地存储
    await chrome.storage.local.set({ user: userInfo, accessToken });
    console.log('登录成功:', userInfo);
  } catch (error) {
    console.error('登录失败:', error);
  }
});

方案二：使用Google Identity Services弹出按钮 #

若需保留Google官方登录按钮样式，可借助MV3的sandbox机制绕过CSP限制。

1. 配置manifest.json #

新增sandbox页面配置：

{
  "manifest_version": 3,
  // ... 其他配置同方案一
  "sandbox": {
    "pages": ["login-sandbox.html"]
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';",
    "sandbox": "sandbox allow-scripts allow-popups; script-src 'self' https://accounts.google.com/gsi/client; object-src 'none';"
  }
}

2. 实现sandbox登录页面 #

login-sandbox.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body style="margin:0;">
  <div id="g_id_onload"
       data-client_id="你的Google OAuth客户端ID"
       data-callback="handleLoginResponse"
       data-auto_prompt="false">
  </div>
  <div class="g_id_signin"
       data-type="standard"
       data-size="large"
       data-theme="outline"
       data-text="sign_in_with"
       data-shape="rectangular">
  </div>
  <script>
    function handleLoginResponse(response) {
      // 将令牌传递给主popup页面
      window.parent.postMessage({
        type: 'GOOGLE_LOGIN_SUCCESS',
        idToken: response.credential
      }, '*');
    }
  </script>
</body>
</html>

3. 主popup页面接收登录结果 #

popup.html

<!DOCTYPE html>
<html>
<body>
  <iframe src="login-sandbox.html" width="300" height="50" frameborder="0"></iframe>
  <script src="popup.js"></script>
</body>
</html>

popup.js

window.addEventListener('message', async (event) => {
  if (event.data.type !== 'GOOGLE_LOGIN_SUCCESS') return;
  
  const idToken = event.data.idToken;
  // 验证令牌并获取用户信息
  try {
    const userInfo = await fetch('https://www.googleapis.com/oauth2/v3/tokeninfo', {
      method: 'POST',
      body: `id_token=${idToken}`
    }).then(res => res.json());
    
    await chrome.storage.local.set({ user: userInfo, idToken });
    console.log('登录成功:', userInfo);
  } catch (err) {
    console.error('令牌验证失败:', err);
  }
});

常见问题排查 #

• OAuth客户端ID不匹配：确保Google Cloud控制台的客户端ID类型为Chrome应用，且扩展ID与配置一致。
• CSP报错：检查sandbox的CSP是否允许加载Google的登录脚本，extension_pages禁止外部脚本。
• 授权流程无响应：确认已添加identity权限，且redirectUri使用chrome.identity.getRedirectURL()生成。

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