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
|
---
title: Боковые панели (Sidebars)
slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
tags:
- Sidebar
- Боковая панель
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
---
<div>{{AddonSidebar}}</div>
<div>
<p>Боковая панель - это панель, которая отображается в левой части окна браузера, рядом с веб-страницей. В браузере предусмотрен пользовательский интерфейс, который позволяет пользователю видеть доступные боковые панели и выбирать боковую панель для отображения. Например, Firefox имеет меню "Вид > Боковая панель". Одновременно может отображаться только одна боковая панель, и эта боковая панель будет отображаться для всех вкладок и всех окон браузера.</p>
<p>Браузер может включать в себя ряд встроенных боковых панелей. Например, Firefox включает боковую панель для взаимодействия с закладками:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="display: block; height: 761px; margin-left: auto; margin-right: auto; width: 728px;">Используя ключ <code>sidebar_action</code> в manifest.json, расширение может добавить свою боковую панель в браузер. Она будет доступна наравне со встроенными панелями, и пользователь сможет открыть ее, используя тот же механизм, что и для встроенных боковых панелей.</p>
<p>Как и в случае всплывающих окон (Popups), вы задаете содержимое боковой панели как документ HTML. Когда пользователь открывает боковую панель, этот документ загружается в каждое открытое окно браузера. Каждое окно получает свой экземпляр документа. Когда открываются новые окна, они также получат свои собственные экземпляры документа боковой панели.</p>
<p>Вы можете задать HTML документ для конкретной вкладки, используя функцию {{WebExtAPIRef("sidebarAction.setPanel()")}}. Боковая панель может определить, к какому окну она принадлежит используя {{WebExtAPIRef("windows.getCurrent()")}} API:</p>
<pre class="brush: js">// sidebar.js
browser.windows.getCurrent({populate: true}).then((windowInfo) => {
myWindowId = windowInfo.id;
});</pre>
<p>Это полезно, если боковая панель хочет отображать различный контент для разных окон. Использование такого подхода см. в примере <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">"annotate-page" example</a>.</p>
<p>HTML документ боковой панели получает доступ к тому же набору привилегированных JavaScript API, что и background и popup сценарии этого расширения. Они могут получить прямой доступ к фоновой странице с помощью {{WebExtAPIRef("runtime.getBackgroundPage()")}}, и могут взаимодействовать с сценариями контента или нативными приложениями, используя API интерфейса обмена сообщениями, такие как {{WebExtAPIRef("tabs.sendMessage()")}} и {{WebExtAPIRef("runtime.sendNativeMessage()")}}.</p>
<p>Документы боковой панели выгружаются, когда окно браузера закрывается или пользователь закрывает боковую панель. Это означает, что в отличие от background страниц документы боковой панели не остаются загруженными все время, но в отличие от popup окон они остаются загруженными, пока пользователь взаимодействует с веб-страницами.</p>
<p>После первой установки расширения, использующего боковую панель, его панель будет открыта автоматически. Это сделано для того, чтобы помочь пользователю понять, что расширение использует боковую панель. Обратите внимание, что расширение не может открывать боковые панели программно: боковые панели могут открываться только пользователем.</p>
<h2 id="Использование_боковых_панелей">Использование боковых панелей</h2>
<p>Чтобы использовать боковую панель в своем расширении, укажите с помощью ключа <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> в manifest.json key, HTML-документ панели, а также заголовок и значок по умолчанию:</p>
<pre class="brush: json">"sidebar_action": {
"default_title": "My sidebar",
"default_panel": "sidebar.html",
"default_icon": "sidebar_icon.png"
}</pre>
<p>Вы можете изменить название и значок панели программно, используя {{WebExtAPIRef("sidebarAction")}} API.</p>
<p>Заголовок и значок отображаются пользователю в любом UI, предоставляемом браузером, для отображения боковых панелей, например меню "Вид > Боковые панели" в Firefox.</p>
<h2 id="Примеры">Примеры</h2>
<p>В репозитории <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> на GitHub содержится несколько примеров расширений, которые используют боковую панель:</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> использует боковую панель.</li>
</ul>
</div>
|
