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
|
---
title: Janelas (Popups)
slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Popups
tags:
- Extensions
- IU
- Interface do Utilizador
- Janela
- popup
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups
---
<div>{{AddonSidebar}}</div>
<div>
<p>Uma janela (<em>popup)</em> é uma janela que está associada com um <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador">botão da barra de ferramentas</a> ou <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina">botão da barra de endereço</a>.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>Quando o usuário clica no botão, a janela popup é exibida. Quando o usuário clica em qualquer lugar fora do popup, ele é fechado. O popup pode ser fechado via programação usando a função <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/close">window.close()</a></code> em um script sendo executado no popup. Entretanto, você não pode abrir o popup via programação a partir do código JavaScript da extensão: ele somente se abre em resposta a uma ação do usuário.</p>
<p>Você pode definir um atalho de teclado que abre o popup usando <code>"_execute_browser_action"</code> and <code>"_execute_page_action"</code>. Veja a documentação da chave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span style="display: none;"> </span> no manifest.json.</p>
<h2 id="Especificar_uma_janela">Especificar uma janela</h2>
<p>O popup é definido por um arquivo HTML, que pode incluir arquivos CSS e JavaScript, como uma página comum. Diferentemente de uma página comum, o código JavaScript pode usar todos os <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> que a extensão tem <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a> .</p>
<p>O documento do popup é carregado toda vez que ele é exibido, e descarregado quando o popup é fechado.</p>
<p>O arquivo HTML é incluído na extensão e especificado como parte do <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou chave <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> por <code>"default_popup"</code> no arquivo manifest.json:</p>
<pre class="brush: json"> "browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
}</pre>
<p>You can ask the browser to include a stylesheet in your popup that will make it look consistent with the browser's UI. To do this, include <code>"browser_style": true</code> in the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> key.</p>
<p>Popups have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> for more details on this.</p>
<h2 id="Depurar_janelas">Depurar janelas</h2>
<p>You can debug a popup's markup and JavaScript using the Add-on Debugger, but you'll need to turn on the Disable popup auto hide feature to prevent popups from hiding when you click outside them.<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups"> Read about debugging popups</a>.</p>
<h2 id="Redimensionar_janelas">Redimensionar janelas</h2>
<p>Popups resize automatically to fit their content. The algorithm for this may differ from one browser to another.</p>
<p>In Firefox, the size is calculated just before the popup is shown, and at most 10 times per second after DOM mutations. For strict mode documents, the size is calculated based on the layout size of the <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> element. For quirks mode, it's the <code><a href="/en-US/docs/Web/HTML/Element/html"><html></a></code> element. Firefox calculates the preferred width of the contents of that element, reflows it to that width, and then resizes so there's no vertical scrolling. It will grow to a size of <strong>800x600 pixels</strong> at most if that fits on the user's screen. If the user <a href="https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-menu-or-the-toolbar">moves the extension's button to the menu</a> or it appears in the toolbar overflow, then the popup appears inside the menu's panel and is given a fixed width.</p>
<p>No Firefox Android 57, <em>popup </em>é mostrada como uma página normal num novo separador.</p>
<h2 id="Desenho_de_janela">Desenho de janela</h2>
<p>Para obter detalhes sobre como desenhar a sua janela (popup) da página da Web para combinar com o estilo do Firefox, consulte a documentação <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p>
<h2 id="Exemplos">Exemplos</h2>
<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> example which implements a browser action with a popup.</p>
</div>
|
