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
|
---
title: Barras laterais
slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais
tags:
- Extensões da Web
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
---
<div>{{AddonSidebar}}</div>
<div>
<p> </p>
<p>Uma barra lateral é um painel que é exibido no lado esquerdo da janela do navegador, ao lado da página da Web. O navegador fornece uma IU que permite ao utilizador ver as barras laterais atualmente disponíveis e selecionar uma barra lateral para exibir. Por exemplo, o Firefox tem um menu 'Ver -> Barra lateral'. Apenas pode ser exibida uma barra lateral de cada vez, e essa barra lateral será exibida para todos os separadores e todas as janelas do navegador.</p>
<p>O navegador poderá incluir uma série de barras laterais integradas. Por exemplo, o Firefox inclui uma barra lateral para interagir com marcadores:</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;">Using the <code>sidebar_action</code> manifest.json key, an extension can add its own sidebar to the browser. It will be listed alongside the built-in sidebars, and the user will be able to open it using the same mechanism as for the built-in sidebars.</p>
<p>Like a browser action popup, you specify the sidebar's contents as an HTML document. When the user opens the sidebar, its document is loaded into every open browser window. Each window gets its own instance of the document. When new windows are opened, they get their own sidebar documents as well.</p>
<p>You can set a document for a particular tab using the {{WebExtAPIRef("sidebarAction.setPanel()")}} function. A sidebar can figure out which window it belongs to using the {{WebExtAPIRef("windows.getCurrent()")}} API:</p>
<pre class="brush: js">// sidebar.js
browser.windows.getCurrent({populate: true}).then((windowInfo) => {
myWindowId = windowInfo.id;
});</pre>
<p>This is useful if a sidebar wants to display different content for different windows. For an example of this, see the <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">"annotate-page" example</a>.</p>
<p>Sidebar documents get access to the same set of privileged JavaScript APIs that the extension's background and popup scripts get. They can get direct access to the background page (unless the sidebar belongs to incognito mode window) using {{WebExtAPIRef("runtime.getBackgroundPage()")}}, and can interact with content scripts or native applications using messaging APIs like {{WebExtAPIRef("tabs.sendMessage()")}} and {{WebExtAPIRef("runtime.sendNativeMessage()")}}.</p>
<p>Sidebar documents are unloaded when their browser window is closed or when the user closes the sidebar. This means that unlike background pages, sidebar documents don't stay loaded all the time, but unlike browser action popups, they stay loaded while the user interacts with web pages.</p>
<p>When an extension that defines a sidebar is first installed, its sidebar will be opened automatically. This is intended to help the user understand that the extension includes a sidebar. Note that it's not possible for extension to open sidebars programmatically: sidebars can only be opened by the user.</p>
<h2 id="Especificar_barras_laterais">Especificar barras laterais</h2>
<p>To specify a sidebar, define the default document with the <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> manifest.json key, alongside a default title and icon:</p>
<pre class="brush: json">"sidebar_action": {
"default_title": "My sidebar",
"default_panel": "sidebar.html",
"default_icon": "sidebar_icon.png"
}</pre>
<p>You can change the title, panel, and icon programmatically using the {{WebExtAPIRef("sidebarAction")}} API.</p>
<p>Title and icon are shown to the user in any UI provided by the browser to list sidebars, such as the "View > Sidebar" menu in Firefox.</p>
<h2 id="Exemplo">Exemplo</h2>
<p>O repositório de <a href="https://github.com/mdn/webextensions-examples">exemplos das extensões da Web</a> no GitHub, contém vários exemplos de extensões que utilizam a barra lateral:</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> utiliza uma barra lateral.</li>
</ul>
</div>
|
