Firefox Web Extensions APIS for Multiple Monitor and Full Screen

Question

Firefox Quantum finally released on November 14, 2017. Quoting from this 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.

Using Firefox 57 Quantum and Web Extensions APIs, I want to make an extension that is capable of running on multiple screens. This extension would be used to show multiple screens dashboards.

The idea of it was so simple. If two or more screens are detected, every Firefox starting up then opens a new window for every monitor in full screen mode. I can do full screen, but facing issues to open on another monitor and detect how many monitors are attached.

Using browser.windows API to create another new tab, here's some snippet code:

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

  });
});

Obviously, my solution above is hard-coded for two monitors and sets left parameter to 1366 px, hence this solution will not work properly if the screen resolution not equal to 1366x768 or if there are more than two monitors attached.

Thus, is there any API or better approach to detect how many monitors are attached and also check their resolution? Does Web Extension APIs have a feature for detecting multiple monitors and resolution values? If not, what are possible workarounds?

Answer 1

There are no readily available extension APIs that answer your questions, but there are enough building blocks to answer the question in an other way.

The position of the current window relative to the display is available via:

• 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

The size of the display on which the window is being displayed can be retrieved via:

• 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 even offers the ability to read the position of the current display relative to all other displays. If you have two displays and the current screen is virtually at the right of the other screen, then the non-standard ^Firefox-onlyscreen.left property has a non-zero value.

• 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

NOTE: When the privacy.resistFingerprinting preference is turned on in Firefox, all of the above APIs return dummy values. You can still query the window size and position through the chrome.windows.get extension API though.

If you create a dummy window and move it around on the screen, then you can use the above APIs to infer information about the screens, and ultimately construct a full view of the available displays and sizes. Here is a sample extension to print the above information. You can click on the button to open a window, and then manually move the window around.
This can be automated by opening a very narrow popup and move that around with chrome.windows.update. If the left/top offset is too large, then the window will stick to the edge of the screen (e.g. if you pass 99999 as a left offset to a window of width 100 on a screen that is 1024px wide, then the left offset becomes 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);

The above APIs are not specific to extensions. You can also run the following snippet and move the window around to see the values.

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