Getting the display the window I'm interacting with is in?

[Nathan Pierce]

Hi, I need to find the display the window I'm interacting with is currently in. I use await chrome.system.display.getInfo(), and this works fine for me to do displayInfo[0], but only when there is a single monitor the user has.

How do I find the displayInfo for the window I'm interacting with? I don't see that chrome window objects have any info about display.

[Nathan Pierce]

Found someone else asking for this too: https://stackoverflow.com/questions/68923353/chrome-extension-get-display-information-of-active-screen

However, I do my initial extension startup with background.js and don't want to use messaging from the content script.

[wOxxOm]

Maybe you can infer the active display by comparing its `bounds` with those returned in chrome.windows.getCurrent?

As for window.screen approach, you can use it inside an [invisible] offscreen document instead of a content script.

[Nathan Pierce]

Comparing the bounds is a GREAT IDEA! I'll give that a shot, otherwise dig into the offscreen document.

[Nathan Pierce]

The more I consider comparing, the more that won't work since some users have the exact same monitor sizes.

[wOxxOm]

I thought the secondary display's coordinates would be shifted e.g. if it's configured to be on the right of the primary display then its `left` would equal the primary display's width.

[Nathan Pierce]

Oh duh! Yeah, great bit of info. I didn't realize that was the case :)

[Nathan Pierce]

Ok, this seems to work great for my needs. The rootWindow is never 0, even when maximized, so I give it ~20px of variability for Windows since it's dumb and adds weird padding on everything. I might increase this just to be safe, but it seems to catch my test scenarios.

const rootWindow = await chrome.windows.getCurrent()

const displays = await chrome.system.display.getInfo()

const displayWithOurWindow = await displays.find(display => {

if (

rootWindow.top >= (display.bounds.top - 20) ||

rootWindow.top <= (display.bounds.top + 20) ||

rootWindow.left >= (display.bounds.left - 20) ||

rootWindow.left <= (display.bounds.left + 20)

) return display

})

if (!displayWithOurWindow) { // output debug info if there is an issue.

console.error(rootWindow)

console.error(displays)

}

if (rootWindow.state !== 'normal') { // resize it if it's maximized

await chrome.windows.update(rootWindow.id, {

top: Math.floor(displayWithOurWindow.bounds.height / 7),

left: Math.floor(displayWithOurWindow.bounds.width / 5),

width: Math.floor(displayWithOurWindow.bounds.width - (displayWithOurWindow.bounds.width / 2)),

height: Math.floor(displayWithOurWindow.bounds.height - (displayWithOurWindow.bounds.height / 3)),

state: 'normal'

})

rootWindow = await chrome.windows.getCurrent()

await generalHelpers.sleep(300) // avoids Invalid value for bounds. Bounds must be at least 50% within visible screen space.

vltWindow = await chrome.windows.create({

url: "vlt-panel/vlt-panel.html",

type: "popup",

width: storageCache['VLT_defaultPanelWidth'],

height: rootWindow.height,

top: rootWindow.top,

left: rootWindow.left - storageCache['VLT_defaultPanelWidth'],

focused: true

})

. . .

[Mark Johnston]

Another thought, if you don't want to run the risk of multiple displays / windows with the same height, is to drop a content script onto the page. The script can add a click event hander on body, or whatever other events, and report back to the extension. The extension will get the tab ID via chrome.runtime.onMessage.addListener.

[Mark Johnston]

Just saw that you don't want to "do messaging from the content script". Still probably an easier approach imo, but your call :)