弹出窗口尺寸

​

浏览器实际应用的规则

• 弹出窗口会撑大到刚好容纳你文档渲染后的尺寸。
• 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 的构建，上限虽然一致，渲染却各有差异。