Safari Web Extension谷歌登录：不支持identity API时如何发起OAuth流程？

嘿，我之前刚好在Safari Web扩展里遇到过这个问题。browser.identity/chrome.identity接口确实用不了，但用新标签页走OAuth流程的方案其实挺容易实现的，我给你一步步拆解，再附上完整示例代码：

因为没法依赖官方的launchWebAuthFlow来自动处理OAuth的跳转和回调拦截，我们得手动完成这几个关键步骤：

• 打开新标签页加载OAuth服务商的授权页面
• 用扩展内部的一个回调页面捕获授权码
• 通过postMessage把授权码从回调页传递回扩展后台
• 后台拿到授权码后，再去兑换访问令牌

1. 创建回调页面：在扩展目录里新建callback.html，这个页面的唯一作用是接收OAuth返回的授权码，然后传给后台。
2. 配置扩展权限：在manifest.json里声明tabs权限（用来打开新标签页），同时确保回调页被列为可访问资源。
3. 后台触发授权流程：在后台脚本里构造完整的OAuth授权URL，用chrome.tabs.create打开新标签页加载这个URL，同时监听message事件等待回调页传授权码。
4. 回调页传递授权码：callback.html加载时，从URL参数里提取授权码，用window.opener.postMessage发送给后台，然后自动关闭标签页。

1. manifest.json（适配Safari的v3格式） #

{
  "manifest_version": 3,
  "name": "Safari OAuth Demo",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"],
  "host_permissions": ["https://your-oauth-provider.com/*"]
}

2. background.js（后台脚本） #

// 触发授权流程的函数（可绑定到扩展图标点击或其他事件）
function startOAuthFlow() {
  const clientId = "YOUR_CLIENT_ID";
  const redirectUri = chrome.runtime.getURL("callback.html");
  // 替换为你的OAuth服务商授权地址和所需权限
  const authUrl = `https://your-oauth-provider.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=user:read`;

  // 打开新标签页加载授权页面
  chrome.tabs.create({ url: authUrl }, (tab) => {
    // 监听来自回调页的消息
    const messageListener = (message, sender, sendResponse) => {
      // 验证消息来源是当前授权标签页
      if (sender.tab.id === tab.id) {
        if (message.type === "oauth_code") {
          const authCode = message.code;
          console.log("收到授权码:", authCode);
          // 兑换授权码为访问令牌
          exchangeCodeForToken(authCode);
        } else if (message.type === "oauth_error") {
          console.error("授权失败:", message.error);
        }
        // 移除监听避免内存泄漏
        chrome.runtime.onMessage.removeListener(messageListener);
        // 关闭授权标签页
        chrome.tabs.remove(tab.id);
      }
    };
    chrome.runtime.onMessage.addListener(messageListener);
  });
}

// 模拟兑换授权码为访问令牌的逻辑
function exchangeCodeForToken(code) {
  const clientId = "YOUR_CLIENT_ID";
  const clientSecret = "YOUR_CLIENT_SECRET";
  const redirectUri = chrome.runtime.getURL("callback.html");

  fetch("https://your-oauth-provider.com/token", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code: code,
      client_id: clientId,
      client_secret: clientSecret,
      redirect_uri: redirectUri
    })
  })
  .then(res => res.json())
  .then(tokenData => {
    console.log("获取到访问令牌:", tokenData.access_token);
    // 将令牌存储到扩展本地存储，供后续使用
    chrome.storage.local.set({ accessToken: tokenData.access_token });
  })
  .catch(err => console.error("令牌兑换失败:", err));
}

// 示例：绑定到扩展安装完成事件，也可改为绑定图标点击
chrome.runtime.onInstalled.addListener(() => {
  console.log("扩展已安装，可启动OAuth流程");
  // chrome.action.onClicked.addListener(() => startOAuthFlow());
});

3. callback.html（授权回调页） #

<!DOCTYPE html>
<html>
<head>
  <title>OAuth 回调处理</title>
  <script>
    window.addEventListener('load', () => {
      const urlParams = new URLSearchParams(window.location.search);
      const authCode = urlParams.get('code');
      const error = urlParams.get('error');

      if (authCode) {
        // 发送授权码给后台脚本
        chrome.runtime.sendMessage({ type: "oauth_code", code: authCode });
      } else if (error) {
        // 通知后台授权失败
        chrome.runtime.sendMessage({ type: "oauth_error", error: error });
      }

      // 延迟关闭页面，确保消息发送完成
      setTimeout(() => window.close(), 500);
    });
  </script>
</head>
<body>
  <p>正在处理授权... 页面将自动关闭</p>
</body>
</html>

• OAuth服务商配置：必须在你的OAuth服务商控制台（比如GitHub、Google等）的授权回调URL列表里添加扩展callback.html的完整URL。开发时可在后台控制台用chrome.runtime.getURL("callback.html")打印出这个URL，复制到服务商的配置里。
• 安全验证：建议在后台的消息监听里添加origin验证，比如检查sender.origin是否匹配扩展的URL前缀，进一步提升安全性。
• Safari特殊处理：Safari Web扩展的URL格式为safari-web-extension://[扩展UUID]/callback.html，开发阶段UUID可能会变化，正式发布后可使用固定的URL，或让服务商支持前缀匹配（如果允许的话）。

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