blob: 57407bc1753efb3d9e320cc0b7a363f781dd2a02 (
plain)
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
|
---
title: Botão da barra de endereço
slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
tags:
- Extensões da Web
- Interface do Utilizador
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina
---
<div>{{AddonSidebar}}</div>
<p>Normalmente referido como uma <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">ação da página</a>, esta opção da inteface do utilizador é um botão adicionado à barra de endereço do navegador. Os utilziadores clicam no botão para interagir com a sua extensão.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p>
<p>Use this button when a feature is only relevant for some web pages. By default, the address bar button is hidden in all browser tabs, and you call <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> and <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> to show or hide it in specific tabs.</p>
<p>Compare to the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">toolbar button</a>, which offers similar behavior but is used in situations where the extension's features are applicable to almost every web page.</p>
<h2 id="Especificar_a_ação_da_página">Especificar a ação da página</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>. If you don't specify a popup, 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>:</p>
<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>
<p>If you specify a popup, the click event is not dispatched: instead, the popup is shown when the user clicks the button. The user is able to interact with the popup and it closes automatically when the user clicks outside it. 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.</p>
<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="Exemplos">Exemplos</h2>
<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use page action:</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> uses a page action without a popup.</li>
</ul>
|
