window.getScreenDetails() in Chrome Extension?

214 views Asked by At

I want to write a Chrome extension that will allow me to manage Chrome windows (and tabs) on multiple screens, from a popup. I've read about the window.getScreenDetails(), in particular from the articles at:

It all works fine, until I try to make use of it in the popup.js attached to my popup.html. At no stage does the browser ask for permissions for windowManagement. I also find no explicit permission (in the Chrome Extension Dev docs) that I can set in the extension's manifest.json

Is this usable at all for extensions?

Here is my example:

const button = document.getElementById("btnQuery");
button.addEventListener("click", async () => {
    screenDetails();
});


async function screenDetails() {
    const screens = await getPermissionAndScreenDetails();
    if (screens != null && window.screen.isExtended) {
        console.log("Multiple screens detected");

        try {
            console.log(screens);
        } catch (err) {
            console.error(err);
        }

    } else {
        console.log("Single screen detected (or permission not granted)");
    }
}


async function getPermissionAndScreenDetails() {
    if ('getScreenDetails' in window) {
        try {
            const permission = await getWindowManagementPermissionState();
            console.log(permission);
            if (permission !== 'denied') {
                try {
                    screens = await window.getScreenDetails();
                    console.log("Screens", screens);
                    return screens;
                } catch (e) {
                    console.error(e);
                    return null;
                };
            } else {
                return null;
            }
        } catch (e) {
            console.error(e);
            return null;
        }
    } else {
        return null;
    }
}

async function getWindowManagementPermissionState() {
    let state;
    // The new permission name.
    try {
        ({ state } = await navigator.permissions.query({
            name: "window-management",
        }));
    } catch (err) {
        if (err.name !== "TypeError") {
            return `${err.name}: ${err.message}`;
        }
        // The old permission name.
        try {
            ({ state } = await navigator.permissions.query({
                name: "window-placement",
            }));
        } catch (err) {
            if (err.name === "TypeError") {
                return "Window management not supported.";
            }
            return `${err.name}: ${err.message}`;
        }
    }
    return state;
}

The console.log(permission) shows "prompt". window.getScreenDetails() never completes (but no error is thrown either).

The few times I've seen an error, it's "DOMException: Transient activation is required to request permission."

0

There are 0 answers