blob: 742783cf3dae95d829ddfb5677193fb9da84d6ab (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
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>
|
