如何在浏览器扩展popup.html中加载用户指定的HTTPS认证页面？

方案1：定制化小型弹窗加载移动端视图 #

不用打开全屏新标签页，而是创建一个接近popup尺寸的小型弹窗，加载目标服务的移动端页面，体验更贴近扩展内操作：

• 用户输入服务器URL后，调用浏览器扩展API创建指定大小的popup窗口（Chrome用chrome.windows.create，Firefox用browser.windows.create），参数设置type: "popup"，同时指定窗口宽高（比如375x667，模拟手机尺寸）
• 加载URL时，给请求加上移动端User-Agent或viewport参数，强制服务返回移动端视图
• 用tabs.onUpdated监听这个弹窗内的URL变化，一旦检测到包含Auth密钥的回调地址，直接提取密钥
• 提取完成后立即关闭这个小型弹窗

这个方案兼容性拉满，Chrome和Firefox都支持，不需要服务端做任何适配，只是把原来的新标签页换成了更紧凑的弹窗，体验流畅度提升明显。

方案2：利用浏览器身份验证API（OAuth2场景） #

如果你的目标服务支持OAuth2协议，直接用浏览器扩展提供的身份验证API，原生支持内嵌授权窗口：

• 让用户输入服务器的OAuth2授权端点、客户端ID等必要信息（如果服务允许动态配置）
• 调用Chrome的chrome.identity.launchWebAuthFlow或Firefox的browser.identity.launchWebAuthFlow，传入授权URL
• 这个API会弹出一个内置的授权窗口，加载目标服务的授权页面，完成验证后直接返回授权码或令牌到扩展
• 用返回的凭证完成后续身份验证流程

这种方式是浏览器官方推荐的安全方案，完全规避XSS风险，而且授权窗口的体验和扩展内操作无缝衔接。

方案3：Chrome专属WebView标签（Manifest V3） #

如果只需要兼容Chrome桌面版，Manifest V3支持webview标签，可以直接在popup中嵌入页面：

• 在扩展manifest中声明"webview"权限，以及目标HTTPS域名的host_permissions（如果需要）
• 在popup.html中添加<webview>标签，设置宽高为popup的尺寸
• 用户输入URL后，设置webview的src为目标URL，同时配置useragent为移动端UA，强制加载移动端视图
• 通过webview的loadstop事件监听页面加载完成，注入脚本监听URL变化或提取页面中的Auth密钥，再通过消息传递机制把密钥传给popup
• 注意：WebView有严格的安全策略，必须加载HTTPS页面，且部分敏感操作需要额外配置权限

这个方案是最接近“扩展内直接加载视图”的需求，但仅支持Chrome，且依赖Manifest V3。

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