Chrome扩展OAuth登录遇Error 400：自定义URI方案不支持求助

问题核心原因 #

你碰到的Error 400: invalid_request - Custom URI scheme is not supported on Chrome apps，本质是Google Cloud控制台的OAuth客户端配置不符合Chrome扩展的要求——哪怕你已经匹配了扩展ID，客户端类型或重定向URI的错误仍会触发这个问题。

修复步骤 #

1. 确认OAuth客户端类型
   登录Google Cloud控制台，找到你的OAuth 2.0客户端ID，必须确保客户端类型是Chrome 应用，而非Web应用、桌面应用等其他类型。选错类型会直接导致Chrome的identity API无法正确处理重定向逻辑。

2. 检查重定向URI格式
   Chrome扩展的重定向URI必须严格遵循格式：chrome-extension://[你的扩展ID]/，注意末尾的斜杠/不能省略，且扩展ID要和当前加载的扩展ID完全一致（包括开发者模式下的临时ID或打包后的固定ID）。

3. 更新配置并重新加载扩展
   修改客户端配置后，重新生成client_id并替换到manifest.json的oauth2.client_id字段中，最后在Chrome扩展管理页面重新加载你的扩展。

替代方案：手动用chrome.identity.launchWebAuthFlow实现OAuth #

如果上述方法仍无法解决，可以绕过内置的getAuthToken，手动实现完整的OAuth流程：

1. 确保manifest已有identity权限 #

"permissions": [
    "downloads",
    "storage",
    "activeTab",
    "contextMenus",
    "identity"
],

2. 实现登录函数 #

const signInWithGoogle = async () => {
    const clientId = "你的OAuth客户端ID";
    const scopes = ["https://www.googleapis.com/auth/userinfo.email"];
    const redirectUri = chrome.identity.getRedirectURL();
    
    // 构造授权URL
    const authUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");
    authUrl.searchParams.set("client_id", clientId);
    authUrl.searchParams.set("response_type", "code");
    authUrl.searchParams.set("redirect_uri", redirectUri);
    authUrl.searchParams.set("scope", scopes.join(" "));
    authUrl.searchParams.set("access_type", "offline"); // 可选，用于获取刷新令牌

    try {
        // 打开授权页面获取授权码
        const authCode = await chrome.identity.launchWebAuthFlow({
            url: authUrl.toString(),
            interactive: true
        });
        
        // 用授权码交换access_token
        const tokenResponse = await fetch("https://oauth2.googleapis.com/token", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams({
                client_id: clientId,
                code: authCode.split("code=")[1], // 提取URL中的授权码
                redirect_uri: redirectUri,
                grant_type: "authorization_code"
            })
        });
        
        const tokenData = await tokenResponse.json();
        console.log("Access Token:", tokenData.access_token);
        // 可将token存储到chrome.storage中备用
    } catch (error) {
        console.error("登录失败:", error);
    }
};

注意事项 #

• 需要在Google Cloud控制台的OAuth客户端中，将chrome.identity.getRedirectURL()返回的地址添加到已授权的重定向URI列表中（客户端类型选Web应用）。
• 交换token的请求建议放在扩展的后台脚本中执行，避免在前端页面暴露客户端ID。

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