如何找到 chrome 扩展弹出窗口的宽度和高度？答案

【问题标题】：How can I find width and height of a chrome extension popup?如何找到 chrome 扩展弹出窗口的宽度和高度？
【发布时间】：2016-08-22 04:39:29
【问题描述】：

我正在制作一个简单的练习 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（如果您想要此代码的传统版本，请参阅下面的 sn-p）

(() => {
    '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); 
    };    
})();

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

解决方案：

向#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); 
    };    
})();

【讨论】：

是的，弹出窗口是动态大小的。这不是很明显吗？
是的，但我花了很长时间才意识到情况确实如此。这就是我进行此类实验的原因，以停止犯此类愚蠢的错误并练习更快地识别它们。
弹出窗口大小也有一些不明显的行为。例如，带有较长 h1 块的弹出窗口仅扩展到某个点，然后进入下一行，所以我的印象是，一旦你知道什么，将窗口视口固定为首选大小是一个好习惯首选大小是，但在那之前，不明显的事情发生并不罕见。