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

Question

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

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

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

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

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

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

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

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

如何从 popup.html 中获取浏览器的 height/width？

Answer 1

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

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

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

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

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

How can I detect the browser screensize from inside extension popup