Chrome扩展Popup中使用window.getScreenDetails()的权限问题

问题背景 #

我想开发一款Chrome扩展，通过弹窗管理多屏幕上的Chrome窗口及标签页，选用了window.getScreenDetails() API。在普通网页环境下使用正常，但在扩展的popup.js中调用时遇到以下问题：

• 浏览器从未弹出windowManagement权限请求
• 在Chrome扩展开发文档中找不到对应可配置的manifest权限
• 控制台打印权限状态为prompt，但调用window.getScreenDetails()始终无响应，偶尔抛出错误：DOMException: 需要临时激活才能请求权限。

示例代码 #

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;
}

核心疑问 #

window.getScreenDetails() API是否可以在Chrome扩展中使用？如果可以，该如何解决当前权限请求无响应的问题？

首先明确：window.getScreenDetails() API可以在Chrome扩展中使用，但受限于扩展上下文的限制，不能直接在popup中完成权限请求和API调用。

问题原因 #

1. Popup上下文限制：Chrome扩展的popup属于临时弹窗，浏览器限制其显示权限请求弹窗；同时window.getScreenDetails()需要临时激活状态（用户主动交互触发的上下文），但popup的交互上下文无法满足权限弹窗的触发条件。
2. 无需manifest配置权限：当前Chrome扩展中不需要在manifest.json中声明window-management权限，该权限属于网页范畴，通过代码动态请求即可，但需要在合适的上下文执行。

解决步骤 #

1. 转移API调用至合适的扩展页面：
   将权限请求和API调用逻辑放在**扩展选项页（options.html）或侧栏（side panel）**中，这些页面拥有完整的网页上下文，可以正常触发权限弹窗。
   若需要在popup中使用数据，可通过chrome.storage存储屏幕信息，再从popup中读取。

2. 绑定用户主动交互触发逻辑：
   权限请求和window.getScreenDetails()调用必须直接绑定在用户点击、按键等交互事件中，不能放在异步回调或非交互触发的逻辑里，避免触发需要临时激活才能请求权限的错误。

3. 权限持久化复用：
   用户授予window-management权限后，该权限会持久化到扩展上下文，后续在background或其他扩展页面中可直接调用API，无需再次请求。

优化代码示例（选项页+popup） #

• options.js（处理权限请求和数据存储）：

document.getElementById('grantPermission').addEventListener('click', async () => {
    try {
        const screens = await window.getScreenDetails();
        await chrome.storage.local.set({ screenDetails: JSON.stringify(screens) });
        alert('权限已授予，屏幕信息已保存');
    } catch (err) {
        console.error(err);
    }
});

• popup.js（读取存储的数据）：

document.getElementById('btnQuery').addEventListener('click', async () => {
    const { screenDetails } = await chrome.storage.local.get('screenDetails');
    if (screenDetails) {
        console.log('屏幕信息:', JSON.parse(screenDetails));
        // 执行窗口管理逻辑
    } else {
        alert('请先在扩展选项页授予权限');
        chrome.runtime.openOptionsPage();
    }
});

内容的提问来源于stack exchange，提问作者Wabiloo