diff options
Diffstat (limited to 'files/pt-pt/mozilla/add-ons/webextensions/user_interface')
12 files changed, 1124 insertions, 0 deletions
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html new file mode 100644 index 0000000000..c5da78003b --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -0,0 +1,50 @@ +--- +title: Botão da Barra de Ferramentas +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Ação_navegador +tags: + - Extensão da Web +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +<div>{{AddonSidebar}}</div> + +<p>Normalmente referido como uma <a href="/pt-PT/Add-ons/WebExtensions/API/browserAction">ação do navegador</a>, esta opção da interface do utilizador é um botão adicionado à barra de ferramentas do navegador. Os utilizadores clicam no botão para interagir com a sua extensão.<br> + <img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>The toolbar button (browser action) is very like the address bar button (page action). For the differences, and guidance on when to use what, see <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">Page actions and browser actions</a>.</p> + +<h2 id="Especificar_a_ação_do_navegador">Especificar a ação do navegador</h2> + +<p>Define as propriedades da ação do navegador utilizando a chave <code><a href="/pt-PT/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> em manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</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 browser 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="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<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="/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 only one browser action.</p> + +<p>You can change any of the browser action properties programmatically using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API.</p> + +<h2 id="Ícones">Ícones</h2> + +<p>For details on how to create icons to use with your browser 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="Exemplos">Exemplos</h2> + +<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub contains two examples of extensions that implement browser actions:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> uses a browser action without a popup.</li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> uses a browser action with a popup.</li> +</ul> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html new file mode 100644 index 0000000000..bc2f1bd2da --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html @@ -0,0 +1,453 @@ +--- +title: Estilos de navegador +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Estilos_de_navegador +tags: + - Extensões + - Extensões da Web + - Extras +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles +--- +<div>{{AddonSidebar}}</div> + +<p>Certain user interface components - browser and page action <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popups</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">sidebars</a>, and <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages">options pages</a> - are specified by your extension in essentially the same way:</p> + +<ol> + <li>create an HTML file defining the structure of the UI element</li> + <li>add a manifest.json key (<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code>, or <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>) pointing to that HTML file.</li> +</ol> + +<p>One of the challenges with this approach is styling the element in such a way that it fits in with the browser's own style. To help with this, the manifest.json keys include an extra optional property: <code>browser_style</code>. If this is included and set to <code>true</code>, then your document will get one or more extra stylesheets that will help make it look consistent with the browser's UI and with other extensions that use the <code>browser_style</code> property.</p> + +<p>In Firefox, the stylesheet can be seen at <code>chrome://browser/content/extension.css</code>. The extra stylesheet at <code>chrome://browser/content/extension-mac.css</code> is also included on OS X.</p> + +<p>Most styles are automatically applied, but some elements require you to add the <span style="white-space: nowrap;">non-standard</span> <code style="white-space: nowrap;">browser-style</code> class to get their styling since Firefox 55, as detailed in the table below:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Elemento</th> + <th scope="col">Exemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code></td> + <td> + <pre class="brush: html no-line-numbers"> +<button class="browser-style">Click me</button>{{non-standard_inline}}</pre> + </td> + </tr> + <tr> + <td> + <p><code><a href="/en-US/docs/Web/HTML/Element/select"><select></a></code></p> + </td> + <td> + <pre class="brush: html no-line-numbers"> +<select class="browser-style" name="select"> + <option value="value1">Value 1</option> + <option value="value2" selected>Value 2</option> + <option value="value3">Value 3</option> +</select></pre> + </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code></td> + <td> + <pre class="brush: html no-line-numbers"> +<textarea class="browser-style">Write here</textarea></pre> + </td> + </tr> + <tr> + <td>Parent of an <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code></td> + <td> + <pre class="brush: html no-line-numbers"> +<div class="browser-style"> + <input type="radio" id="op1" name="choices" value="op1"> + <label for="op1">Option 1</label> + + <input type="radio" id="op2" name="choices" value="op2"> + <label for="op2">Option 2</label> +</div></pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("webextensions.browser_style")}}</p> + +<h2 id="Componentes_de_Painel_do_Firefox">Componentes de Painel do Firefox</h2> + +<div class="overheadIndicator nonStandard nonStandardHeader"> +<p><strong>{{NonStandardBadge(1)}} Non-Standard</strong><br> + This feature is non-standard and only works in Firefox.</p> +</div> + +<p>The <code>chrome://browser/content/extension.css</code> stylesheet also contains the styles for the Firefox Panel Components.</p> + +<p>The <a href="https://firefoxux.github.io/StyleGuide/#/navigation">legacy Firefox Style Guide</a> documents proper usage.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Elemento</th> + <th scope="col">Exemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>Cabeçalho</td> + <td> + <pre class="brush: html"> +<header class="panel-section panel-section-header"> + <div class="icon-section-header"><img src="image.svg"/></div> + <div class="text-section-header">Header</div> +</header></pre> + </td> + </tr> + <tr> + <td>Rodapé</td> + <td> + <pre class="brush: html"> +<footer class="panel-section panel-section-footer"> + <button class="panel-section-footer-button">Cancel</button> + <div class="panel-section-footer-separator"></div> + <button class="panel-section-footer-button default">Confirm</button> +</footer></pre> + </td> + </tr> + <tr> + <td>Separadores</td> + <td> + <pre class="brush: html"> +<div class="panel-section panel-section-tabs"> + <button class="panel-section-tabs-button selected">Tab</button> + <div class="panel-section-tabs-separator"></div> + <button class="panel-section-tabs-button">Tab</button> + <div class="panel-section-tabs-separator"></div> + <button class="panel-section-tabs-button">Tab</button> +</div></pre> + </td> + </tr> + <tr> + <td>Form</td> + <td> + <pre class="brush: html"> +<div class="panel-section panel-section-formElements"> + <div class="panel-formElements-item"> + <label for="name01">Label:</label> + <input type="text" value="Name" id="name01" /> + </div> + <div class="panel-formElements-item"> + <label for="picker01">Label:</label> + <select id="picker01"> + <option value="value1" selected="true">Dropdown</option> + <option value="value2">List Item</option> + <option value="value3">List Item</option> + </select> + </div> + <div class="panel-formElements-item"> + <label for="placeholder01">Label:</label> + <input type="text" placeholder="Placeholder" id="placeholder01" /> + <button name="expander" class="expander"></button> + </div> +</div></pre> + </td> + </tr> + <tr> + <td>Menu</td> + <td> + <pre class="brush: html"> +<div class="panel-section panel-section-list"> + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut">Ctrl-L</div> + </div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-section-separator"></div> + + <div class="panel-list-item disabled"> + <div class="icon"></div> + <div class="text">Disabled List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-section-separator"></div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> +</div></pre> + </td> + </tr> + </tbody> +</table> + +<h3 id="Exemplo">Exemplo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><header class="panel-section panel-section-header"> + <div class="icon-section-header"><!-- An image goes here. --></div> + <div class="text-section-header">Header</div> +</header> + +<div class="panel-section panel-section-list"> + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut">Ctrl-L</div> + </div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-section-separator"></div> + + <div class="panel-list-item disabled"> + <div class="icon"></div> + <div class="text">Disabled List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-section-separator"></div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> + + <div class="panel-list-item"> + <div class="icon"></div> + <div class="text">List Item</div> + <div class="text-shortcut"></div> + </div> +</div> + +<footer class="panel-section panel-section-footer"> + <button class="panel-section-footer-button">Cancel</button> + <div class="panel-section-footer-separator"></div> + <button class="panel-section-footer-button default">Confirm</button> +</footer></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Global */ +html, +body { + background: white; + box-sizing: border-box; + color: #222426; + cursor: default; + display: flex; + flex-direction: column; + font: caption; + margin: 0; + padding: 0; + -moz-user-select: none; +} + +body * { + box-sizing: border-box; + text-align: start; +} + +button.panel-section-footer-button, +button.panel-section-tabs-button { + color: inherit; + background-color: unset; + font: inherit; + text-shadow: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; +} + +/* Panel Section */ +.panel-section { + display: flex; + flex-direction: row; +} + +.panel-section-separator { + background-color: rgba(0, 0, 0, 0.15); + min-height: 1px; +} + +/* Panel Section - Header */ +.panel-section-header { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); + padding: 16px; +} + +.panel-section-header > .icon-section-header { + background-position: center center; + background-repeat: no-repeat; + height: 32px; + margin-right: 16px; + position: relative; + width: 32px; +} + +.panel-section-header > .text-section-header { + align-self: center; + font-size: 1.385em; + font-weight: lighter; +} + +/* Panel Section - List */ +.panel-section-list { + flex-direction: column; + padding: 4px 0; +} + +.panel-list-item { + align-items: center; + display: flex; + flex-direction: row; + height: 24px; + padding: 0 16px; +} + +.panel-list-item:not(.disabled):hover { + background-color: rgba(0, 0, 0, 0.06); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.panel-list-item:not(.disabled):hover:active { + background-color: rgba(0, 0, 0, 0.1); +} + +.panel-list-item.disabled { + color: #999; +} + +.panel-list-item > .icon { + flex-grow: 0; + flex-shrink: 0; +} + +.panel-list-item > .text { + flex-grow: 10; +} + +.panel-list-item > .text-shortcut { + color: #808080; + font-family: "Lucida Grande", caption; + font-size: .847em; + justify-content: flex-end; +} + +.panel-section-list .panel-section-separator { + margin: 4px 0; +} + +/* Panel Section - Footer */ +.panel-section-footer { + background-color: rgba(0, 0, 0, 0.06); + border-top: 1px solid rgba(0, 0, 0, 0.15); + color: #1a1a1a; + display: flex; + flex-direction: row; + height: 41px; + margin-top: -1px; + padding: 0; +} + +.panel-section-footer-button { + flex: 1 1 auto; + height: 100%; + margin: 0 -1px; + padding: 12px; + text-align: center; +} + +.panel-section-footer-button > .text-shortcut { + color: #808080; + font-family: "Lucida Grande", caption; + font-size: .847em; +} + +.panel-section-footer-button:hover { + background-color: rgba(0, 0, 0, 0.06); +} + +.panel-section-footer-button:hover:active { + background-color: rgba(0, 0, 0, 0.1); +} + +.panel-section-footer-button.default { + background-color: #0996f8; + box-shadow: 0 1px 0 #0670cc inset; + color: #fff; +} + +.panel-section-footer-button.default:hover { + background-color: #0670cc; + box-shadow: 0 1px 0 #005bab inset; +} + +.panel-section-footer-button.default:hover:active { + background-color: #005bab; + box-shadow: 0 1px 0 #004480 inset; +} + +.panel-section-footer-separator { + background-color: rgba(0, 0, 0, 0.1); + width: 1px; + z-index: 99; +}</pre> + +<hr> +<pre class="brush: css">/* Example specific – not part of chrome://browser/content/extension.css */ +body { + background: #fcfcfc; + background-clip: padding-box; + border: 1px solid rgba(24,26,27,.2); + box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1); + box-sizing: content-box; + margin: 2em auto .5em; + width: 384px; +} + +html { + min-height: 100vh; +} + +html > body { + margin: auto; +} + +.icon-section-header { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg=="); +}</pre> +</div> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Example","640","360")}}</p> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..231a800bc3 --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,51 @@ +--- +title: Itens do menu de contexto +slug: >- + Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Itens_do_menu_de_contexto +tags: + - Extensões da Web +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>Essa opção da interface do utilizador adiciona um ou mais itens a um menu de contexto do navegador.</p> + +<p><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15051/context_menu_example.png" style="display: block; height: 587px; margin-left: auto; margin-right: auto; width: 573px;"></p> + +<p>You would use this option to expose features that are relevant to specific browser or web page contexts. For example, you could show features to open a graphic editor when the user clicks on an image or offer a feature to save page content when part of a page is selected. You can add plain menu items, checkbox items, radio button groups, and separators to menus. Once a context menu item has been added using {{WebExtAPIRef("contextMenus.create")}} it's displayed in all browser tabs, but you can hide it by removing it with {{WebExtAPIRef("contextMenus.remove")}}.</p> + +<h2 id="Especificar_itens_do_menu_de_contexto">Especificar itens do menu de contexto</h2> + +<p>You manage context menu items programmatically, using the {{WebExtAPIRef("contextMenus")}} API. However, you need to request the <code>contextMenus</code> permission in your manifest.json to be able to take advantage of the API.</p> + +<pre class="brush: json">"permissions": ["contextMenus"]</pre> + +<p>You can then add (and update or delete) the context menu items in your extension's background script. To create a menu item you specify an id, its title, and the context menus it should appear on:</p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "log-selection", + title: browser.i18n.getMessage("contextMenuItemSelectionLogger"), + contexts: ["selection"] +}, onCreated);</pre> + +<p>Your extension then listens for clicks on the menu items. The passed information about the item clicked, the context where the click happened, and details of the tab where the click took place can then be used to invoke the appropriate extension functionality.</p> + +<pre class="brush: js">browser.contextMenus.onClicked.addListener(function(info, tab) { + switch (info.menuItemId) { + case "log-selection": + console.log(info.selectionText); + break; + ... + } +})</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O repositório de <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">wexemplos das Extensões da Web </a>no GitHub, contém vários exemplos de extensões que utilizam os itens do menu de contexto:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/menu-demo">menu-demo</a> adds several items to the browser's context menu.</li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a> adds a context menu item to links that copies the URL to the clipboard, as plain text and rich HTML.</li> +</ul> +</div> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html new file mode 100644 index 0000000000..a2bc9921ad --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -0,0 +1,62 @@ +--- +title: Painéis das ferramentas de desenvolvimento +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/devtools_panels +tags: + - Extensões da Web + - Guía + - Interface do Utilizador + - Principiante +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>Esta funcionalidade está disponível desde o Firefox 54.</p> +</div> + +<p>Quando uma extensão fornece ferramentas que são úteis para os programadores, é possível adicionar uma IU para as mesmas para as ferramentas de desenvolvimento do navegador como um novo painel.</p> + +<p><img alt='Simple example showing the addition of "My panel" to the Developer Tools tabs.' src="https://mdn.mozillademos.org/files/15035/devtools_panel_example.png" style="height: 352px; width: 1192px;"></p> + +<h2 id="Especificar_um_painel_de_ferramentas_de_desenvolvimento">Especificar um painel de ferramentas de desenvolvimento</h2> + +<p>Um painél das ferramentas de desenvovlimento é adicionado utilizando a API <code><a href="/pt-PT/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code>, que precisa de ser executada a partir de uma página de <em>devtools</em> especial.</p> + +<p>Adicione a páginas de devtools, incluindo a chave <code><a href="/pt-PT/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> na extensão de <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> e forneça a localização do ficheiro HTML da página na extensão:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre> + +<p>From the devtools page, call a script that will add the devtools panel:</p> + +<pre class="brush: html"><body> + <script src="devtools.js"></script> +</body></pre> + +<p>In the script, create the devtools panel by specifying the panel's title, icon, and HTML file that provides the panel's content:</p> + +<pre class="brush: js">function handleShown() { + console.log("panel is being shown"); +} + +function handleHidden() { + console.log("panel is being hidden"); +} + +browser.devtools.panels.create( + "My Panel", // title + "icons/star.png", // icon + "devtools/panel/panel.html" // content +).then((newPanel) => { + newPanel.onShown.addListener(handleShown); + newPanel.onHidden.addListener(handleHidden); +});</pre> + +<p>The extension can now run code in the inspected window using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> or by injecting a content script via the background script by passing a message. You can find more details on how to do this in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools.</a></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 devtools panels:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> use devtools panels:</li> +</ul> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html new file mode 100644 index 0000000000..4bf94b9653 --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -0,0 +1,64 @@ +--- +title: Páginas de extensão +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +--- +<div>{{AddonSidebar()}}</div> + +<p>Pode inclur páginas html na sua extensão para fornecer formulários, ajuda, ou qualquer outro conteúdo que a sua extensão precisar.</p> + +<p><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>These pages also get access to the same privileged JavaScript APIs that are available to your extension's background scripts.</p> + +<h2 id="Especificar_páginas_de_extensão">Especificar páginas de extensão</h2> + +<p>You can include HTML files, and their associated CSS or JavaScript files, in your extension. The files can be included in the root or organized within meaningful sub-folders.</p> + +<pre>/my-extension + /manifest.json + /my-page.html + /my-page.js</pre> + +<h2 id="Exibir_páginas_de_extensão">Exibir páginas de extensão</h2> + +<p>There are two options for displaying extension pages: {{WebExtAPIRef("windows.create()")}} and {{WebExtAPIRef("tabs.create()")}}.</p> + +<p>Using <code>windows.create()</code>, for example, you can open an HTML page into a detached panel (a window without the normal browser UI of address bar, bookmark bar, and alike) to create a dialog-like user experience:</p> + +<pre class="brush: js">var createData = { + type: "detached_panel", + url: "panel.html", + width: 250, + height: 100 +}; +var creating = browser.windows.create(createData);</pre> + +<p>When the window is no longer needed, it can be closed programmatically, for example, after the user clicks a button, by passing the id of the current window to {{WebExtAPIRef("windows.remove()")}}:</p> + +<pre class="brush: js">document.getElementById("closeme").addEventListener("click", function(){ + var winId = browser.windows.WINDOW_ID_CURRENT; + var removing = browser.windows.remove(winId); +}); </pre> + +<h2 id="Páginas_de_extensão_e_histório">Páginas de extensão e histório</h2> + +<p>By default, pages you open in this way will be stored in the user's history, just like normal web pages. If you don't want to have this behavior, use {{WebExtAPIRef("history.deleteUrl()")}} to remove the browser's record:</p> + +<pre class="comment-text " id="ct-4">function onVisited(historyItem) { + if (historyItem.url == browser.extension.getURL(myPage)) { + browser.history.deleteUrl({url: historyItem.url}); + } +} + +browser.history.onVisited.addListener(onVisited);</pre> + +<p>To use the history API, you must request the "history" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> in your <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> file.</p> + +<h2 id="Desenho_da_página_da_Web">Desenho da página da Web</h2> + +<p>For details on how to design your web page's to match the style of Firefox, see 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="Exemplos">Exemplos</h2> + +<p>The <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a> example, which implements several of the options for creating windows.</p> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..6ec29a7fcf --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,93 @@ +--- +title: Interface do utilizador +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador +tags: + - Interface do Utilizador + - Landing + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>As extensões que utilizam as APIs de WebExtension são fornecidas com várias opções de interface do utilizador, e assim, as suas funcionalidades podem ficar disponíveis para o utilizador. Um resumo dessas opções é fornecido abaixo, com uma introdução mais detalhada para cada opção da interface do utilziador nesta secção .</p> + +<div class="note"> +<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Opção de UI</th> + <th scope="col">Descrição</th> + <th scope="col" style="width: 350px;">Exemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Browser toolbar button</a></td> + <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td> + <td><img alt="Example of a WebExtension toolbar button" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="height: 99px; width: 350px;"></td> + </tr> + <tr> + <td>Browser toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of a WebExtension toolbar button with a popup" src="https://mdn.mozillademos.org/files/14039/popup-shadow.png" style="height: 156px; width: 350px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a></td> + <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td> + <td><img alt="Example showing an address bar button (page action)" src="https://mdn.mozillademos.org/files/15047/address_bar_button.png" style="height: 127px; width: 350px;"></td> + </tr> + <tr> + <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15053/page_action_popup.png" style="height: 250px; width: 330px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu items</a></td> + <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15051/context_menu_example.png" style="height: 359px; width: 350px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td> + <td> + <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p> + </td> + <td><img alt="Example of a WebExtension's sidebar" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="height: 209px; width: 350px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td> + <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page in the from the browser's add-ons manager.</td> + <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15055/options_page.png" style="height: 259px; width: 350px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Bundled web pages</a></td> + <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td> + <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15063/bundled_page_as_panel_small.png" style="height: 180px; width: 350px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notifications</a></td> + <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td> + <td><img alt="Example notification from a WebExtension" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="height: 95px; width: 350px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestions</a></td> + <td>Offer custom address bar suggestions when the user enters a keyword.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15059/omnibox_example_small.png" style="height: 242px; width: 350px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panels</a></td> + <td>A tab with an associated HTML document that displays in the browser's developer tools.</td> + <td><img alt="New panel tab in the Developer Tools tab bar" src="https://mdn.mozillademos.org/files/15049/developer_panel_tab.png" style="height: 180px; width: 350px;"></td> + </tr> + </tbody> +</table> + +<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li> +</ul> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html new file mode 100644 index 0000000000..5b38d4f29f --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/notifications/index.html @@ -0,0 +1,50 @@ +--- +title: Notificações +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Notificacoes +tags: + - Extensões da Web +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>As notificações permitem-lhe comunicar a informação sobre a sua extensão ou o seu conteúdo utilizando o serviço de notificação do sistema operativo subjacente:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<p>As notificações podem incluir uma chamada para ação para o utilizador, e o seu extra pode escutar o utilizador a clicar na notificação ou a notificação a fechar.</p> + +<h2 id="Especificar_as_notificações">Especificar as notificações</h2> + +<p>Pode gerir as notificações programaticamente, utilizando a API {{WebExtAPIRef("notifications")}}. Para utilizar esta API deve solicitar a permissão de <em><code>notifications</code></em> no seu manifest.json:</p> + +<pre class="brush: json"><span class="pl-s"><span class="pl-pds">"</span>permissions<span class="pl-pds">"</span></span>: [<span class="pl-s"><span class="pl-pds">"</span>notifications<span class="pl-pds">"</span></span>]</pre> + +<p>Depois, pode utilziar {{WebExtAPIRef("notifications.create")}} para criar as suas notificações, como neste exemplo de <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n:</a></p> + +<pre class="brush: js">var title = browser.i18n.getMessage("notificationTitle"); +var content = browser.i18n.getMessage("notificationContent", message.url); +browser.notifications.create({ + "type": "basic", + "iconUrl": browser.extension.getURL("icons/link-48.png"), + "title": title, + "message": content +});</pre> + +<p>Este código cria uma notificação com um ícone, título, e mensagem.</p> + +<p>Se a notificação incluir uma chamada para ação, pode escutar o utilizador a clicar na notificação para chamar a ação para manipular a ação:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>notifications<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>Se estiver a enviar chamadas para ação através das notificações, também irá querer definir a notificação opcional <code>id</code>, e assim, pode saber qual a chamada para ação que o utilizador selecionou.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O repositório dos <a href="https://github.com/mdn/webextensions-examples">exemplos da extensões da Web</a> no GitHub, contém vários exemplos das extensões que utilizam <em>creates notifications</em>:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> utiliza <em>creates notifications</em>.</li> +</ul> +</div> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html new file mode 100644 index 0000000000..c0f9f41dca --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/omnibox/index.html @@ -0,0 +1,70 @@ +--- +title: Sugestões da barra de endereço +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Omnibox +tags: + - Extensões da Web + - Interface do Utilizador +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Omnibox +--- +<div>{{AddonSidebar()}}</div> + +<p>Using the {{WebExtAPIRef("omnibox")}} API, extensions can customize the suggestions offered in the browser address bar's drop-down when the user enters a keyword.</p> + +<p><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>This enables your extension to, for example, search a library of free ebooks or, as in the example above, a repository of code examples.</p> + +<h2 id="Especificando_a_personalização_de_omnibox">Especificando a personalização de omnibox</h2> + +<p>You tell your extension that it is going to customize the address bar suggestions by including the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox">omnibox</a> key and definition of the trigger keyword in its <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file:</p> + +<pre class="brush: json line-numbers language-json"> "omnibox": { "keyword" : "cs" }</pre> + +<p>In the extension's background JavaScript file, using {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, you can optionally define the first suggestion to be displayed in the address bar drop-down. Use this to provide a hint on how to use the feature:</p> + +<pre class="brush: js line-numbers language-js">browser.omnibox.setDefaultSuggestion({ + description: `Search the firefox codebase + (e.g. "hello world" | "path:omnibox.js onInputChanged")` +});</pre> + +<p>You can then add the code to provide the customized content by listening for {{WebExtAPIRef("omnibox.onInputStarted")}}, which is dispatched when the user has typed the keyword and a space, and {{WebExtAPIRef("omnibox.onInputChanged")}}, which is dispatched whenever the user updates the address bar entry. You can then populate the suggestions, in this case building a search of https://searchfox.org/mozilla-central using the term entered by the user:</p> + +<pre class="brush: js">browser.omnibox.onInputChanged.addListener((text, addSuggestions) => { + let headers = new Headers({"Accept": "application/json"}); + let init = {method: 'GET', headers}; + let url = buildSearchURL(text); + let request = new Request(url, init); + + fetch(request) + .then(createSuggestionsFromResponse) + .then(addSuggestions); +});</pre> + +<p>If the extension set a default suggestion using {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, then this will appear first in the drop-down.</p> + +<p>The extension can then listen for the user clicking one of the suggestions, using {{WebExtAPIRef("omnibox.onInputEntered")}}. If the default suggestion is clicked the user's custom term is returned, otherwise the suggestion's string is returned. This also passes information on the user's browser preferences for handling new links. In the code below the user's custom term is used to create a search, otherwise the suggested URL is opened:</p> + +<pre class="brush: js">browser.omnibox.onInputEntered.addListener((text, disposition) => { + let url = text; + if (!text.startsWith(SOURCE_URL)) { + // Update the url if the user clicks on the default suggestion. + url = `${SEARCH_URL}?q=${text}`; + } + switch (disposition) { + case "currentTab": + browser.tabs.update({url}); + break; + case "newForegroundTab": + browser.tabs.create({url}); + break; + case "newBackgroundTab": + browser.tabs.create({url, active: false}); + break; + } +});</pre> + +<p> </p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O repositório dos <a href="https://github.com/mdn/webextensions-examples">exemplos das extensões da Web</a> no GitHub inclui o exemplo <a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search">firefox-code-search</a> que personaliza a barra de pesquisa.</p> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html new file mode 100644 index 0000000000..b3bee11990 --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -0,0 +1,64 @@ +--- +title: Página de opções +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages +tags: + - Extensões da Web +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>Uma página de <strong>Opções</strong> permite-lhe definir as preferências para sua extensão que os seus utilizadores podem alterar. Os utilizadores podem aceder á página das opções para uma extensão a partir do do gestor de extras do navegador:</p> + +<p>{{EmbedYouTube("02oXAcbUv-s")}}</p> + +<p>The way users access the page, and the way it's integrated into the browser's user interface, will vary from one browser to another.</p> + +<ul> +</ul> + +<p>You can open the page programmatically by calling <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a>.</p> + +<p>Options pages 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.</p> + +<h2 id="Especificar_a_página_de_opções">Especificar a página de opções</h2> + +<p>To create an options page, write an HTML file defining the page. This page can include CSS and JavaScript files, like a normal web page. This page, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> example, includes a JavaScript file:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + </head> + +<body> + <form> + <label>Favourite colour</label> + <input type="text" id="colour" > + <button type="submit">Save</button> + </form> + <script src="options.js"></script> +</body> + +</html></pre> + +<p>JavaScript em execução na página pode utilizar a <a href="/pt-PT/Add-ons/WebExtensions/API">API das Extensões da Web</a> que o extra tem <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissões</a> para. Em particular, pode utilziar a APi de <a href="/pt-PT/Add-ons/WebExtensions/API/Armazenamento" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>armazenamento</code></a> para manter as preferências.</p> + +<p>Package the page's files in your extension.</p> + +<p>You also need to include the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> key in your manifest.json file, giving it the URL to the page.</p> + +<pre class="brush: json">"options_ui": { + "page": "options.html", + "browser_style": true +},</pre> + +<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 an options page:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> example extension with options page</li> +</ul> +</div> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..7093d3355c --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,50 @@ +--- +title: Botão da barra de endereço +slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina +tags: + - Extensões da Web + - Interface do Utilizador +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +<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> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html new file mode 100644 index 0000000000..6bbf3f7ce8 --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -0,0 +1,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> diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..2cfa1800a7 --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,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> |