如何从扩展弹出窗口中检测浏览器屏幕大小

Question

我正在开发一个扩展程序。该扩展程序使用 popup.html 和 popup.js。

我的清单加载了以下权限：

"permissions": [
  "activeTab",
  "tabs",
  "storage"
] 

我目前没有使用任何后台脚本。

我试图在加载和调整大小时检测浏览器屏幕大小。我试过使用

window.addEventListener('resize', function(e) window.innerWidth 和 window.outerWidth

我也尝试了其他几种方法，但无论我尝试什么，返回的值都是弹出窗口的高度和宽度，而不是整个浏览器窗口。由于此浏览器调整大小也未检测到，因为实际弹出窗口未随浏览器调整大小。

最后一点：我使用的是纯 js 而不是 jquery，所以 jquery 解决方案对我没有帮助。

如何从 popup.html 中获取浏览器的高度/宽度？​​

Answer 1

弹出窗口是一个与网页无关的单独窗口，因此 window 指的是弹出窗口的窗口。

在弹出脚本中使用 chrome.windows.getCurrent API：

chrome.windows.getCurrent(wnd => {
  console.log(wnd);
});

返回的对象不是 JS window，而是与 chrome API 不同的类型，有关详细信息，请参阅上面链接的文档。和往常一样，回调是异步的，因此应该在内部使用该值。

还要注意，由于弹出窗口是一个单独的窗口，console.log 将打印在弹出窗口的开发工具中：在弹出窗口内右键单击并在菜单中选择“检查”。在 Firefox 中为 slightly more complicated。