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
|
---
title: Address bar button
slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
---
<div>{{AddonSidebar}}</div>
<p>Comúnmente denominado botón de acción de página, esta opción de interfaz de usuario es un botón agregado a la barra de direcciones del navegador. Los usuarios pueden hacer clic en el botón para interactuar con sus extensiones.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<h2 id="Acciones_de_página_y_acciones_de_navegador">Acciones de página y acciones de navegador</h2>
<p>El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).</p>
<p>Las diferencias son:</p>
<ul>
<li><strong>La localización del botón:</strong>
<ul>
<li>La acción de página es mostrado dentro de la barra de direcciones del navegador.</li>
<li>La acción del navegador es mostrado fuera de la barra de direcciones, exactamente en la barra de herramientas del navegador.</li>
</ul>
</li>
<li><strong>La visibilidad del botón:</strong>
<ul>
<li>La acción de página esta oculta por defecto (sin embargo esto puede ser cambiado en la propiedades <code>show_matches</code> y <code>hide_matches</code> <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">manifest key</a>), y tu puedes llamar <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> y <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> para mostrar o ocultar esto en pestañas especificas.</li>
<li>La acción del navegador siempre esta mostrada.</li>
</ul>
</li>
</ul>
<p>Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:</p>
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="row">Type</th>
<th scope="col">Bookmarks action</th>
<th scope="col">Content action</th>
<th scope="col">Tabs operation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">page action</th>
<td>Marcar esta página</td>
<td>Reddit enhancement</td>
<td>Enviar una pestaña</td>
</tr>
<tr>
<th scope="row">browser action</th>
<td>Mostrar todos los marcadores</td>
<td>Habilitar ad-blocking</td>
<td>Sincronizar todas las pestañas</td>
</tr>
</tbody>
</table>
<h2 id="Specifying_the_page_action">Specifying the page action</h2>
<p>You define the page action's properties using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> key in manifest.json:</p>
<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span>
<span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
<span class="key token">"default_icon":</span> <span class="punctuation token">{</span>
<span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span>
<span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span>
<span class="punctuation token">}</span><span class="punctuation token">,</span>
<span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span>
<span class="punctuation token">}</span></code></pre>
<p>The only mandatory key is <code>default_icon</code>.</p>
<p>There are two ways to specify a page action: with or without a <a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>.</p>
<ul>
<li><strong>Without a popup:</strong> When the user clicks the button, an event is dispatched to the extension, which the extension listens for using <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>:</li>
<li>
<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
</li>
<li><strong>With a popup:</strong> the <code>click</code> event is not dispatched. Instead, the popup appears when the user clicks the button. The user then interacts with the popup. When the user clicks outside of the popup, it closes automatically. See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">Popup </a>article for more details on creating and managing popups.</li>
</ul>
<p>Note that your extension can have one-page action only.</p>
<p>You can change any of the page action properties programmatically using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API.</p>
<h2 id="Icons">Icons</h2>
<p>For details on how to create icons to use with your page action, see <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> in the <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> documentation.</p>
<h2 id="Examples">Examples</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/chill-out">chill-out</a> example which implements a page action without a popup.</p>
|
