chrome.windows.createで作られるwindowはフレームを含むのでOS毎にサイズを変えないといけない

最近、メインのOSをWindowsに移しつつあって、以前つくったChrome拡張の favurl - Chrome ウェブストア をWindowsで使ってみると、URL をツイートするwindowがうまく表示されなかった。ここでのwindowはbrowser_actionで出るpopup、つまりツールバーのアイコンをクリックしたときに出る、manifest.jsonで指定したpopupのwindowではなく、chrome.windows.create()を使って作ったwindowのことである。参考: chrome extentionのpopupを別窓で表示する。 - 脱力系日記

この拡張の場合だと、webページを右クリックして出てくるコンテキストメニューをクリックすると、

このURLをツイートするwindowが出るが、

Windowsだとheightが足りずボタンが表示されなくなっていた。

原因は、chrome.windows.createで指定するheight、widthがフレームを含んだサイズなのに、フレームの大きさがOS毎に違うからだった。異なるOSで見たときにフレームを除いた部分のサイズが変わってしまい見た目が崩壊する。フレームの大きさがOS毎に違うというのがどういうことなのかイメージしにくいが、閉じるボタンや拡大ボタンがあるバーの大きさがOS毎に異なるため、フレーム全体の大きさが変わってしまうということだ。

これにはwindowを作成する前にOSを確認し、OSによってheightとwidthを変えることで対処できる。コードは以下のようになった。

let windowHeight = 107;
let windowWidth = 450;
if (navigator.platform.indexOf("Win") != -1) {
  windowHeight = 140;
}

chrome.windows.create({
  url : 'tweet.html',
  focused : true,
  type : 'popup',
  height : windowHeight,
  width : windowWidth
});