MDN wants to learn about developers like you:


为了能给用户提供在不同场景下都具有价值的功能, WebExtensions 提供了许多的用户界面选项。下面是这些选项的摘要,在本章中将会对每个选项做出更详细的说明。

UI 选项 描述 实例
浏览器工具栏按钮 工具栏上一个可点击的按钮,点击时将事件派发到附件组件上。默认情况下,这个按钮在栏位中是可见的。 Example of a WebExtension toolbar button
带有弹出面板的工具栏按钮 当这个在工具栏上的按钮被点击时,它会弹出一个面板。这个面板使用 HTML 文档编写,用于处理与用户的交互行为。 Example of a WebExtension toolbar button with a popup
 地址栏菜单条按钮 这个按钮位于浏览器地址栏菜单条,按钮被点击的时候可以派发一个事件出来。默认情况下,这个按钮在所有tab上都是隐藏的. Example showing an address bar button (page action)
带有弹出面板的地址菜单栏按钮 地址菜单栏按钮被点击时,会弹出一个弹出面板,这个弹出被定义在html文档里面。它的操作可以和用户交互。 Example of a popup on the address bar button
上下文菜单选项组 Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the add-on.

An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the add-on is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.

Example of a WebExtension's sidebar
Options page A page that enables you to define preferences for your WebExtension that your users can change. The user can access this page in the from the browser's add-ons manager. Example showing the options page content added in the favorite colors example.
Bundled web pages Use web pages included in your WebExtension to provide forms, help, or any other content required, within windows or tabs. Example of a simple bundled page displayed as a detached panel.
Notifications Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the add-on when the user clicks a notification, or when a notification closes (either automatically or at the user's request). Example notification from a WebExtension
Address bar suggestions Offer custom address bar suggestions when the user enters a keyword. Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panels A tab with an associated HTML document that displays in the browser's developer tools. New panel tab in the Developer Tools tab bar

The following how-to guides provide step-by-step guidance to creating some of these user interface options:


 此页面的贡献者: 876843240, jinnchen
 最后编辑者: 876843240,