Firefox网络扩展API支持多显示器和全屏模式

5
火狐量子版于2017年11月14日终于发布了。引用自这个链接的话:

过去,你可以使用三种不同的系统之一来开发Firefox扩展程序:XUL/XPCOM叠加、引导式扩展或Add-on SDK。到2017年11月底,Web Extensions API将成为开发Firefox扩展程序的唯一方式,而其他系统将被弃用。

使用Firefox 57 Quantum和Web Extensions API,我想开发一个能够在多个屏幕上运行的扩展程序。这个扩展程序将用于显示多个屏幕仪表板。
这个想法非常简单。如果检测到两个或更多的屏幕,则每次启动Firefox都会以全屏模式在每个监视器上打开一个新窗口。我可以全屏,但是遇到了在另一个监视器上打开并检测连接的屏幕数量的问题。
使用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或者有多于两个显示器连接,则该解决方案将无法正常工作。
因此,是否有任何API或更好的方法来检测连接了多少个显示器并检查它们的分辨率?Web扩展API是否具有检测多个显示器和分辨率值的功能?如果没有,有哪些可能的解决方法?

好问题,但据我所知,检测多个显示器是可能的。但是,您可以获取当前显示器的分辨率。值得一试的是,在当前屏幕之外生成一个窗口,然后从该新窗口内部检查screen.width。如果它在没有屏幕上,则可能会说0..如果是这样,那么您可能可以通过智能算法解决问题。请记住,显示器并不总是相邻的,它们可以几乎任意地放置。 - Forivin
1个回答

4

没有现成的扩展API可以回答您的问题,但有足够的构建模块以另一种方式回答该问题。

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

窗口所在显示器的尺寸可通过以下方式检索:

Firefox甚至提供了读取当前显示器相对于所有其他显示器的位置的功能。如果您有两个显示器,并且当前屏幕实际上位于另一个屏幕的右侧,则非标准的仅适用于Firefoxscreen.left属性具有非零值。

注意:当在Firefox中打开privacy.resistFingerprinting偏好设置时,上述所有API都返回虚假值。但是,您仍然可以通过chrome.windows.get扩展API查询窗口的大小和位置。

如果您创建一个虚拟窗口并将其移动到屏幕上,那么您可以使用上述API来推断有关屏幕的信息,并最终构建可用显示器和大小的完整视图。以下是打印上述信息的示例扩展程序。您可以单击按钮打开窗口,然后手动移动窗口。
这可以通过打开一个非常窄的弹出窗口并使用chrome.windows.update来移动它来自动化。如果左/上偏移量过大,则窗口将粘在屏幕边缘(例如,如果您向左偏移100个像素的窗口传递99999,则在宽度为1024像素的屏幕上,左偏移量将变为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不仅适用于扩展程序,您还可以运行以下代码片段并移动窗口以查看值。

<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>


@YohanesAI 我知道这已经是很久以前的事情了,但你是否找到了可行的解决方案?能否分享一下?谢谢! - Highbrainer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接