クロムエクステンションのポップアップの幅と高さを調べるにはどうすればいいですか？

私はポップアップの幅と高さをポップアップ表示する簡単な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); 
    }; 
})();

（より伝統的なjavascriptのように単純化）

popup.jsは

/* 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>

ポップアップ。JS

出典

2016-08-21 Dmitry

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

解決：#infoSectionがそれに配置されている情報を収容するために拡張するため

#infoSectionにテキストを追加するには、ビューポートのサイズを変更します。問題を解決する方法の1つは、#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

クロムエクステンションのポップアップの幅と高さを調べるにはどうすればいいですか？

答えて

関連する問題