彈出視窗尺寸

​

瀏覽器實際套用的規則

• 彈出視窗會撐大到剛好容納你文件算繪後的尺寸。
• Chromium 系瀏覽器把彈出視窗限制在最大 800 x 600 px、最小 25 x 25 px。
• Firefox 採用同樣的 800 x 600 px 上限。
• 超出最大值的內容會出現捲軸，彈出視窗本身絕不會超過這個上限繼續變大。
• 沒有任何 API 可以直接設定彈出視窗的尺寸。chrome.windows 這組 API 調整的是瀏覽器視窗，而不是 action 彈出視窗。

​

基準寫法

/* popup.css */
html,
body {
  margin: 0;
}

body {
  width: 360px;
  min-height: 120px;
  max-height: 600px;
  overflow-x: hidden;
  box-sizing: border-box;
}

​

會讓彈出視窗跑版或跳動的陷阱

​

視區單位

​

百分比高度

​

較晚載入的內容會改變彈出視窗尺寸

• 為圖片設定明確的 width 與 height 屬性。
• 用 min-height 骨架為非同步區塊預留空間。
• 盡可能讓初始算繪維持同步，把資料填入已經定好尺寸的容器中。

​

捲軸閃現

​

縮放會改變實際生效的上限

​

Firefox 注意事項

• Firefox 需要在 body（或一個固定寬度的根元素）上給出寬度，否則未受約束的彈出視窗可能算繪成塌陷狀態，或呈現意料之外的寬度。
• 由於 Manifest V3 移除了 browser_style，彈出視窗的所有樣式都由你自己負責。請自備一套基礎樣式。

​

Safari 注意事項

​

對彈出視窗尺寸除錯

npx extension@latest dev

​

快速檢查清單

• 在 body 上設定固定的 width，落在 320 到 400 px 之間。
• min-height 使用像素值，不要用 vh，也不要用百分比高度。
• 為圖片與非同步區塊預先定好尺寸。
• 保持在 800 x 600 的上限之內，並為縮放留出餘裕。
• 測試 Chrome、Firefox 與 Safari 的建置，上限雖然共通，算繪結果卻各有差異。