如何设置chrome.identity.launchWebAuthFlow弹窗窗口大小？

现状说明 #

目前chrome.identity.launchWebAuthFlow并未提供直接配置弹窗窗口大小的参数，官方文档也未提及相关功能支持。即便多年前就有同类需求反馈，该功能至今仍未落地。

无效尝试总结 #

• 页面样式调整：即便完全控制认证页面，给body和html设置固定宽高的CSS样式也无法生效——弹窗的窗口尺寸由Chrome扩展框架控制，页面内部样式无法影响外层窗口大小。
• 内联脚本调用resizeTo：尝试通过内联脚本在页面加载后调用window.resizeTo()调整尺寸，会触发Content Security Policy（CSP）限制；即使在manifest中添加unsafe-inline，认证窗口仍会报错。

临时解决方案 #

可以通过监听Chrome窗口创建事件，在认证弹窗出现后立即调整其尺寸和位置，代码示例如下：

function resizeAuthWindowOnCreated(width: number, height: number) {
    chrome.windows.onCreated.addListener(function resizePopup(win) {
        if (win && win.id) {
            // 获取当前认证窗口位置，默认居中屏幕
            const {
                top: t = Math.round(window.screen.height / 2),
                left: l = Math.round(window.screen.width / 2),
                width: w = 0,
                height: h = 0
            } = win;

            // 调整窗口尺寸并重新居中
            const opts = {
                top: Math.round((t + h / 2) - height / 2),
                left: Math.round((l + w / 2) - width / 2),
                width,
                height,
            };

            chrome.windows.update(win.id, opts);
            chrome.windows.onCreated.removeListener(resizePopup);
        }
    }, { windowTypes: ['popup'] })
}

使用方式：

resizeAuthWindowOnCreated(550, 700);

const response = await chrome.identity.launchWebAuthFlow({
    url: authURL,
    interactive: true
});

该方案通过chrome.windows.onCreated监听弹窗创建事件，再调用chrome.windows.update调整窗口参数，虽非官方原生支持方案，但可满足需求。

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