CODEWITHSUNDEEP
javascriptgoogle-chrome-app
SpaceCowboy2071
SpaceCowboy2071

Reputation: 1155

Chrome App Window API Designating and Positioning with Multiple Displays

I'm creating a Chrome App for specific workstations that will have a dual monitor setup. Ideally, when the app launches I want to create two different windows (one on each monitor) that will detect and sizes themselves to fill each monitor's respective resolution.

I can't find any documentation or example on how to go about this. While I can see there's ways to detect resolution and set the position and size of the windows created in my Chrome App, there's just nothing obvious to me where I designate the monitor the window(s) should be created on.

Has anybody else tried to do this? Is there someway to do this through the Chrome App API? Or is there another solution?

Here's the documentation to the API: chrome.app.window

Thanks!

Upvotes: 1

Views: 909

Answers (1)

Xan
Xan

Reputation: 77541

When you work with multiple (non-mirrored) monitors, the OS essentially creates a "combined" coordinate space (at least as far as Chrome App coordinates work).

For instance, if you have 2 side by side 1920x1080 monitors, then one will have coordinates in the range (0,0)-(1989,1079), and the other (1920,0)-(3839,1079). Note that you can't assume they are side by side, they can be "glued" together in any touching-by-edge way, including a possible offset.

If you pass outerBounds.top/outerBounds.left properties to chrome.app.window.create, those actually refer to the combined coordinate space, not the current monitor. Chrome will likely clamp/shift what you pass to it to fit in the screen.

Now, how to detect the monitor configuration? There's an API for that, chrome.system.display (note the "system.display" permission required). It will list monitors, together the the "combined" coordinate of their top left corner and their size (including, by the way, information on "workArea" region: i.e. monitor size minus system toolbars).

Here's code that does what you describe:

chrome.system.display.getInfo((screens) => {
  screens.forEach((screen) => {
    chrome.app.window.create("app.html", {
      outerBounds: screen.workArea // It so happens it's formatted as expected
    });
  });
});

If you want the windows fullscreen/maximized, it's probably best to do so after they are created to ensure they are on the correct monitor first.

As an aside, consider that Chrome Apps are being deprecated.

Upvotes: 3

Related Questions