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:
- https://developer.chrome.com/articles/window-management/#tell-us-about-the-api-design (written by @DenverCoder9)
- Can not get Multi-Screen Window Placement to work (for the example in the response)
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."