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
|
---
title: Всплывающие окна
slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups
---
<div>{{AddonSidebar}}</div>
<div>
<p>A popup is a dialog that's associated with a <a href="/en-US/Add-ons/WebExtensions/Browser_action">toolbar button</a> or <a href="/en-US/Add-ons/WebExtensions/Page_actions">address bar button</a>.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14039/popup-shadow.png" style="display: block; height: 389px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p>When the user clicks the button, the popup is shown. When the user clicks anywhere outside the popup, the popup is closed. The popup can be closed programmatically by calling <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/close">window.close()</a></code> from a script running in the popup. However, you can't open the popup programmatically from an extension's JavaScript: it can only be opened in response to a user action.</p>
<p>You can define a keyboard shortcut that opens the popup using the <code>"_execute_browser_action"</code> and <code>"_execute_page_action"</code> shortcuts. See the documentation for the manifest.json key <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span style="display: none;"> </span>.</p>
<h2 id="Specifying_a_popup">Specifying a popup</h2>
<p>The popup is specified as an HTML file, which can include CSS and JavaScript files, as a normal web page does. Unlike a normal page, though, the JavaScript can use all the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> that the extension has <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a> for.</p>
<p>The HTML file is included in the extension and specified as part of 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 by <code>"default_popup"</code> in the 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="Debugging_popups">Debugging popups</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="Popup_resizing">Popup resizing</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>
<h2 id="Examples">Examples</h2>
<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use a browser action:</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> uses a browser action.</li>
</ul>
</div>
|