如何查找Chrome擴展彈出窗口的寬度和高度？

我正在做一個簡單的練習Chrome應用程序，它顯示彈出窗口的寬度和高度。如何查找Chrome擴展彈出窗口的寬度和高度？

視覺：

清楚這些尺寸是錯誤的。

我試過許多東西他們都給予了彈出窗口的錯誤尺寸：

window.innerWidth，window.innerHeight
window.outerWidth，window.outerHeight
document.body的.clientWidth，document.body.clientHeight
document.body.offsetWidth，document.body.offsetHeight

下面是插件文件：

manifest.json的：

{ 
    "manifest_version": 2, 
    "name": "minimalChromePopupAddon", 
    "version": "0", 

    "browser_action": { 
     "default_popup": "popup.html" 
    } 
}

popup.html

<html> 
    <head> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <pre id="infoSection">hi</pre> 
    </body> 
</html>

popup.js（見片斷，如果你想有一個傳統的版本如下的代碼）

(() => { 
    'use strict'; 

    /* gets {"width": 0, "height": 0} */ 
    const getWindowSize1 =() => { 
     return { 
      width: window.innerWidth, 
      height: window.innerHeight 
     }; 
    }; 

    /* gets {"width": 1366, "height": 740} */ 
    const getWindowSize2 =() => { 
     return { 
      width: window.outerWidth, 
      height: window.outerHeight 
     }; 
    }; 

    /* gets {"width": 30, "height": 35} */ 
    const getWindowSize3 =() => { 
     return { 
      width: document.body.clientWidth, 
      height: document.body.clientHeight 
     };  
    } 

    /* gets {"width": 14, "height": 15} */ 
    const getWindowSize4 =() => { 
     return { 
      width: document.body.offsetWidth, 
      height: document.body.offsetHeight 
     };   
    }; 

    window.onload =() => {  
     const infoSection = document.getElementById('infoSection'); 
     const info = getWindowSize4();     

     infoSection.innerHTML = JSON.stringify(info, null, 4); 
    }; 
})();

個

popup.js（簡化爲更傳統的JavaScript）

/* gets {"width": 0, "height": 0} */ 
function getWindowSize1() { 
    var ret = { 
     width: window.innerWidth, 
     height: window.innerHeight 
    }; 

    return ret; 
} 

/* gets {"width": 1366, "height": 740} */ 
function getWindowSize2() { 
    var ret = { 
     width: window.outerWidth, 
     height: window.outerHeight 
    }; 

    return ret; 
} 

/* gets {"width": 30, "height": 35} */ 
function getWindowSize3() { 
    var ret = { 
     width: document.body.clientWidth, 
     height: document.body.clientHeight 
    };  

    return ret; 
} 

/* gets {"width": 14, "height": 15} */ 
function getWindowSize4() { 
    var ret = { 
     width: document.body.offsetWidth, 
     height: document.body.offsetHeight 
    };  

    return ret; 
} 

function loadListener(event) { 
    window.removeEventListener('load', loadListener); 
    var infoSection = document.getElementById('infoSection'); 
    var info = getWindowSize4();     

    infoSection.innerHTML = JSON.stringify(info, null, 4); 
} 

window.addEventListener('load', loadListener);

有人能告訴我怎麼去彈出窗口的尺寸以像素爲單位，或解釋爲什麼不能做呢？

提前致謝。

可能的答案：

顯示窗口大小的窗口中改變窗口大小以適合文本顯示，這反過來又不再對應於所述文本顯示......問題是，

解決方案：

popup.html

<html> 
    <head> 
    <script src="popup.js"></script> 
    <style> 
/* make sure that adding text to info section does not alter viewport size. */ 
#infoSection { 
    width: 150px; 
    height: 80px; 
    overflow: scroll; 
}  
    </style> 
    </head> 
    <body> 
    <pre id="infoSection">hi</pre> 
    </body> 
</html>

popup。JS

(() => { 
    'use strict'; 

    window.onload =() => { 
     const infoSection = document.getElementById('infoSection'); 
     const info = { 
      width: document.body.clientWidth, 
      height: document.body.clientHeight 
     };  

     infoSection.innerHTML = JSON.stringify(info, null, 4); 
    };  
})();

來源

2016-08-21 Dmitry

解決方案：

將文本添加到#infoSection改變視窗的大小，因爲#infoSection擴展，以適應信息被放置進去。解決此問題的一種方法是使滾動條具有固定大小#infoSection，這樣向其添加文本不會使其大小調整並更改視口。

視覺：

popup.html

<html> 
    <head> 
    <script src="popup.js"></script> 
    <style> 
/* make sure that adding text to info section does not alter viewport size. */ 
#infoSection { 
    width: 150px; 
    height: 80px; 
    overflow: scroll; 
}  
    </style> 
    </head> 
    <body> 
    <pre id="infoSection">hi</pre> 
    </body> 
</html>

popup.js

(() => { 
    'use strict'; 

    window.onload =() => { 
     const infoSection = document.getElementById('infoSection'); 
     const info = { 
      width: document.body.clientWidth, 
      height: document.body.clientHeight 
     };  

     infoSection.innerHTML = JSON.stringify(info, null, 4); 
    };  
})();

來源

2016-08-21 20:39:29 Dmitry

是的，彈出窗口大小是動態的。是不是很明顯？ – wOxxOm

是的，這只是我花了很長時間才意識到這種情況。這就是爲什麼我要做這樣的實驗，停止犯這樣的愚蠢錯誤，並且更快地認識它們。 – Dmitry

彈出尺寸還有一些不明顯的行爲。例如，一個帶有長長的h1塊的彈出窗口只擴展到某一點，然後進入下一行，所以我有一個印象，一旦知道了什麼，將窗口視口固定爲首選大小是個好習慣首選的大小是，但在那之前，發生非顯而易見的事情並不罕見。 – Dmitry

如何查找Chrome擴展彈出窗口的寬度和高度？

回答

相關問題