是否可以在浏览器扩展的上下文中在移动状态下创建新窗口

Question

我正在开发一个浏览器扩展（专门针对 Firefox），其中一个功能是该扩展应该在新的浏览器窗口中打开一个链接，以便预览目标页面。窗口应该相当小，就像这样创建的：

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

我遇到的问题是，结果是页面在新窗口中加载，并且一些目标页面显示溢出内容，尽管它们针对小屏幕进行了优化。如果我以响应式设计模式（对于 Firefox，为 Ctrl+Shift+M）打开此类页面，布局将更改为正确的布局（针对小屏幕进行了优化）。

您可以使用谷歌搜索结果页面检查此行为，例如：

1. 尝试手动调整浏览器窗口与结果页面的大小，您会在底部看到滑块，并且页面的某些部分溢出
2. 打开 devtools 并检查页面是否具有适合移动设备等小屏幕的布局（对于 Firefox，请按 Ctrl+Shift+M）。正如预期的那样，Google 对于这种情况有一个很好的布局。

我认为像这样的页面正在检查用户和用户代理标题的屏幕大小，而不仅仅是实际窗口的内部宽度或类似的内容。

那么，有没有办法在浏览器扩展的上下文中创建一个新窗口，并强制其行为像移动窗口，或者指示它替换请求上的用户代理标头或任何其他方法在桌面上显示此类页面很好地在一个小窗口中具有相应的布局？

我已经检查过 windows.create 方法参考、窗口和选项卡 API 参考，似乎没有办法做这样的事情。我尝试更新目标页面上的元视口标签，或以编程方式调整窗口大小，但无济于事。屏幕尺寸是只读属性，我似乎也找不到在运行时替换它的方法。

Answer 1

我找到了一个适合我的解决方案。对于任何遇到类似问题的人来说，有一个选项可以使用

webRequest.onBeforeSendHeaders

活动：

1. 拦截来自用于打开的选项卡的请求 目标网址

2. 用一些移动设备替换用户代理标头 代理以确保选项卡获得响应，就好像它是在 移动设备

           browser.webRequest.onBeforeSendHeaders.addListener(
               (details) => {
                   if (
                       details.requestHeaders &&
                       details.tabId === tab.id
                   ) {
                       for (const header of details.requestHeaders) {
                           if (
                               header.name.toLowerCase() ===
                               "user-agent"
                           ) {
                               header.value =
                                   "Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1";
                           }
                       }
                       return {
                           requestHeaders: details.requestHeaders,
                       };
                   }
               },
               { urls: ["<all_urls>"] },
               ["blocking", "requestHeaders"],
           );
   

要对给定主机使用 webRequest API，扩展程序必须具有 “webRequest”API 权限和该主机的主机权限。到 使用“阻止”功能，扩展程序还必须具有 “webRequestBlocking”API 权限。 查看更多详情

API可在后台脚本中使用。