Firefox扩展如何创建类移动端小窗口以适配页面布局？

我正在开发一款Firefox浏览器扩展，核心功能之一是在小尺寸的新浏览器窗口中打开链接以预览目标页面，创建窗口的代码如下：

browser.windows
    .create({
        url: message.url,
        width: 400,
        height: 600,
        type: "popup",
        incognito: false,
    })
    .then((w) => ...)

目前遇到的问题：新窗口加载页面后，部分适配小屏幕的页面出现内容溢出，但在Firefox响应式设计模式（快捷键Ctrl+Shift+M）中打开时，页面会切换为正确的移动端优化布局。以谷歌搜索结果页为例可复现：

• 手动调整浏览器窗口至400×600尺寸，页面出现底部滚动条及内容溢出；
• 打开开发者工具切换至移动端布局（或按Ctrl+Shift+M），页面正常显示适配后的布局。

推测这类页面并非仅检测窗口内部宽度，而是检测屏幕尺寸或User-Agent请求头。已尝试以下方案但无效：

• 查阅windows.create方法、窗口及标签页API文档，未找到相关配置；
• 修改目标页面的meta viewport标签；
• 程序化调整窗口大小；
• 尝试修改只读的screen属性（运行时无法替换）。

请问在浏览器扩展环境中，是否有办法创建类移动端行为的窗口，或替换请求的User-Agent头，通过其他方式让这类页面在桌面端小窗口中正常显示对应布局？

1. 替换请求的User-Agent头 #

使用Firefox的webRequest API拦截目标页面的请求，替换为移动端UA，让页面认为是移动设备访问。

示例代码：

// 在manifest.json中声明权限："webRequest", "webRequestBlocking", "<all_urls>"
browser.webRequest.onBeforeSendHeaders.addListener(
    (details) => {
        // 仅针对预览窗口的标签页（可通过存储创建窗口时的tab.id过滤）
        if (details.tabId === targetTabId) {
            const headers = details.requestHeaders.filter(header => header.name.toLowerCase() !== 'user-agent');
            headers.push({
                name: 'User-Agent',
                value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1'
            });
            return { requestHeaders: headers };
        }
    },
    { urls: ["<all_urls>"] },
    ["blocking", "requestHeaders"]
);

2. 注入脚本模拟移动端视口与屏幕属性 #

通过content script注入脚本，修改页面的视口配置，同时覆盖screen对象的属性 getter（绕过原生只读限制）。

示例代码：

// 注入到目标页面的脚本
(function() {
    // 强制设置移动端视口
    const viewport = document.querySelector('meta[name="viewport"]');
    if (viewport) {
        viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
    } else {
        const meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
        document.head.appendChild(meta);
    }

    // 模拟移动端屏幕尺寸
    Object.defineProperties(window.screen, {
        width: { get: () => 400 },
        height: { get: () => 600 },
        availWidth: { get: () => 400 },
        availHeight: { get: () => 600 }
    });

    // 触发resize事件，让页面重新计算布局
    window.dispatchEvent(new Event('resize'));
})();

3. 结合Firefox DevTools协议（进阶方案） #

如果上述方法无效，可使用browser.debugger API连接目标标签页，通过DevTools协议强制开启响应式设计模式。

示例代码：

// 在manifest.json中声明权限："debugger"
browser.debugger.attach({ tabId: targetTabId }, "1.3", () => {
    browser.debugger.sendCommand(
        { tabId: targetTabId },
        "Emulation.setDeviceMetricsOverride",
        {
            width: 400,
            height: 600,
            deviceScaleFactor: 1,
            mobile: true,
            fitWindow: false
        }
    );
});

注意：使用debugger权限需要用户授权，且会触发浏览器调试提示，需在扩展说明中告知用户。

内容的提问来源于stack exchange，提问作者Евгений Лёзин