用于多显示器和全屏的 Firefox Web 扩展 APIS

Question

Firefox Quantum 最终于 2017 年 11 月 14 日发布。引自此link：

In the past, you could develop Firefox extensions using one of three different systems: XUL/XPCOM overlays, bootstrapped extensions, or the Add-on SDK. By the end of November 2017, WebExtensions APIs will be the only way to develop Firefox extensions, and the other systems will be deprecated.

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

它的想法很简单。如果检测到两个或更多屏幕，则每次启动的 Firefox 都会以全屏模式为每个监视器打开一个新的 window。我可以全屏显示，但在打开另一台显示器并检测连接了多少台显示器时遇到问题。

使用 browser.windows API 创建另一个新标签，这里是一些片段代码：

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);
    });

  });
});

显然，我上面的解决方案是针对两个显示器进行硬编码并将 left 参数设置为 1366 像素，因此如果屏幕分辨率不等于 1366x768 或超过 1366x768，则此解决方案将无法正常工作连接了两个显示器。

因此，是否有任何 API 或更好的方法来检测连接了多少台显示器并检查它们的分辨率？ Web Extension APIs 是否具有检测多个监视器和分辨率值的功能？如果没有，可能的解决方法是什么？

Answer 1

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

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

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

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

screen.width - https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
screen.height - https://developer.mozilla.org/en-US/docs/Web/API/Screen/height

Firefox 甚至提供读取当前显示器相对于所有其他显示器的位置的能力。如果您有两个显示器并且当前屏幕实际上位于另一个屏幕的右侧，那么 非标准 ^Firefox-only screen.left 属性有一个非零值。

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

注意：当 privacy.resistFingerprinting 首选项在 Firefox 中打开时，上述所有 APIs return 虚拟值。不过，您仍然可以通过 chrome.windows.get 扩展程序 API 查询 window 大小和位置。

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

`manifest.json`

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

`background.js`

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

`display.html`

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

`display.js`

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 并非特定于扩展程序。您还可以运行以下代码段并移动 window 以查看值。

<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 扩展 APIS

Firefox Web Extensions APIS for Multiple Monitor and Full Screen

javascript

firefox

multiple-monitors

firefox-addon-webextensions

`manifest.json`

`background.js`

`display.html`

`display.js`