用户界面

使用 WebExtension API 的扩展提供了一些用户界面选项，以便其功能可以提供给用户。以下总结了这些选项，本节将对每个用户界面选项进行更详细的介绍。

注意：有关使用这些 UI 组件在扩展中创建出色用户体验的建议，请参阅 用户体验最佳实践 文章。

UI 选项 描述 示例
工具栏按钮 (浏览器操作) 浏览器工具栏上的一个按钮，点击时会向扩展发送事件。默认情况下，该按钮在所有标签页中可见。 Example showing a toolbar button (browser action).
带有 弹出窗口 的工具栏按钮 浏览器工具栏上按钮上的一个弹出窗口，点击按钮时打开。弹出窗口在处理用户交互的 HTML 文档中定义。 Example of the pop-up on a toolbar button
地址栏按钮 (页面操作) 浏览器地址栏上的一个按钮，点击时会向扩展发送事件。默认情况下，该按钮在所有标签页中隐藏。 Example showing an address bar button (page action)
带有 弹出窗口 的地址栏按钮 浏览器地址栏上按钮上的一个弹出窗口，点击按钮时打开。弹出窗口在处理用户交互的 HTML 文档中定义。 Example of a popup on the address bar button
上下文菜单项 浏览器的一个或多个上下文菜单上的菜单项、复选框和单选按钮。此外，菜单可以通过添加分隔符来进行结构化。点击菜单项时，会向扩展发送事件。 Example of content menu items added by a WebExtension, from the context-menu-demo example
侧边栏

一个 HTML 文档，显示在网页旁边，可以选择为每个页面提供独特的内容。侧边栏在安装扩展时打开，然后遵循用户的侧边栏可见性选择。侧边栏内的用户交互由其 HTML 文档处理。

 Example of a sidebar
选项页面 一个页面，允许您定义扩展的偏好设置，您的用户可以更改这些偏好设置。用户可以从浏览器的附加组件管理器访问此页面。 Example showing the options page content added in the favorite colors example.
扩展页面 使用扩展中包含的网页，在窗口或标签页中提供表单、帮助或任何其他所需内容。 Example of a simple bundled page displayed as a detached panel.
通知 通过底层操作系统的通知机制向用户显示的短暂通知。当用户点击通知或通知关闭（自动或按用户要求关闭）时，会向扩展发送事件。 Example of an extension triggered system notification
地址栏建议 当用户输入关键字时，提供自定义地址栏建议。 Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
开发者工具面板 一个带有关联 HTML 文档的标签，该文档显示在浏览器的开发者工具中。 Example of a custom panel on developer tools.

以下操作指南提供了创建其中一些用户界面选项的分步指导