如何從擴展彈出窗口中檢測瀏覽器屏幕大小

Question

我正在做一個擴展。 該擴展使用 popup.html 和 popup.js。

我的清單加載以下權限：

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

我目前沒有使用任何后台腳本。

我正在嘗試在加載和調整大小時檢測瀏覽器屏幕大小。 我試過使用

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

我也嘗試了其他幾種方法，但無論我嘗試什么，返回的值都是彈出窗口的高度和寬度，而不是整個瀏覽器 window。 由於此瀏覽器調整大小也未檢測到，因為實際彈出窗口未使用瀏覽器調整大小。

最后說明：我使用的是純 js 而不是 jquery，所以 jquery 解決方案對我沒有幫助。

如何從 popup.html 中獲取瀏覽器的高度/寬度？

Answer 1

彈出窗口是一個單獨的 window 與 web 頁面無關，因此window指的是彈出窗口的 Z05B8C74CBD2706FBF2DEF4C1。

在彈出腳本中使用chrome.windows.getCurrent API：

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

返回的 object 不是 JS window ，而是與chrome API 不同的類型，有關更多信息，請參閱上面鏈接的文檔。 和往常一樣，回調是異步的，因此應該在內部使用該值。

另請注意，由於彈出窗口是一個單獨的 window，console.log 將打印在彈出窗口的 devtools 中：在彈出窗口內右鍵單擊，select 在菜單中“檢查”。 在 Firefox 中它 稍微復雜一些。