开发带Google OAuth2登录的Chrome扩展时授权页面加载失败求助

核心问题：生成的OAuth URL包含无效空格 #

你在create_oauth2_url函数里用模板字符串构建URL时，每行末尾的换行会被解析为空格，导致URL格式完全错误。Chrome的launchWebAuthFlow无法识别带空格的URL，因此抛出"Authorization page could not be loaded"错误，最终返回null的redirect_url。

比如你生成的URL实际是：

https://accounts.google.com/o/oauth2/v2/auth ?client_id=xxx &response_type=id_token ...

注意auth与?之间、&前后的空格，这些空格直接破坏了URL结构。

修复步骤 #

1. 修正OAuth URL的构建方式 #

删除模板字符串里的换行，确保URL是连续的无空格字符串：

function create_oauth2_url(){
    let nonce = encodeURIComponent(Math.random().toString(36).substring(2 , 15) + Math.random().toString(36).substring(2 , 15));
    let url = 
    `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&response_type=${RESPONSE_TYPE}&redirect_uri=${REDIRECT_URI}&state=${STATE}&scope=${SCOPE}&prompt=${PROMPT}&nonce=${nonce}`;

    console.log(url);
    return url;
}

2. 验证Google Cloud控制台配置 #

确保以下配置完全匹配：

• 在Google Cloud控制台的OAuth 2.0客户端ID设置中，添加https://<你的扩展ID>.chromiumapp.org作为已授权的重定向URI
• manifest.json中的key值必须和Google Cloud控制台生成客户端ID时使用的公钥一致（可通过Chrome扩展管理页面的「打包扩展程序」获取正确key）

3. 检查基础配置 #

• 确认manifest.json已声明"identity"权限
• 重定向URI中的<EXT_ID>必须和Chrome扩展管理页面显示的扩展ID完全一致（需开启开发者模式查看）

额外调试建议 #

• 调用launchWebAuthFlow前，打印生成的URL并复制到浏览器地址栏，确认无空格且能正常跳转
• 在回调中监听错误详情，便于定位问题：

chrome.identity.launchWebAuthFlow({
    url : u,
    interactive : true
} , function(redirect_url){
    if(chrome.runtime.lastError){
        console.error("详细错误信息:", chrome.runtime.lastError.message);
        return;
    }
    console.log("redirect_URL : " + redirect_url);
    sendResponse("Success");
});

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