弹出窗口

弹出窗口是与 工具栏按钮 或 地址栏按钮 相关联的对话框。 本页描述了弹出窗口的通用信息，包括指定弹出窗口、调试弹出窗口、调整弹出窗口大小和设计弹出窗口，以及一些使用示例。

Page action pop-up example with three options: kittens, puppies, and reset.

当用户点击按钮时，将显示弹出窗口。 当用户点击弹出窗口外部的任何位置时，弹出窗口将关闭。 可以通过在弹出窗口中运行的脚本中调用 window.close() 来以编程方式关闭弹出窗口。 但是，您无法通过扩展的 JavaScript 以编程方式打开弹出窗口；它只能在响应用户操作时打开。

您可以使用清单 V2 中的 "_execute_browser_action" 和 "_execute_page_action" 快捷方式，以及清单 V3 中的 "_execute_action" 和（在支持的情况下）"_execute_page_action" 快捷方式来定义打开弹出窗口的键盘快捷方式。 请参阅清单文件 manifest.json 中的 commands 键的特殊快捷方式文档。

指定弹出窗口

弹出窗口被指定为一个 HTML 文件，该文件可以像普通网页一样包含 CSS 和 JavaScript 文件。 但是，与普通网页不同的是，JavaScript 可以使用扩展程序具有 权限 的所有 WebExtension API。

每次显示弹出窗口时都会加载弹出窗口的文档，每次关闭弹出窗口时都会卸载该文档。

HTML 文件包含在扩展程序中，并作为 browser_action 或 page_action 键的一部分，在 manifest.json 中使用 "default_popup" 指定。

json
  "browser_action": {
    "default_icon": "icons/beasts-32.png",
    "default_title": "Beastify",
    "default_popup": "popup/choose_beast.html"
  }

弹出窗口具有内容安全策略，该策略限制了它们可以加载资源的来源，并禁止某些不安全的做法，例如使用 eval()。 有关更多详细信息，请参阅 内容安全策略。

调试弹出窗口

您可以使用附加组件调试器调试弹出窗口的标记和 JavaScript，但您需要启用“禁用弹出窗口自动隐藏”功能，以防止在您点击弹出窗口外部时弹出窗口隐藏。 阅读有关调试弹出窗口的信息。

弹出窗口会自动调整大小以适应其内容。 用于此的算法可能因浏览器而异。

在 Firefox 中，大小是在显示弹出窗口之前计算的，并且在 DOM 发生变动后，每秒最多计算 10 次。 对于严格模式文档，大小是根据 <body> 元素的布局大小计算的。 对于怪异模式，则是根据 <html> 元素计算的。 Firefox 会计算该元素内容的首选宽度，将其重新流向该宽度，然后调整大小以消除垂直滚动。 如果适合用户的屏幕，它将最多扩展到 800x600 像素 的大小。（在 Firefox 60 之前 它只有 680 像素。） 如果用户 将扩展程序的按钮移动到菜单 或它出现在工具栏溢出中，则弹出窗口会出现在菜单面板中，并被赋予固定宽度。

在 CSS 中设置弹出窗口 width 时，您应该在 <body> 中设置它，而不是在 :root 中设置它。

在 Firefox Android 57 中，弹出窗口会以新标签页中普通页面的形式显示。

有关如何设计弹出窗口的网页以匹配 Firefox 样式的详细信息，请参阅 Acorn 设计系统。

示例

GitHub 上的 webextensions-examples 存储库包含 beastify 示例，该示例实现了带有弹出窗口的浏览器操作。