---
title: Пользовательский интерфейс
slug: Mozilla/Add-ons/WebExtensions/user_interface
tags:
  - Пользовательский интерфейс
translation_of: Mozilla/Add-ons/WebExtensions/user_interface
---
<div>{{AddonSidebar}}</div>

<p>У расширений WebExtensions есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется <em>расширенной</em> функциональностью. Все они перечислены ниже, с инструкцией как использовать в своём расширении каждый из них<span id="result_box" lang="ru"><span>.</span></span></p>

<div class="note">
<p><span id="result_box" lang="ru"><span>Советы как с помощью этих элементов пользовательского интерфейса (UI)</span></span><span lang="ru"><span> обеспечить отличное взаимодействие человека с программой вы найдёте в статье </span></span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</p>
</div>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Элемент UI</th>
   <th scope="col">Назначение</th>
   <th scope="col" style="width: 350px;">Как выглядит?</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Кнопка на панели инструментов</a></td>
   <td>
    <p>Кнопка на панели инструментов доступна изо всех вкладок.<br>
     Реакцию на нажатие кнопки обеспечивает расширение.</p>
   </td>
   <td><img alt="Example of a WebExtension toolbar button" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="height: 99px; width: 350px;"></td>
  </tr>
  <tr>
   <td>
    <p><s>Browser toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></s></p>
   </td>
   <td>
    <p><s>Кнопка со всплывающим окном на панели инструментов браузера, которая открывается при нажатии. Всплывающее окно определяется в документе HTML, который обрабатывает взаимодействие пользователя.</s></p>
   </td>
   <td>
    <p><s><img alt="Example of a WebExtension toolbar button with a popup" src="https://mdn.mozillademos.org/files/14039/popup-shadow.png" style="height: 156px; width: 350px;"></s></p>
   </td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Кнопка в адресной строке</a></td>
   <td>В отличие от панели инструментов, в адресной строке кнопка должна появляться только рядом с адресом предназначенной для неё страницы.</td>
   <td><img alt="Example showing an address bar button (page action)" src="https://mdn.mozillademos.org/files/15047/address_bar_button.png" style="height: 127px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Всплывающие окна</a></td>
   <td>При нажатии на кнопку всплывает (popup) web-страница с органами управления.</td>
   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15053/page_action_popup.png" style="height: 250px; width: 330px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Контекстное меню</a></td>
   <td>Органы управления могут быть упорядочены в ветвящейся структуре контекстных меню браузера.</td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/15051/context_menu_example.png" style="height: 359px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Боковая панель</a></td>
   <td>
    <p dir="ltr">В боковой панели рядом с интернет-сайтом открывается web-страница с интерфейсом пользователя. Человек может её закрыть и открыть когда в ней появится потребность.</p>
   </td>
   <td><img alt="Example of a WebExtension's sidebar" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="height: 209px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Страница настройки дополнения</a></td>
   <td>
    <p><span id="result_box" lang="ru"><span>Страница пользовательских настроек доступна из меню управления дополнениями единообразно </span></span>для всех расширений.</p>
   </td>
   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15055/options_page.png" style="height: 259px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Дополнительные веб-страницы</a></td>
   <td>
    <p>Некоторые варианты содержимого (например, справку или форму обратной связи) удобнее расположить на дополнительной web-странице, которая открывается в собственной вкладке или окне.</p>
   </td>
   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15063/bundled_page_as_panel_small.png" style="height: 180px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Уведомления</a></td>
   <td>
    <p>Пользователю можно сообщить что-либо средствами уведомления, предусмотренными в ОС.<br>
     Расширение отреагирует когда уведомление будет либо прочитано пользователем, либо скрыто (явным решением человека или логикой программы) так и оставшись непрочитанным.</p>
   </td>
   <td><img alt="Example notification from a WebExtension" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="height: 95px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Угадывание адреса по мере ввода</a></td>
   <td><span id="noHighlight_0.4753766294143369">Предлагать настраиваемые варианты адресной строки при вводе пользователем ключевого слова.</span></td>
   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15059/omnibox_example_small.png" style="height: 242px; width: 350px;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Панели инструмента разработчика</a></td>
   <td><span id="result_box" lang="ru"><span>Вкладка со связанным HTML-документом, который отображается в инструментах разработчика браузера.</span></span></td>
   <td><img alt="New panel tab in the Developer Tools tab bar" src="https://mdn.mozillademos.org/files/15049/developer_panel_tab.png" style="height: 180px; width: 350px;"></td>
  </tr>
 </tbody>
</table>

<p><span id="noHighlight_0.852967693850544">В следующих руководствах приведены пошаговые инструкции по созданию некоторых из этих параметров пользовательского интерфейса:</span></p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
</ul>