如何让chrome.windows.create创建的窗口显示在浏览器所在的同一显示器上

问题根因 #

你当前的坐标计算仅基于浏览器窗口的内部尺寸做偏移，没有叠加该浏览器窗口在系统桌面的全局坐标，导致弹窗最终位置是相对于主显示器左上角计算的，自然无法跟随触发窗口所在的显示器。
Chrome 提供的chrome.windows接口返回的窗口对象原生携带left、top属性，代表该窗口左上角在系统桌面的全局坐标，已适配 Mac 的自定义多屏排列逻辑，无需自行做复杂的显示器像素换算。

修复方案 #

1. 先在扩展的manifest.json中声明windows权限，确保可以正常获取窗口坐标属性：

{
  "permissions": ["windows"]
}

2. 修改弹窗位置计算逻辑，将浏览器窗口的全局坐标叠加到偏移量上：

chrome.windows.getCurrent((tabWindow) => {
    const popupWidth = 400;
    const popupHeight = 400;
    // 计算相对于浏览器窗口内部的偏移
    const innerLeftOffset = (tabWindow.width / 2) - (popupWidth / 2);
    const innerTopOffset = (tabWindow.height / 3) - (popupHeight / 2); 
    // 叠加窗口全局坐标得到弹窗实际位置
    const popupLeft = tabWindow.left + Math.round(innerLeftOffset);
    const popupTop = tabWindow.top + Math.round(innerTopOffset);

    const infoPopupUrl = "someurl";

    chrome.windows.create({
        url: chrome.runtime.getURL(infoPopupUrl),
        type: "popup",
        width: popupWidth,
        height: popupHeight,
        left: popupLeft,
        top: popupTop,
        focused: true
    });
});

可选优化（避免弹窗超出屏幕边界） #

如果需要避免浏览器窗口位于屏幕边缘时弹窗部分超出显示范围，可以调用chrome.system.display.getInfo接口获取所有显示器的边界信息，对最终的popupLeft、popupTop做边界修正，该接口需要额外声明system.display权限。

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