首页 > 编程语言> > javascript-用于多监视器和全屏的Firefox Web Extensions APIS

javascript-用于多监视器和全屏的Firefox Web Extensions APIS

2019-11-10 20:33:53 作者：互联网

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 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 px,因此,如果屏幕分辨率不等于1366×768或连接了两个以上的显示器,则此解决方案将无法正常工作.

因此,是否有API或更好的方法来检测连接了多少个监视器并检查其分辨率？ Web Extension API是否具有用于检测多个监视器和分辨率值的功能？如果没有,有什么可能的解决方法？

解决方法:

没有现成的扩展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

可以通过以下方式获取正在显示窗口的显示器的尺寸：

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

Firefox甚至提供了读取当前显示器相对于所有其他显示器的位置的功能.如果您有两个显示器,而当前屏幕实际上位于另一个屏幕的右侧,则非标准的仅Firefox的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

注意：在Firefox中打开privacy.resistFingerprinting首选项时,以上所有API都会返回伪值.不过,您仍然可以通过chrome.windows.get扩展API查询窗口的大小和位置.

如果创建虚拟窗口并在屏幕上四处移动,则可以使用上述API来推断有关屏幕的信息,并最终构建可用显示和尺寸的完整视图.这是打印上述信息的示例扩展.您可以单击按钮打开一个窗口,然后手动移动该窗口.
这可以通过打开一个非常狭窄的弹出窗口并使用chrome.windows.update来自动移动.如果左/上偏移量太大,则窗口将停留在屏幕边缘(例如,如果您将99999作为左偏移量传递到宽度为100px的屏幕上宽度为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并非特定于扩展.您还可以运行以下代码片段,并在窗口中四处移动以查看值.

<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,multiple-monitors,firefox-webextensions,javascript
来源： https://codeday.me/bug/20191110/2014941.html