This page was translated from English by the community. Learn more and join the MDN Web Docs community.
Пользовательский интерфейс
У расширений есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется расширенной функциональностью. Все они перечислены ниже, с инструкцией как использовать в своём расширении каждый из них.
Примечание: Советы как с помощью этих элементов пользовательского интерфейса (UI) обеспечить отличное взаимодействие человека с программой вы найдёте в статье User experience best practices.
| Элемент UI | Назначение | Как выглядит? |
|---|---|---|
| Кнопка на панели инструментов | Кнопка на панели инструментов доступна изо всех вкладок. Реакцию на нажатие кнопки обеспечивает расширение. | [画像:Example of a WebExtension toolbar button] |
| ~~Browser toolbar button with a popup~~ | ~~Кнопка со всплывающим окном на панели инструментов браузера, которая открывается при нажатии. Всплывающее окно определяется в документе HTML, который обрабатывает взаимодействие пользователя.~~ | ~~[画像:Example of a WebExtension toolbar button with a popup]~~ |
| Кнопка в адресной строке | В отличие от панели инструментов, в адресной строке кнопка должна появляться только рядом с адресом предназначенной для неё страницы. | [画像:Example showing an address bar button (page action)] |
| Всплывающие окна | При нажатии на кнопку всплывает (popup) web-страница с органами управления. | [画像:Example of a popup on the address bar button] |
| Контекстное меню | Органы управления могут быть упорядочены в ветвящейся структуре контекстных меню браузера. | |
| Боковая панель | В боковой панели рядом с интернет-сайтом открывается web-страница с интерфейсом пользователя. Человек может её закрыть и открыть когда в ней появится потребность. | [画像:Example of a WebExtension's sidebar] |
| Страница настройки дополнения | Страница пользовательских настроек доступна из меню управления дополнениями единообразно для всех расширений. | [画像:Example showing the options page content added in the favorite colors example.] |
| Дополнительные веб-страницы | Некоторые варианты содержимого (например, справку или форму обратной связи) удобнее расположить на дополнительной web-странице, которая открывается в собственной вкладке или окне. | [画像:Example of a simple bundled page displayed as a detached panel.] |
| Уведомления | Пользователю можно сообщить что-либо средствами уведомления, предусмотренными в ОС. Расширение отреагирует когда уведомление будет либо прочитано пользователем, либо скрыто (явным решением человека или логикой программы) так и оставшись непрочитанным. | [画像:Example notification from a WebExtension] |
| Угадывание адреса по мере ввода | Предлагать настраиваемые варианты адресной строки при вводе пользователем ключевого слова. | [画像:Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.] |
| Панели инструмента разработчика | Вкладка со связанным HTML-документом, который отображается в инструментах разработчика браузера. | [画像:New panel tab in the Developer Tools tab bar] |
В следующих руководствах приведены пошаговые инструкции по созданию некоторых из этих параметров пользовательского интерфейса: