Movatterモバイル変換


[0]ホーム

URL:


  1. Mozilla
  2. Дополнения
  3. Расширения браузера
  4. Пользовательский интерфейс

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

Пользовательский интерфейс

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

Примечание:Советы как с помощью этих элементов пользовательского интерфейса (UI) обеспечить отличное взаимодействие человека с программой вы найдёте в статьеUser experience best practices.

Элемент UIНазначениеКак выглядит?
Кнопка на панели инструментовКнопка на панели инструментов доступна изо всех вкладок. Реакцию на нажатие кнопки обеспечивает расширение.Example of a WebExtension toolbar button
~~Browser toolbar button with apopup~~~~Кнопка со всплывающим окном на панели инструментов браузера, которая открывается при нажатии. Всплывающее окно определяется в документе 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

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


[8]ページ先頭

©2009-2025 Movatter.jp