打开 chrome.identity.launchWebAuthFlow 作为选项卡（Chrome 扩展）答案

【问题标题】：Open chrome.identity.launchWebAuthFlow as a tab (Chrome Extensions)打开 chrome.identity.launchWebAuthFlow 作为选项卡（Chrome 扩展）
【发布时间】：2026-01-29 15:55:01
【问题描述】：

当用户使用我的扩展程序时，我正在使用 chrome.identity.launchWebAuthFlow() 引导用户通过非 Google API 的 OAuth2。

尽管身份验证有效并且我可以有效地获取用户的身份验证令牌，但我不喜欢它完全在一个缺少浏览器 UI 和 URL 栏的新窗口中打开。

理想情况下，我将能够在扩展程序的弹出窗口中进行此 OAuth 舞蹈。如果这不起作用，那么至少能够在单独的选项卡中发生此 OAuth 事件是另一种解决方案。

现在，用户将单击扩展程序以打开弹出窗口。在弹出窗口中，有一个按钮，他们将单击该按钮来激活 OAuth。从这里，会弹出另一个窗口，但我希望它留在弹出窗口内（见上文）。

我怎样才能做到这一点？我看到很多关于它的讨论，但没有解决方案。

谢谢！

manifest.json

{
    "manifest_version": 2,
    "name": "Extension",
    "version": "0.0.1",
    "permissions": [
        "identity",
        "tabs",
        "http://*/*", 
        "https://*/*"
    ],
    "browser_action":{
        "default_icon": "icon.png",
        "default_popup" : "popup.html"
    },

    "background": {
        "scripts": ["background.js"]
    }
}

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
        if( request.message==="start_oauth"){
            chrome.identity.launchWebAuthFlow(
                {
                    "url" : "https://example.com/manage/oauth2/authorize?callback_uri="
                    +encodeURIComponent(<callback_uri>)
                    +"&client_id=" + <client_id>
                    +"&response_type=code",
                "interactive" : true
                },
                function(redirect_url){
                    var auth_token = redirect_url.substr(<callback_uri>.length+6);
                }
            );
        }
    }
);

popup.js

function startOAuth(){
    chrome.runtime.sendMessage({"message": "start_oauth"});
}
document.getElementById("login").addEventListener("click", startOAuth);

popup.html

<html>
    <body>
        <button id="login"> Click here to log in</button>
    </body>
    <script src="popup.js"></script>
</html>

【问题讨论】：

是的，这确实删除了用户可以检查他们是否登录到正确域的“安全”部分。

标签： javascript google-chrome google-chrome-extension oauth google-chrome-app

【解决方案1】：

您将无法让 OAuth 流程在弹出窗口中工作，但有一个 full walkthrough 可以使用浏览器选项卡自行控制流程。

【讨论】：

不幸的是，该演练适用于 OAuth1 并且已过时。
标签的处理将是相同的。只需将 OAuth 1 代码替换为 OAuth 2 代码即可。