Chrome扩展接入Discord OAuth2时redirect_uri与popup地址配置问题

扩展popup页面固定URL格式 #

你的扩展popup页面的标准URL规则为：
chrome-extension://<你的扩展ID>/<popup文件在扩展根目录的相对路径>
举个例子：如果你的扩展ID为a1b2c3d4e5f6，根目录下的popup入口文件名为popup.html，则完整的popup地址为：
chrome-extension://a1b2c3d4e5f6/popup.html

如果要把该地址作为Discord OAuth2的redirect_uri，需要提前在Discord开发者后台的OAuth2配置页，将该完整地址添加到授权重定向URL白名单中，否则会被Discord拦截跳转请求。

你之前配置不生效的原因 #

你参考教程使用的https://<extension-id>.chromiumapp.org/是Chrome扩展官方OAuth2流程的标准回调地址，本身没有错，但需要配合chrome.identityAPI使用，不能直接用来跳转回popup页面：

1. 首先需要在manifest.json中注册identity权限：

{
  "permissions": ["identity"]
}

2. 不需要手动拼接回调地址，直接调用API获取即可，避免拼写错误：

// 直接获取官方分配的回调地址，不用自己编码拼接
const redirectUri = chrome.identity.getRedirectURL();

3. 调用launchWebAuthFlow方法触发授权流程，回调结果会直接返回到扩展上下文，不需要跳转回popup：

chrome.identity.launchWebAuthFlow({
  url: `https://discord.com/oauth2/authorize?client_id=你的Discord客户端ID&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=需要的权限列表`,
  interactive: true
}, (callbackUrl) => {
  // 从callbackUrl中提取授权码，后续完成令牌交换即可
})

额外注意事项 #

不推荐直接将popup页面作为redirect_uri使用，popup是临时生命周期页面，用户点击扩展外任意区域就会自动销毁，授权跳转过程中大概率会丢失popup上下文导致流程中断。更稳妥的方案是通过background service worker接收授权回调结果，再将结果传递给popup页面。

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