问题：

Firefox Web Extensions API，用于多显示器和全屏

阎坚成

2023-03-14

火狐量子终于在2017年11月14日发布。引用此链接：

过去，您可以使用三种不同的系统之一开发Firefox扩展：XUL/XPCOM覆盖、引导扩展或附加SDK。到2017年11月底，WebExtensions API将成为开发Firefox扩展的唯一途径，其他系统将被弃用。

使用Firefox 57 Quantum和Web Extensions API，我想做一个能够在多个屏幕上运行的扩展。此扩展将用于显示多个屏幕和仪表板。

这个想法很简单。如果检测到两个或多个屏幕，每个Firefox启动后都会在全屏模式下为每个显示器打开一个新窗口。我可以做全屏，但面临的问题打开另一个显示器，并检测有多少显示器连接。

使用浏览器。windowsAPI创建另一个新选项卡，下面是一些代码片段：

getCurrentWindow().then((currentWindow) => {  
  let mirror1 = browser.windows.create({
    url: "http://172.20.12.211:8080/ivi",    
    state: "fullscreen"
  });

  mirror1.then(() => {
    browser.windows.remove(currentWindow.id);

    var updateInfo = {
      state: "fullscreen"
    };

    let mirror2 = browser.windows.create({
      url: "http://172.20.12.211:8080/ivi",    
      state: "fullscreen"
    }); 

    mirror2.then((nextWindow) => { 
      var updateInfo = {
        left: 1366
      };

      browser.windows.update(nextWindow.id, updateInfo);
    });

  });
});

显然，我上面的解决方案是硬编码的两个显示器和设置左参数为1366像素，因此，如果屏幕分辨率不等于1366x768或如果有两个以上的显示器连接，此解决方案将无法正常工作。

因此，是否有任何API或更好的方法来检测连接了多少显示器并检查其分辨率？Web扩展API是否具有检测多个监视器和分辨率值的功能？如果没有，可能的变通办法是什么？

黄俊雄

2023-03-14

没有现成的扩展API来回答您的问题，但是有足够的构建块来以其他方式回答这个问题。

当前窗口相对于显示屏的位置可通过以下方式获得：

window.screenX-https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX
window.screenY-https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY

可以通过以下方式检索显示窗口的显示器的大小：

屏幕。宽度-https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
屏幕。高度-https://developer.mozilla.org/en-US/docs/Web/API/Screen/height

sreen。左-https://developer.mozilla.org/en-US/docs/Web/API/Screen/left
sreen。顶部-https://developer.mozilla.org/en-US/docs/Web/API/Screen/top

注意：当在Firefox中打开privacy.resistFingerprint首选项时，上述所有API都会返回虚拟值。您仍然可以通过chrome.windows.get扩展API查询窗口大小和位置。

如果您创建了一个虚拟窗口并在屏幕上移动它，那么您可以使用上述API来推断有关屏幕的信息，并最终构建可用显示和大小的完整视图。下面是打印上述信息的扩展示例。你可以点击按钮打开一个窗口，然后手动移动窗口
这可以通过打开一个非常窄的弹出窗口并用chrome移动来实现自动化。窗户。更新。如果左/上偏移太大，则窗口将粘在屏幕边缘（例如，如果在1024px宽的屏幕上，将99999作为左偏移传递给宽度为100的窗口，则左偏移变为924）。

{
    "name": "Display info",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Open popup to display info"
    }
}

chrome.browserAction.onClicked.addListener(function() {
    chrome.windows.create({
        url: chrome.runtime.getURL('/display.html'),
    });
});

<meta charset="utf-8">
<body style="white-space:pre">
<script src="display.js"></script>

setInterval(function() {
    document.body.textContent =
        '\nWindow offset: ' + window.screenX + ',' + window.screenY +
        '\nScreen size  : ' + screen.width + 'x' + screen.height +
        '\nScreen offset: ' + screen.left + ',' + screen.top;
    chrome.windows.get(chrome.windows.WINDOW_ID_CURRENT, function(win) {
        document.body.insertAdjacentText('beforeend',
            '\nExtension window offset : ' + win.left + ',' + win.top);
    });
}, 200);

以上API不是特定于扩展的。您还可以运行下面的代码段并移动窗口以查看值。

<body style="white-space:pre">
<script>
setInterval(function() {
    document.body.textContent =
        '\nWindow offset: ' + window.screenX + ',' + window.screenY +
        '\nScreen size  : ' + screen.width + 'x' + screen.height +
        '\nScreen offset: ' + screen.left + ',' + screen.top;
}, 200);
</script>

Firefox Web Extensions API，用于多显示器和全屏

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档