Angular构建的Chrome扩展中Google OAuth无法正常工作

以下是针对你遇到的问题的具体解决方案和思路，基于@abacritt/angularx-social-login库的使用场景：

1. 调整Chrome扩展的内容安全策略（CSP） #

Chrome扩展的CSP会严格限制页面能加载的资源和执行的操作，默认配置会阻止OAuth授权窗口的弹出和SDK加载。修改manifest.json中的CSP配置，添加Google和Facebook的授权域名：

"content_security_policy": {
  "extension_pages": "script-src 'self' https://accounts.google.com https://connect.facebook.net; child-src https://accounts.google.com https://www.facebook.com; frame-src https://accounts.google.com https://www.facebook.com; object-src 'none'"
}

如果你的Angular应用是通过content script嵌入到网页的iframe中，还要对应调整content_scripts字段的CSP规则（如果有设置的话）。

2. 通过扩展后台脚本触发授权弹窗 #

Chrome扩展内的iframe因为上下文权限限制，直接调用window.open会被浏览器阻止。改用后台脚本（background script）来创建授权弹窗，步骤如下：

• 在Angular组件中发送消息到扩展后台：

// Angular组件内的登录触发代码
triggerGoogleLogin() {
  chrome.runtime.sendMessage({ action: 'openGoogleAuth' }, (response) => {
    if (response?.authToken) {
      // 拿到token后，传递给@abacritt/angularx-social-login库处理后续逻辑
      this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID, { access_token: response.authToken });
    }
  });
}

• 在后台脚本background.js中监听消息并创建弹窗：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'openGoogleAuth') {
    // 替换成你自己的Google OAuth授权地址（包含client_id、redirect_uri等参数）
    const authUrl = 'https://accounts.google.com/o/oauth2/v2/auth?client_id=你的Google客户端ID&redirect_uri=chrome-extension://你的扩展ID/callback.html&response_type=token&scope=email profile';
    chrome.windows.create({
      url: authUrl,
      type: 'popup',
      width: 600,
      height: 600
    }, (authWindow) => {
      // 监听授权窗口的加载状态，获取token
      const tabListener = (tabId, info) => {
        if (tabId === authWindow.tabs[0].id && info.status === 'complete') {
          chrome.tabs.get(tabId, (tab) => {
            if (tab.url.includes('#access_token=')) {
              const tokenParams = new URLSearchParams(tab.url.split('#')[1]);
              const accessToken = tokenParams.get('access_token');
              sendResponse({ authToken: accessToken });
              chrome.tabs.remove(tabId);
              chrome.tabs.onUpdated.removeListener(tabListener);
            }
          });
        }
      };
      chrome.tabs.onUpdated.addListener(tabListener);
    });
    return true; // 保持消息通道开放，等待异步响应
  }
});

3. 配置OAuth服务的回调地址 #

本地开发用localhost:4200，但在扩展环境中必须使用扩展内部页面作为回调地址：

• 在Google Cloud Console和Facebook开发者平台，添加chrome-extension://你的扩展ID/callback.html到授权允许的回调列表中。
• 在扩展根目录创建callback.html页面，用于接收授权回调并传递token：

<!-- callback.html -->
<script>
  window.onload = () => {
    const tokenParams = new URLSearchParams(window.location.hash.substring(1));
    const accessToken = tokenParams.get('access_token');
    chrome.runtime.sendMessage({ action: 'authCallback', token: accessToken });
    window.close();
  };
</script>

4. 修改@abacritt/angularx-social-login的配置 #

如果想尽量保留库的原有逻辑，可以尝试强制授权弹窗模式，在AppModule的初始化配置里设置popup: true：

SocialLoginModule.init({
  autoLogin: false,
  providers: [
    {
      id: GoogleLoginProvider.PROVIDER_ID,
      provider: new GoogleLoginProvider(
        '你的Google客户端ID',
        {
          popup: true, // 强制使用弹出窗口而非内嵌iframe
          scope: 'email profile'
        }
      )
    },
    {
      id: FacebookLoginProvider.PROVIDER_ID,
      provider: new FacebookLoginProvider(
        '你的Facebook应用ID',
        {
          popup: true,
          scope: 'email public_profile'
        }
      )
    }
  ]
})

注意：这种方式可能仍受限于扩展的CSP规则，建议优先使用后台脚本触发弹窗的方案。

5. 确保扩展权限配置正确 #

在manifest.json中添加必要的权限，允许访问OAuth服务域名和管理标签页：

"permissions": ["tabs", "activeTab"],
"host_permissions": ["https://accounts.google.com/*", "https://connect.facebook.net/*", "https://www.facebook.com/*"]

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