Chrome extension get display information of active screen

Question

I am creating a chrome extension that can fetch display information [ screen-dimension ] on click-on extension. and I got success in it using, following API

chrome.system.display.getInfo();

This API is giving information all attached displays [ That's really great tho], but what I actually want is, I want to get display information of that screen on which my chrome browser is open.

e.g I have screens, screen-one : 1980 * 1280, screen-two : 1680 * 980,

now if my chrome browser window is open on screen-two then the info I want is 1680 * 980, and if my chrome browser window is open on screen-one then the info I want is 1980 * 1280.

Documents Is used https://developer.chrome.com/docs/extensions/reference/system_display/

I have read the document, maybe I am missing something. So please help me to identify what I am missing here or where I can improve myself

Thanks

Answer 1

I haven't found any accurate solution using chrome extension API.

But, The approach I used is,

I have created a content script that reads the window object of the active screen and gives me the dimension of that screen by sending messages to my chrome extension.

// ContentScript.ts

chrome.runtime.onMessage.addListener((request, _sender, response) => {
        const {
            screen: { height, width },
            innerHeight,
            innerWidth,
            devicePixelRatio,
        } = window;

        const displayInfo = {
            height: height * devicePixelRatio,
            width: width * devicePixelRatio,
            tabHeight: innerHeight,
            tabWidth: innerWidth,
        };

        if (request.requestType === 'getDisplayInfo' && displayInfo) {
            response(displayInfo);
        }
    });

Thanks