Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

У расширений WebExtensions есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется расширенным функционалом. Все они перечислены ниже, с инструкцией как использовать в своем расширении каждый из них.

Советы как с помощью этих элементов пользовательского интерфейса (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

В следующих руководствах приведены пошаговые инструкции по созданию некоторых из этих параметров пользовательского интерфейса:

Метки документа и участники

Внесли вклад в эту страницу: vladimir-nikotin, Shychara
Обновлялась последний раз: vladimir-nikotin,