diff options
Diffstat (limited to 'files/pt-br/mozilla/add-ons/webextensions')
31 files changed, 3082 insertions, 0 deletions
diff --git a/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html new file mode 100644 index 0000000000..231797ec59 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html @@ -0,0 +1,115 @@ +--- +title: Anatomia de uma WebExtension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_WebExtension +tags: + - Extensões + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +<p>Uma extensão consiste de uma coleção de arquivos, empacotados para distribuição e instalação. Nesse artigo vamos falar rapidamente sobre os arquivos que podem estar presentes em uma extensão.</p> + +<p>Toda extensão contém um arquivo chamado <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#manifest.json">"manifest.json"</a>. Ele pode conter ponteiros para quatro outros tipos de arquivos:</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages">background pages</a>: implementação de lógica de longa duração</li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a>: executado no contexto de páginas web</li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions">browser action files</a>: implementação de botões na toolbar</li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Web_accessible_resources">web accessible resources</a>: torna o conteúdo do pacote acessível a páginas web e scripts de conteúdo</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11465/webextension-anatomy.svg" style="display: block; height: 871px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<h2 id="manifest.json">manifest.json</h2> + +<p>Esse é o único arquivo que está presente em toda WebExtension. Ele contém metadados básicos sobre a extensão, tais como o nome, a versão e as permissões que ela necessita. Também provê ponteiros para outros arquivos na extensão.</p> + +<p>Para mais detalhes sobre o arquivo "manifest.json", acesse a <a href="/en-US/Add-ons/WebExtensions/manifest.json">página de referência.</a></p> + +<h2 id="Background_pages">Background pages</h2> + +<p>Muitas vezes as WebExtensions precisam manter um estado ou performance operativa de longa duração, independentemente do ciclo de vida das páginas ou janelas do navegador. As background pages e os scripts servem pra isso.</p> + +<p>Background scripts são carregados assim que a extensão tem sua carga concluída, e permanecem carregados até que ela seja desativada ou desinstalada. No script você pode fazer uso de qualquer uma das WbExtensions APIs.</p> + +<p>Os background scripts não possuem acesso direto às páginas web. No entanto, eles podem carregar scripts de conteúdo na página, e podem se comunicar com os scripts de conteúdo usando uma API de envio de mensagens.</p> + +<p>Você pode incluir uma background page usando a chave <code>background</code> no "manifest.json". Você não precisa informar a sua própria background page. Se você incluir uma página de background, um arquivo vazio será criado.</p> + +<pre class="brush: json">// manifest.json + +"background": { + "scripts": ["background-script.js"] +}</pre> + +<p>No entanto, você pode escolher informar a página de background como um arquivo HTML a parte:</p> + +<pre class="brush: json">// manifest.json + +"background": { + "page": "background-page.html" +}</pre> + +<h2 id="Scripts_de_conteúdo">Scripts de conteúdo</h2> + +<p>Use os scripts de conteúdo para acessar e manipular páginas web. Scripts de conteúdo são carregados dentro das páginas web e executados em um contexto particular nessa página.</p> + +<p>Eles podem ver e manipular páginas DOM,</p> + +<p>Scripts de conteúdo podem ver e manipular o DOM das páginas, da mesma forma como os scripts normais carregados pela página.</p> + +<p>Ao contrário dos scripts normais, os scripts de conteúdo podem:</p> + +<ul> + <li>fazer requisições XHR cross-domain</li> + <li>utilizar um pequeno subconjunto de WebExtension APIs</li> + <li>trocar mensagens com os scripts de background e acessar indiretamente todas as WebExtensions APIs.</li> +</ul> + +<p>Scripts de conteúdo não podem acessar diretamente os scripts normais da página, mas podem trocar mensagens com eles através do uso da API window.postMessage.</p> + +<p>Normalmente, quando falamos de scripts de conteúdo, estamos nos referindo a JavaScript, mas é possível injetar CSS em paginas web que utilizam o mesmo mecanismo.</p> + +<p>Você pode injetar scripts de conteúdo em páginas web de duas formas: anexando os scripts para todas as páginas correspondentes a um padrão de URL, ou através de programação a partir de um script de background.</p> + +<p>Para injetar scripts em páginas com base na URL, use a chave <code>content_scripts</code> no "manifest.json", informando um ou mais scripts e um array com os padrões:</p> + +<pre class="brush: json">// manifest.json + +"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["my-script.js"] + } +]</pre> + +<p>Se a URL da página corresponder aos padrões passados na chave <code>matches</code>, os scripts passados na chave <code>js</code> serão carregados.</p> + +<p>Para injetar os scripts na página via programação (por exemplo, quando o usuário clicar em um botão) use a API <code>tabs</code>:</p> + +<pre class="brush: js">// background.js + +chrome.tabs.executeScript({ + file: "my-script.js" +});</pre> + +<p>Aprenda mais sobre scripts de conteúdo lendo sua <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">documentação</a>.</p> + +<h2 id="Ações_de_navegador">Ações de navegador</h2> + +<p>Uma "ação de navegador" é um botão que você pode adicionar na barra de ferramentas do Firefox. O botão tem um ícone. Você pode informar múltiplos ícones em diferentes tamanhos: fazendo isso, o navegador irá selecionar o ícone mais adequado para a densidade de pixels da tela.</p> + +<p>Opcionalmente, você pode definir um popup para o botão usando HTML, CSS e JavaScript.</p> + +<p>Se você não definir um popup, quando o usuário clicar no botão um evento será disparado, que pode ser ouvido nos scripts de background.</p> + +<p>Se você define um popup, o evento não é disparado: ao invés disso, o popup será mostrado para que o usuário possa interagir. Os scripts executados em popup são capazes de utilizar WebExtension APIs.</p> + +<p>Para aprender mais sobre ações de navegador, consulte a página da API.</p> + +<h2 id="Recursos_acessíveis_na_web">Recursos acessíveis na web</h2> + +<p>Recursos acessíveis na web são recursos como imagens, HTML, CSS, JavaScript, que podem ser incluídos na extensão e quer tornar acessível aos scripts de conteúdo e aos scripts da página. Eles podem ser referenciados a partir de scripts de página e de conteúdo, usando um URI scheme especial.</p> + +<p>Por exemplo, se um script de conteúdo quer inserir algumas imagens em páginas da web, você pode incluí-los na extensão e torná-los acessíveis na web. Em seguida o script de conteúdo pode criar e acrescentar tags <a href="/en-US/docs/Web/HTML/Element/img">img</a> que fazem referência às imagens através do atributo <code>src</code>.</p> + +<p>Para entender mais, veja a documentação sobre chaves no manifest.json em <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">recursos acessíveis na web.</a></p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.html new file mode 100644 index 0000000000..a4e4bd3254 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.html @@ -0,0 +1,52 @@ +--- +title: alarms +slug: Mozilla/Add-ons/WebExtensions/API/alarms +tags: + - alarm +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms +--- +<div>{{AddonSidebar}}</div> + +<p>Executar um código agendado para um horário específico no futuro. Isto é como o <code><a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout()</a></code> e <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code>, exceto essas funções não funcionam no segundo plano com páginas carregadas sob demanda.</p> + +<p>Para usar estas API você precisa ter a "alarms" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("alarms.Alarm")}}</dt> + <dd>Informações sobre um alarme em particular.</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("alarms.create()")}}</dt> + <dd>Cria um alarme.</dd> + <dt>{{WebExtAPIRef("alarms.get()")}}</dt> + <dd>Obtém um alarme específico dado seu nome.</dd> + <dt>{{WebExtAPIRef("alarms.getAll()")}}</dt> + <dd>Obtém todos os alarmes agendados.</dd> + <dt>{{WebExtAPIRef("alarms.clear()")}}</dt> + <dd>Limpa um alarme específico dado seu nome.</dd> + <dt>{{WebExtAPIRef("alarms.clearAll()")}}</dt> + <dd>Limpa todos os alarmes agendados.</dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("alarms.onAlarm")}}</dt> + <dd>Disparado quando o alarme acaba.</dd> +</dl> + +<h2 id="Compatibilidade_dos_browsers">Compatibilidade dos browsers</h2> + +<p>{{Compat("webextensions.api.alarms")}} {{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API Chromium's <a href="https://developer.chrome.com/extensions/alarms"><code>chrome.alarms</code></a> .</p> + +<p>Dados de compatibilidade do Microsoft Edge fornecidos pela Microsoft Corporation aqui inclusos sob a Creative Commons Attribution 3.0 United States License.</p> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.html new file mode 100644 index 0000000000..75aa9ada3c --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.html @@ -0,0 +1,119 @@ +--- +title: bookmarks +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks +--- +<div>{{AddonSidebar}}</div> + +<p>A API <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> {{WebExtAPIRef("bookmarks")}} permite uma extensão interagir e manipular o sistema de favoritos do navegador. Você pode pode usá-lo para favoritar páginas, obter favoritos existentes e, editar, remover ou organizar os favoritos.</p> + +<p>Para utilizar esta API, uma extensão deve ser requisitada para o "bookmarks" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> em seu arquivo <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> .</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}</dt> + <dd>Representa um favorito ou um diretório de favoritos como árvore.</dd> + <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNodeType")}}</dt> + <dd>O enum {{jsxref("String")}} o qual descreve se um nó na árvore é ou não um favorito, uma pasta ou um separador.</dd> + <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}</dt> + <dd>O enum {{jsxref("String")}} o qual especifica porque um favorito ou uma pasta não pode ser modificado.</dd> + <dt>{{WebExtAPIRef("bookmarks.CreateDetails")}}</dt> + <dd>Contém informações ao qual é passada para a função {{WebExtAPIRef("bookmarks.create()")}} quando um novo favorito é criado.</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("bookmarks.create()")}}</dt> + <dd>Cria um favorito ou uma pasta.</dd> + <dt>{{WebExtAPIRef("bookmarks.get()")}}</dt> + <dd>Retrieves one or more {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s, given a bookmark's ID or an array of bookmark IDs.</dd> + <dt>{{WebExtAPIRef("bookmarks.getChildren()")}}</dt> + <dd>Recupera os filhos especificados {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}.</dd> + <dt>{{WebExtAPIRef("bookmarks.getRecent()")}}</dt> + <dd>Recupera um número requisitado de favoritos adicionados recentemente.</dd> + <dt>{{WebExtAPIRef("bookmarks.getSubTree()")}}</dt> + <dd>Recupera uma parte da árvore de favoritos, iniciando por um nó previamente especificado.</dd> + <dt>{{WebExtAPIRef("bookmarks.getTree()")}}</dt> + <dd>Recupera a árvore de favoritos inteira em um array de objetos {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}.</dd> + <dt>{{WebExtAPIRef("bookmarks.move()")}}</dt> + <dd>Move o especificado {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} para um novo local dentro da árvore de favoritos.</dd> + <dt>{{WebExtAPIRef("bookmarks.remove()")}}</dt> + <dd>Remove um favorito ou uma pasta de favoritos vazia dado o ID do nó.</dd> + <dt>{{WebExtAPIRef("bookmarks.removeTree()")}}</dt> + <dd>Remove recursivamente uma pasta de favoritos; isto é; dado o ID do nó da pasta e todos seus descendentes.</dd> + <dt>{{WebExtAPIRef("bookmarks.search()")}}</dt> + <dd>Procura por {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s que batam com o conjunto de critérios especificados.</dd> + <dt>{{WebExtAPIRef("bookmarks.update()")}}</dt> + <dd>Atualiza o título e/ou autor do favorito de uma URL, ou o nome de uma pasta de favoritos dado o ID do favorito.</dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("bookmarks.onCreated")}}</dt> + <dd>Disparado quando um favorito ou uma pasta é criado.</dd> + <dt>{{WebExtAPIRef("bookmarks.onRemoved")}}</dt> + <dd>Disparado quando um favorito ou uma pasta é removido. Quando uma pasta é removida recursivamente, uma simples notificação é disparada para o diretório, e nenhum para seu conteúdo.</dd> + <dt>{{WebExtAPIRef("bookmarks.onChanged")}}</dt> + <dd>Disparado quando um favorito ou pasta é modificado. Atualmente, somente mudanças no <code>title</code> e <code>url</code> o disparam.</dd> + <dt>{{WebExtAPIRef("bookmarks.onMoved")}}</dt> + <dd>Disparado quando um favorito ou pasta é movido para uma pasta pai diferente ou para um novo local dentro deste pasta.</dd> + <dt>{{WebExtAPIRef("bookmarks.onChildrenReordered")}}</dt> + <dd>Fired when the user has sorted the children of a folder in the browser's UI. This is not called as a result of a {{WebExtAPIRef("bookmarks.move", "move()")}}.</dd> + <dt>{{WebExtAPIRef("bookmarks.onImportBegan")}}</dt> + <dd>Disparado quando uma sessão de importação de favoritos começa. Custosos observers {{WebExtAPIRef("bookmarks.onCreated")}} atualizam até o {{WebExtAPIRef("bookmarks.onImportEnded")}} ser disparado. Observers deveriam ainda manipular outras notificações imediatamente.</dd> + <dt>{{WebExtAPIRef("bookmarks.onImportEnded")}}</dt> + <dd>Disparado quando uma sessão de importação de favoritos é finalizada.</dd> +</dl> + +<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2> + +<p>{{Compat("webextensions.api.bookmarks")}}</p> + +<div class="hidden note"> +<p>A sessão "Chrome incompatibilities" está incluso no <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> usando a macro <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a>.</p> + +<p>Se precisar atualizar este conteúdo, edite <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, então recarregue a página para ver suas alterações.</p> +</div> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API Chromium <a href="https://developer.chrome.com/extensions/bookmarks"><code>chrome.bookmarks</code></a> . Esta documentação é derivada do <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json"><code>bookmarks.json</code></a> no código do Chromium.</p> + +<p>Os dados de compatibilidade do Microsoft Edge são fornecidos pela Microsoft Corporation e aqui estão sob a Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/browseraction/index.html new file mode 100644 index 0000000000..29eae4f07f --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/browseraction/index.html @@ -0,0 +1,128 @@ +--- +title: browserAction +slug: Mozilla/Add-ons/WebExtensions/API/browserAction +tags: + - API + - Add-ons + - Extensões + - Interfaces + - Não Padrão + - Referencia + - browserAction +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction +--- +<div>{{AddonSidebar}}</div> + +<p>Adiciona um botão a barra de ferramentas do navegador.</p> + +<p>Uma <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> é um botão na barra de ferramentas do navegador.</p> + +<p>Você pode associar um popup junto ao botão. O popup é especificado usando HTML, CSS e JavaScript, apenas como uma página web normal. O JavaScript rodando no popup tem o mesmo acesso a API WebExtension completa, assim como seus scripts em backend, mas seu contexto global é o popup, não a página exibida no navegador atualmente. Para afetar páginas web você precisa comunicá-las via <a href="/en-US/Add-ons/WebExtensions/Modify_a_web_page#Messaging">messages</a>.</p> + +<p>Se você especificar um popup ele está exibido — e o conteúdo será carregado — quando o usuário clicar no ícone. Você não especificar um popup, quando o usuário clicar no ícone um evento será disparado para sua extensão.</p> + +<p>Você pode definir muitas ações de propriedades do navegador de modo declarativo usando a chave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a> </code>no arquivo manifest.json.</p> + +<p>Com a API <code>browserAction você pode</code>:</p> + +<ul> + <li>Usar {{WebExtAPIRef("browserAction.onClicked")}} para escutar por cliques no ícone.</li> + <li>Atribuir e obter as propriedades do ícone — icone, titulo, popup, e assim por diante. Você pode obter e atribui-los globalmente para todas as abas, ou para uma aba específica informando o ID como um argumento adicional.</li> +</ul> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("browserAction.ColorArray")}}</dt> + <dd>Um array de quatro números inteiros entre 0-55 definido uma cor RGB.</dd> + <dt>{{WebExtAPIRef("browserAction.ImageDataType")}}</dt> + <dd>Dados do pixel de uma imagem. Deve ser um objeto <code><a href="/en-US/docs/Web/API/ImageData">ImageData</a></code> (por exemplo, de um elemento {{htmlelement("canvas")}}).</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("browserAction.setTitle()")}}</dt> + <dd>Atribui ação de título do navegador. Ele será exibido em um tooltip.</dd> + <dt>{{WebExtAPIRef("browserAction.getTitle()")}}</dt> + <dd>Obtém a ação de título do navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.setIcon()")}}</dt> + <dd>Atribui a ação de ícone ao navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.setPopup()")}}</dt> + <dd>Atribui o documento HTML que será aberto como um popup quando o usuário clicar na ação de ícone do navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.getPopup()")}}</dt> + <dd>Obtém o documento HTML atribuido como uma ação de popup do navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.openPopup()")}}</dt> + <dd>Abre a ação popup do navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.setBadgeText()")}}</dt> + <dd>Atribui a ação do texto distintivo do navegador. O emblema é exibido acima do ícone.</dd> + <dt>{{WebExtAPIRef("browserAction.getBadgeText()")}}</dt> + <dd>Obtém o texto do emblema do navegador.</dd> + <dt>{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}</dt> + <dd>Atribui a cor de fundo do emblema.</dd> + <dt>{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}</dt> + <dd>Obtém a cor de fundo do emblema.</dd> + <dt>{{WebExtAPIRef("browserAction.enable()")}}</dt> + <dd>Habilita a ação do navegador para uma aba. Por padrão, ações são habilitadas para todas as abas.</dd> + <dt>{{WebExtAPIRef("browserAction.disable()")}}</dt> + <dd>Desabilita a ação para uma aba do navegador, significando que ela não pode ser clicada quando aquela aba estiver ativa.</dd> + <dt>{{WebExtAPIRef("browserAction.isEnabled()")}}</dt> + <dd>Verifica se a ação do navegador está ou não habilitada.</dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("browserAction.onClicked")}}</dt> + <dd>Disparado quando uma ação do ícone do navegador é clicada. Este evento não será disparado quando a ação do navegador tiver um popup.</dd> +</dl> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{Compat("webextensions.api.browserAction")}}</p> + +<div class="hidden note"> +<p>A sessão "Chrome incompatibilities" está inclusa em <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> usando a macro <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a>.</p> + +<p>Se precisar atualizar este conteúdo edite <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, então recarregue esta página para visualizar suas alterações.</p> +</div> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a> do Chromium. Este documento é derivado do <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> no código do Chromium.</p> + +<p>Os dados de compatibilidade do Microsoft Edge são fornecidos Microsoft Corporation e estão aqui inclusos sob a Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/browsersettings/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/browsersettings/index.html new file mode 100644 index 0000000000..197bc1ab3e --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/browsersettings/index.html @@ -0,0 +1,60 @@ +--- +title: browserSettings +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings +tags: + - Extensões + - Referencia +translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings +--- +<div>{{AddonSidebar}}</div> + +<div>Habilita uma extensão para modificar certas configurações globais do navegador. Cada propriedade desta API é um objeto {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}}, provendo a capacidade de modificar uma configuração particular.</div> + +<div> </div> + +<div>Devido estas serem configurações globais, é possível haver conflito entre extensões. Veja a documentação <code><a href="/en-US/Add-ons/WebExtensions/API/types/BrowserSetting/set">BrowserSetting.set()</a></code> para detalhes de como ligar com conflitos .</div> + +<div> </div> + +<div> +<p>Para usar esta API você precisa ter a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissão</a> "browserSettings".</p> +</div> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt>{{WebExtAPIRef("browserSettings.allowPopupsForUserEvents")}}</dt> + <dd>Determina se o código em execução nas páginas podem mostrar popups em resposta a eventos do usuário.</dd> + <dt>{{WebExtAPIRef("browserSettings.cacheEnabled")}}</dt> + <dd>Determina se o cache do navegador está ou não habilitado.</dd> + <dt>{{WebExtAPIRef("browserSettings.closeTabsByDoubleClick")}}</dt> + <dd>Determina se a aba selecionada pode ser fechada com um duplo click.</dd> + <dt>{{WebExtAPIRef("browserSettings.contextMenuShowEvent")}}</dt> + <dd>Determina o evento do mouse que dispara um menu de contexto de popup.</dd> + <dt>{{WebExtAPIRef("browserSettings.homepageOverride")}}</dt> + <dd>Lê o valor da página inicial do navegador.</dd> + <dt>{{WebExtAPIRef("browserSettings.imageAnimationBehavior")}}</dt> + <dd>Determina como o navegador trata imagens animadas.</dd> + <dt>{{WebExtAPIRef("browserSettings.newTabPageOverride")}}</dt> + <dd>Lê o valor da nova aba do navegador.</dd> + <dt>{{WebExtAPIRef("browserSettings.newTabPosition")}}</dt> + <dd>Controla a posição de abas recentemente abertas relativa as abas já presentes.</dd> + <dt>{{WebExtAPIRef("browserSettings.openBookmarksInNewTabs")}}</dt> + <dd>Determina se os favoritos são abertos na aba atual ou em uma nova aba.</dd> + <dt>{{WebExtAPIRef("browserSettings.openSearchResultsInNewTabs")}}</dt> + <dd>Determina se a busca de resultados é aberta na aba atual ou em uma nova.</dd> + <dt>{{WebExtAPIRef("browserSettings.openUrlbarResultsInNewTabs")}}</dt> + <dd>Determina se as sugestões do autocompletar da barra de endereços são abertas na aba atual ou em uma nova.</dd> + <dt>{{WebExtAPIRef("browserSettings.overrideDocumentColors")}}</dt> + <dd>Controla se as cores de escolha do usuário sobrescreverão as cores das páginas.</dd> + <dt>{{WebExtAPIRef("browserSettings.useDocumentFonts")}}</dt> + <dd>Controle se o navegador usará as fontes especificadas pela página web ou somente fontes embutidas.</dd> + <dt>{{WebExtAPIRef("browserSettings.webNotificationsDisabled")}}</dt> + <dd>Previne que os sites exibam notificações usando a API Web <code><a href="/en-US/docs/Web/API/notification">Notification</a></code>.</dd> +</dl> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>{{Compat("webextensions.api.browserSettings")}}</p> + +<p>{{WebExtExamples("h2")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/index.html new file mode 100644 index 0000000000..e956a583ab --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/index.html @@ -0,0 +1,120 @@ +--- +title: browsingData +slug: Mozilla/Add-ons/WebExtensions/API/browsingData +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData +--- +<div>{{AddonSidebar}}</div> + +<p>Habilita extensões a limpar os dados que estão acumulados enquando o usuário navega.</p> + +<p>Na API <code>browsingData</code>, os dados de navegação são divididos em tipos:</p> + +<ul> + <li>cache do browser</li> + <li>cookies</li> + <li>downloads</li> + <li>histórico</li> + <li>armazenamento local</li> + <li>dados de plugin</li> + <li>dados de formulários salvos</li> + <li>senhas salvas</li> +</ul> + +<p>Você pode usar a função {{WebExtAPIRef("browsingData.remove()")}} para remover qualquer combinação desses tipos. Há também funções específicas para remover cada tipo de data em particular, como por exemplo {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} e assim por diante.</p> + +<p>Todas funções <code>browsingData.remove[X]()</code> pegam o objeto {{WebExtAPIRef("browsingData.RemovalOptions")}} que você usa para controlar outros dois aspectos da remoção de dados:</p> + +<ul> + <li>quão antigos são os dados para a remoção</li> + <li>se é para remover dados de páginas normais, ou também para hospedar aplicativos web ou add-ons. Observe que esta opção ainda não é suportada no Firefox.</li> +</ul> + +<p>Finalmente, a API {{WebExtAPIRef("browsingData.settings()")}} fornece uma função que retorna o atual valor das configurações da funcionalidade "Limpar Histórico".</p> + +<p>Para usar esta API você deve ter a <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">permissão de API</a> "browsingData".</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.DataTypeSet")}}</dt> + <dd>Objeto usado para especificar o tipo de dado para remoção: por exemplo, histórico, downloads, senhas e assim por diante.</dd> + <dt>{{WebExtAPIRef("browsingData.RemovalOptions")}}</dt> + <dd>Objeto usado para especificar o quanto tempo para remoção de dados, e se remover dados adicionados em uma navegação web normal, por aplicativos hospedados ou por add-ons.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.remove()")}}</dt> + <dd>Remove os dados de navegação especificado pelo seu tipo.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCache()")}}</dt> + <dd>Limpa o cache do navegador.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCookies()")}}</dt> + <dd>Remove os cookies.</dd> + <dt>{{WebExtAPIRef("browsingData.removeDownloads()")}}</dt> + <dd>Remove a lista de arquivos baixados.</dd> + <dt>{{WebExtAPIRef("browsingData.removeFormData()")}}</dt> + <dd>Limpa os dados de um formulário salvo.</dd> + <dt>{{WebExtAPIRef("browsingData.removeHistory()")}}</dt> + <dd>Limpa o histórico do navegador.</dd> + <dt>{{WebExtAPIRef("browsingData.removeLocalStorage()")}}</dt> + <dd>Limpa qualquer <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> criado por websites.</dd> + <dt>{{WebExtAPIRef("browsingData.removePasswords()")}}</dt> + <dd>Limpa passwords salvos.</dd> + <dt>{{WebExtAPIRef("browsingData.removePluginData()")}}</dt> + <dd>Limpa os dados associados com plugins.</dd> + <dt>{{WebExtAPIRef("browsingData.settings()")}}</dt> + <dd>Obtém o valor atual de configuração da funcionalidade "Limpar Histórico" do navegador.</dd> +</dl> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada para dados estruturados. Se deseja contribuir, favor verificar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos enviar um pull request.</div> + +<p>{{Compat("webextensions.api.browsingData", 2)}}</p> + +<div class="note hidden"> +<p>A sessão "incompatibilidades do Chrome" está inclusa pela <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> usando o <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>Se precisar atualizar este conteúdo, edite <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, então recarregue esta página para visualizar suas alterações.</p> +</div> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API <a href="https://developer.chrome.com/extensions/browsingData"><code>chrome.browsingData</code></a> do Chromium.</p> + +<p>Os dados de compatibilidade do Microsoft Edge compatibility são fornecidos pela Microsoft Corporation e aqui estão inclusos sob a Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/clipboard/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/clipboard/index.html new file mode 100644 index 0000000000..4399588cb3 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/clipboard/index.html @@ -0,0 +1,34 @@ +--- +title: clipboard +slug: Mozilla/Add-ons/WebExtensions/API/clipboard +tags: + - Área de transferência +translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard +--- +<div>{{AddonSidebar}}</div> + +<p>A API de área de transferência habilita uma extensão para copiar itens para a área de transferência do sistema. Atualmente a API suporta apenas a cópia de imagens, mas é pretendido suportar a cópia de texto e HTML no futuro.</p> + +<p>Esta API WebExtension existe primariamente por causa que o padrão da API web para área de transferência <a href="https://w3c.github.io/clipboard-apis/#writing-to-clipboard">não suporta escrita de imagens</a>. Se e quando esta funcionalidade for adicionada na API wb padrão, esta API pode ser depreciada.</p> + +<p>Leitura da área de transfência não é suportada por esta API, devido esta já poder ser lida usando as APIs padrão da plataforma web. Veja <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard#Reading_from_the_clipboard">interagindo com a área de transferência</a>.</p> + +<p>Esta API é baseada na API <code><a class="external external-icon" href="https://developer.chrome.com/apps/clipboard">clipboard</a></code> do Chrome's API, mas esta API está disponível somente para o Chrome.</p> + +<p>Para utilizar esta API voce precisa ter a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissão</a> "clipboardWrite".</p> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("clipboard.setImageData()")}}</dt> + <dd>Copia uma imagem para a área de transferência.</dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{Compat("webextensions.api.clipboard", 1, 1)}} {{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API Chromium <a href="https://developer.chrome.com/apps/clipboard"><code>chrome.clipboard</code></a>.</p> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/commands/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/commands/index.html new file mode 100644 index 0000000000..876c09a9a9 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/commands/index.html @@ -0,0 +1,83 @@ +--- +title: commands +slug: Mozilla/Add-ons/WebExtensions/API/commands +translation_of: Mozilla/Add-ons/WebExtensions/API/commands +--- +<div>{{AddonSidebar}}</div> + +<p>Escuta por usuário executando comandos que você registrou usando o <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>commands</code> manifest.json key</a>.</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("commands.Command")}}</dt> + <dd>Objeto representando um comando. Contém a informação especificada no comando <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>commands</code> manifest.json key</a>.</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("commands.getAll")}}</dt> + <dd> + <p>Obtém todos os comandos registrados para esta extensão.</p> + </dd> + <dt>{{WebExtAPIRef("commands.reset")}}</dt> + <dd> + <p>Reseta a descrição do comando dado e atalho para os valores dados na chave do manifesto.</p> + </dd> + <dt>{{WebExtAPIRef("commands.update")}}</dt> + <dd> + <p>Modifica a descrição ou atalho dado um comando.</p> + </dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("commands.onCommand")}}</dt> + <dd> + <div>Disparado quando um comando é executado usando seu atalho associado ao teclado.</div> + </dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{Compat("webextensions.api.commands")}}{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API <a href="https://developer.chrome.com/extensions/commands"><code>chrome.commands</code></a> do Chromium.</p> + +<p>Os dados de compatibilidade do Microsoft Edge são fornecidos pela Microsoft Corporation e estão aqui inclusos sob a Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/contentscripts/index.html new file mode 100644 index 0000000000..f158dcdee4 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -0,0 +1,38 @@ +--- +title: contentScripts +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts +--- +<div>{{AddonSidebar}}</div> + +<p>Use esta API para registrar o conteúdo de scripts. Registrando um conteúdo de scripts instrui o navegador para inserir conteúdo de script fornecido em páginas que batem com um padrão de URL fornecida.</p> + +<p>Esta API é muito similar a chave do <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">"content_scripts"</a></code> no manifest.json key, exceto pelo <code>"content_scripts"</code>, o conjunto de conteúdo de scripts a padrões associados são fixados no momento da instalação. Com a API <code>contentScripts</code>, uma extensão pode registrar e desregistrar scripts em tempo de execução.</p> + +<p>Para usar a API, invoque {{WebExtAPIRef("contentScripts.register()")}} passando um objeto definido para registrar os scripts, os padrões de URL e outras opções. Ele retorna uma <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> que é resolvida com o objeto {{WebExtAPIRef("contentScripts.RegisteredContentScript")}}.</p> + +<p>O objeto <code>RegisteredContentScript</code> represente os scripts que foram registrados com a chamada <code>register()</code>. Ele define um método <code>unregister()</code> que você pode usar para desregistrar o conteúdo de scripts. O conteúdo de scripts também são desregistrados automaticamente quando a página que os criou é destruida. Por exemplo, se estão registrados para uma página em segundo plano serão desregistrados automaticamente quando esta página for destruida, e se eles estão registrados para uma barra lateral ou popup, também serão desregistrados automaticamente quando essas forem fechadas.</p> + +<p>Não há permissão para a API <code>contentScripts</code>, mas uma extensão pode ter a <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">permissão de host</a> apropriada para algum padrão passado para o <code>register()</code>.</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}</dt> + <dd> + <p>Um objeto deste tipo é retornado pela função {{WebExtAPIRef("contentScripts.register()")}} . Ele representa o conteúdo dos scripts que foram registrados por aquela chamada, e podem ser usados para desregistrar o conteúdo do script.</p> + </dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.register()")}}</dt> + <dd>Registra o conteúdo dos scripts fornecidos.</dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{Compat("webextensions.api.contentScripts", 10, 1)}}</p> + +<p> {{WebExtExamples("h2")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/contextualidentities/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/contextualidentities/index.html new file mode 100644 index 0000000000..652e9d08b2 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/contextualidentities/index.html @@ -0,0 +1,62 @@ +--- +title: contextualIdentities +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities +tags: + - Extensões Web + - Identidade contextual +translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities +--- +<div>{{AddonSidebar}}</div> + +<p>Trabalhar com identidades contextuais: listar, criar, remover e atualizar identidades contextuais.</p> + +<p>"Identidades conceituais", também conhecido como "containers", consiste em uma funcionalidade do navegador cuja premissa é que usuários assumem multiplas identidades quando navegam na internet, e desejam manter alguma separação entre tais identidades. Por exemplo, um usuário pode considerar sua "identidade de trabalho" separada de sua "identidade pessoal", e não desejar compartilhar cookies entre esses dois contextos.</p> + +<p>Com a funcionalidade de identidades contextuais, cada uma possui um nome, cor e um ícone. Novas abas são atribuidas a uma identidade, e o nome, ícone e cor aparecerão na barra de endereço. Internamente, cada identidade guarda seu próprio cookie e não os compartilha entre outras abas.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14719/containers.png" style="display: block; height: 259px; margin-left: auto; margin-right: auto; width: 515px;">Identidade contextual é uma funcionalidade experimental no Firefox e está habilitado apenas no Firefox Nightly. Para habilitá-lo em outras versões do Firefox, atribua true as seguintes preferências: <code>privacy.userContext.enabled</code>. Observe que embora identidades contextuais estejam disponíveis no Firefox para Android, não há uma interface gráfica funcionando com ela para esta versão de navegador.</p> + +<p>Antes do Firefox 57, a API <code>contextualIdentities</code> é disponível apenas se a funcionalidade de identidade contextual está habilitada por si mesma. Se uma extensão tentou usar a API <code>contextualIdentities</code> API sem a funcionalidade estar habilitada, então as chamadas do método deveria resolver suas promises com <code>false</code>.</p> + +<p>Para o Firefox 57 em diante, se uma extensão que usa a API <code>contextualIdentities</code> está instalada, então a funcionalidade de identidade contextual será habilitada automaticamente. Observe que embora ainda é possível para o usuário desabilitar a funcionalidade usando a preferência "privacy.userContext.enabled". Isse isso ocorrer, então a chamada do método <code>contextualIdentities</code> rejeitará suas promises com uma mensagem de erro.</p> + +<p>Para mais informações sobre identidade contextual no Firefox veja <a href="https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers">este guia</a>.</p> + +<p>Identidades contextuais atualmente não são suportadas em outros navegadores.</p> + +<p>Para usar esta API você precisará incluir a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissão</a> "contextualIdentities" em seu arquivo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("contextualIdentities.ContextualIdentity")}}</dt> + <dd>Contém informações sobre uma identidade contextual.</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("contextualIdentities.create()")}}</dt> + <dd>Cria uma nova identidade contextual.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.get()")}}</dt> + <dd>Recupera uma única identidade contextual, dado o ID do cookie que armazena.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.query()")}}</dt> + <dd>Recupera todas identidades contextuais, ou todas com um nome em particular.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.update()")}}</dt> + <dd>Atualiza as propriedades existentes de uma identidade contextual.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.remove()")}}</dt> + <dd>Exclui uma identidade contextual.</dd> + <dt> + <h2 id="Eventos">Eventos</h2> + </dt> + <dt>{{WebExtAPIRef("contextualIdentities.onCreated")}}</dt> + <dd>Disparado quando uma identidade contextual é criada.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.onRemoved")}}</dt> + <dd>Disparado quando uma identidade contextual é removida.</dd> + <dt>{{WebExtAPIRef("contextualIdentities.onUpdated")}}</dt> + <dd>Disparado quando uma ou mais propriedades de uma identidade contextual é atualizada.</dd> +</dl> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>{{Compat("webextensions.api.contextualIdentities")}} {{WebExtExamples("h2")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/cookies/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/cookies/index.html new file mode 100644 index 0000000000..ac53214831 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/cookies/index.html @@ -0,0 +1,162 @@ +--- +title: cookies +slug: Mozilla/Add-ons/WebExtensions/API/cookies +translation_of: Mozilla/Add-ons/WebExtensions/API/cookies +--- +<div>{{AddonSidebar}}</div> + +<p>Habilita extensões a obter e atribuir cookies, e ser notificado quando eles mudam.</p> + +<p>Para usar esta API, você precisa incluir a <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> "cookies" em seu arquivo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, bem como a <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permissions</a> para os sites cujos cookies você precisa acessar. Veja <a href="/en-US/Add-ons/WebExtensions/API/cookies#Permissions">cookie Permissions</a>.</p> + +<h2 id="Permissões">Permissões</h2> + +<p>Para usar esta API, uma extensão especificar a "cookies" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> em seu arquivo manifest, junto com a <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permissions</a> para qualquer site que deseja acessar os cookies. O add-on pode ler ou escrever qualquer cookie no qual poderia ser lido ou escrito pela URL correspondente nas permissões de host, por exemplo:</p> + +<dl> + <dt><code>http://*.example.com/</code></dt> + <dd> + <p>Uma extensão com esta permissão de host pode:</p> + + <ul> + <li>Ler um cookie inseguro para <code>www.example.com</code>, com qualquer caminho.</li> + <li>Escrever um cookie seguro ou inseguro para <code>www.example.com</code>, com qualquer caminho.</li> + </ul> + + <p><em>não </em>pode:</p> + + <ul> + <li>Ler um cookie seguro de <code>www.example.com</code>.</li> + </ul> + </dd> + <dt><code>http://www.example.com/</code></dt> + <dd> + <p>Uma extensão com esta permissão de host pode:</p> + + <ul> + <li>Ler um cookie não seguro para <code>www.example.com</code>, com qualquer caminho.</li> + <li>Ler um cookie não seguro para <code>.example.com</code>, com qualquer caminho.</li> + <li>Escrever um cookie seguro ou não seguro para <code>www.example.com</code> com qualquer caminho.</li> + <li>Escrever um cookie seguro ou não seguro para <code>.example.com</code> com qualquer caminho.</li> + </ul> + + <p><em>não </em>pode:</p> + + <ul> + <li>Ler ou escrever um cookie para <code>foo.example.com</code>.</li> + <li>Ler ou escrever um cookie para <code>foo.www.example.com</code>.</li> + </ul> + </dd> + <dt><code>*://*.example.com/</code></dt> + <dd> + <p>Uma extensão com esta permissão de host pode:</p> + + <ul> + <li>Ler ou escrever um cookie seguro ou inseguro para <code>www.example.com</code> com qualquer caminho.</li> + </ul> + </dd> +</dl> + +<h2 id="Isolamento_de_primera_parte">Isolamento de primera parte</h2> + +<p>Cookies de terceiros são aquleles enviados por sites em que você está num dado momento, por exemplo:</p> + +<ol> + <li>Você acessa <a href="http://bbc.com">bbc.com</a>. Ele contém uma publicidade do <a href="http://tracker.com">tracker.com</a> que atribui um cookie associado com o domínio "<a href="http://tracker.com">tracker.com</a>".</li> + <li>Você acessa <a href="http://cnn.com">cnn.com</a>. Ele também contém uma publicidade do <a href="http://tracker.com">tracker.com</a> que atribui um cookie associado ao domínio "<a href="http://tracker.com">tracker.com</a>".</li> + <li>Eventualmente ambos os cookies podem ser enviados para <a href="http://tracker.com">tracker.com</a>. Quem então pode descobrir que o mesmo usuário visitou ambos os sites.</li> +</ol> + +<p>Quando um isolamento de primeira parte está ativo, cookies são ainda qualificados pelo domínio da página original visitada pelo usuário (essencialmente, o domínio exibe o usuário na barra da URL, também conhecido como "domínio de primeira parte). Isto significa que não é possivel para um rastreador correlacionar o cookie da <a href="http://bbc.com">bbc.com</a> com o cookie da <a href="http://cnn.com">cnn.com</a>, então o rastreador não pode monitorar um simples usuários através de ambos os sites.</p> + +<p>Isolamento de primera parte pode ser habilitado diretamente pelo usuário ajustando a configuração do navegador , e pode ser atribuia do extensões usando a configuração <code><a href="/en-US/Add-ons/WebExtensions/API/privacy/websites#Properties">firstPartyIsolate</a></code> atribuida a API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy">privacy</a></code>. Observe que este isolamento de primeira parte está habilitado por padrão no navegador <a href="https://www.torproject.org/">Tor</a>.</p> + +<p>Na API <code>cookies</code>, o domínio de primeira parte é representado usando o atributo <code>firstPartyDomain</code>. Todos os cookies atribuidos enquanto o isolamento de primeira parte está habilitado terá este atributo atribuito para o domínio da página original. No exemplo acima, deveria ser "<a href="http://bbc.com">bbc.com</a>" para um cookie e "<a href="http://cnn.com">cnn.com</a>" para outro. Todos os cookies atribuidos pelos websites enquanto o isolamento de primeira parte estiver desabilitado terão sua propriedade atribuida a uma string vazia.<br> + <br> + As APIs {{WebExtAPIRef("cookies.get()")}}, {{WebExtAPIRef("cookies.getAll()")}}, {{WebExtAPIRef("cookies.set()")}} and {{WebExtAPIRef("cookies.remove()")}} aceitam a opção <code>firstPartyDomain</code>.<br> + <br> + Quando o isolamento de primeira parte está habilitado, você deve informar esta opção ou a chamada da API irá falhar e retornar uma promise rejeitada. For <code>get()</code>, <code>set()</code>, and <code>remove()</code> you must pass a string value. Para um <code>getAll()</code>, você pode passar <code>null</code>, e irá obter todos os cookies que possuem ou não um valor não vazio para o <code>firstPartyDomain</code>.<br> + <br> + Quando o isolamento de primeira parte está desabilitado, o parâmetro <code>firstPartyDomain</code> é opcional por padrão é uma string vazia. Uma string não vazia pode ser utilizada para recuperar ou podificar cookies de isolamento de primeira parte. Da mesma forma, passando <code>null</code> como <code>firstPartyDomain</code> para o <code>getAll()</code> retornará todos os cookies.</p> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("cookies.Cookie")}}</dt> + <dd>Representa a informação sobre um cookie HTTP.</dd> + <dt>{{WebExtAPIRef("cookies.CookieStore")}}</dt> + <dd>Representa um cookie armazenado no navegador.</dd> + <dt>{{WebExtAPIRef("cookies.OnChangedCause")}}</dt> + <dd>Representa o motivo da mudança de um cookie.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{WebExtAPIRef("cookies.get()")}}</dt> + <dd>Recupera informações sobre um único cookie.</dd> + <dt>{{WebExtAPIRef("cookies.getAll()")}}</dt> + <dd>Recupera todos os cookies com o padrão de um conjunto de filtros fornecido.</dd> + <dt>{{WebExtAPIRef("cookies.set()")}}</dt> + <dd>Atribui um cookie com um dado fornecido; pode sobrescrever cookies equivalentes caso existam.</dd> + <dt>{{WebExtAPIRef("cookies.remove()")}}</dt> + <dd>Remove um cookie pelo nome.</dd> + <dt>{{WebExtAPIRef("cookies.getAllCookieStores()")}}</dt> + <dd>Lista todos os cookies armazenados.</dd> +</dl> + +<h2 id="Manipulador_de_eventos">Manipulador de eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("cookies.onChanged")}}</dt> + <dd>Disparado quando um cookie é criado ou removido.</dd> +</dl> + +<dl> + <dd> + <ul> + </ul> + </dd> +</dl> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{Compat("webextensions.api.cookies")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimentos</strong> + +<p>Esta API é baseada na API <a href="https://developer.chrome.com/extensions/cookies"><code>chrome.cookies</code></a> do Chromium. Esta documentação é derivada do <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json"><code>cookies.json</code></a> no código do Chromium.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..955086de10 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> + +<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p> + +<p>You can access the APIs using the <code>browser</code> namespace:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p> + +<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> + +<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> +</div> + +<div>{{SubpagesWithSummaries}}</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/menus/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/menus/index.html new file mode 100644 index 0000000000..f63d411e76 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/menus/index.html @@ -0,0 +1,205 @@ +--- +title: menus +slug: Mozilla/Add-ons/WebExtensions/API/menus +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - contextMenus + - menus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus +--- +<div>{{AddonSidebar}}</div> + +<p>Adicione itens ao sistema de menu do navegador.</p> + +<p>Esta API é modelada sobre a API <a href="https://developer.chrome.com/extensions/contextMenus">"contextMenus"</a> do Chrome, que permite que extensões do Chrome adicione itens para o contexto de menu do navegador. A API <code>browser.menus</code> adiciona alguns recursos à API do Chrome.</p> + +<p>Antes do Firefox 55, esta API foi também nomeada, originalmente, de <code>contextMenus</code>, e esse nome <span class="tlid-translation translation" lang="pt"><span title="">era mantido como um alias; portanto, você pode usar o </span></span><code>contextMenus</code> <span class="tlid-translation translation" lang="pt"><span title="">para escrever um código que funcione no Firefox e também em outros navegadores.</span></span></p> + +<p>Para usar essa API, você precisa da <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissão</a> de <code>menus</code>. Você também pode usar o alias <code>contextMenus</code> em vez de <code>menus</code>, mas se usar, a API deve ser acessada como <code>browser.contextMenus</code>.</p> + +<p>Exceto para <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>, essa API não pode ser usada de scripts de conteúdo (content scripts).</p> + +<h2 id="Criando_itens_de_menu">Criando itens de menu</h2> + +<p>Para criar um item de menu, chamme o método {{WebExtAPIRef("menus.create()")}}. Você passa esse método como um objeto contendo opções para o item, incluindo o ID do item, o tipo do item, e os contextos no qual ele deve ser mostrado.</p> + +<p>Escute os cliques no seu item de menu adicionando um ouvinte para o evento {{WebExtAPIRef("menus.onClicked")}}. Este ouvinte será passado</p> + +<p>Listen for clicks on your menu item by adding a listener to the {{WebExtAPIRef("menus.onClicked")}} event. Este ouvinte receberá um objeto {{WebExtAPIRef("menus.OnClickData")}} que contém os detalhes do evento.</p> + +<p>Você pode criar quatro tipos diferentes de itens de menu, com base no valor da propriedade <code>type</code> que você fornece nas opções para <code>create()</code>:</p> + +<ul> + <li>"normal": um item de menu que apenas mostra um rótulo.</li> + <li>"checkbox": um item de menu que representa um estado binário. Ele mostra uma marca de verificação próxima ao rótulo. Clicar no item ativa esta marca. O ouvinte de clique receberá duas propriedades extras: "checked", indicando que o item foi marcado agora, e "wasChecked", indicando que o item foi marcado antes do evento do clique.</li> + <li>"radio": um item de menu que representa um de um grupo de escolhas. Como uma marca de verificação, isso também mostra uma marca de verificação próxima ao rótulo, e seu ouvinte de clique receberá "checked" e "wasChecked". No entanto, se você criar mais de um item de rádio, os itens funcionarão como um grupo de itens de rádio: apenas um item no grupo poderá ser verificado e clicar em um item o tornará o item marcado.</li> + <li>"separator": uma linha separando um grupo de itens.</li> +</ul> + +<p>Se você criou mais de um item de menu de contexto ou mais de um item de menu de ferramentas, os itens serão colocados em um submenu. O pai do submenu será identificado com o nome da extensão. Por exemplo, aqui está uma extensão chamada "Demonstração de menu" ("Menu demo"), que adicionou dois itens de menu de contexto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15431/menus-1.png" style="display: block; height: 406px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<h2 id="Ícones">Ícones</h2> + +<p>Se você especificou ícones para sua extensão usando a <a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">chave "icons" do manifest</a>, <span class="tlid-translation translation" lang="pt"><span title=""> o item de menu exibirá o ícone especificado ao lado do rótulo.</span> <span title="">O navegador tentará escolher um ícone de 16x16 pixels para uma exibição normal ou um ícone de 32x32 pixels para uma exibição de alta densidade:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15433/menus-2.png" style="display: block; height: 409px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Apenas para itens dentro de um submenu, você pode especificar ícones customizados passando a opção <code>icons</code> para o {{WebExtAPIRef("menus.create()")}}:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15435/menus-3.png" style="display: block; height: 396px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Aqui está um menu de contexto contendo quatro itens: um item normal, dois itens de rádio com separadores em cada lado, e uma marca de seleção. Os itens de rádio receberam ícones customizados.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15437/menus-4.png" style="display: block; height: 790px; margin-left: auto; margin-right: auto; width: 500px;">Você pode criar um submenu como este usando o código abaixo:</p> + +<pre class="brush: js">browser.menus.create({ + id: "remove-me", + title: browser.i18n.getMessage("menuItemRemoveMe"), + contexts: ["all"] +}, onCreated); + +browser.menus.create({ + id: "separator-1", + type: "separator", + contexts: ["all"] +}, onCreated); + +browser.menus.create({ + id: "greenify", + type: "radio", + title: browser.i18n.getMessage("menuItemGreenify"), + contexts: ["all"], + checked: true, + icons: { + "16": "icons/paint-green-16.png", + "32": "icons/paint-green-32.png" + } +}, onCreated); + +browser.menus.create({ + id: "bluify", + type: "radio", + title: browser.i18n.getMessage("menuItemBluify"), + contexts: ["all"], + checked: false, + icons: { + "16": "icons/paint-blue-16.png", + "32": "icons/paint-blue-32.png" + } +}, onCreated); + +browser.menus.create({ + id: "separator-2", + type: "separator", + contexts: ["all"] +}, onCreated); + +var checkedState = true; + +browser.menus.create({ + id: "check-uncheck", + type: "checkbox", + title: browser.i18n.getMessage("menuItemUncheckMe"), + contexts: ["all"], + checked: checkedState +}, onCreated);</pre> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("menus.ContextType")}}</dt> + <dd>Os diferentes contextos em que um menu pode aparecer.</dd> + <dt>{{WebExtAPIRef("menus.ItemType")}}</dt> + <dd><span class="tlid-translation translation" lang="pt"><span title="">O tipo de item de menu</span></span>: "normal", "checkbox", "radio", "separator".</dd> + <dt>{{WebExtAPIRef("menus.OnClickData")}}</dt> + <dd>Informação enviada quando um item do menu é clicado.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt>{{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}</dt> + <dd>O número máximo de itens de extensão de nível superior que podem ser adicionados a um item de menu cujo ContextType seja "browser_action" ou "page_action".</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("menus.create()")}}</dt> + <dd>Cria um novo item de menu.</dd> + <dt>{{WebExtApiRef("menus.getTargetElement()")}}</dt> + <dd>Retorna o elemento para um <code>info.targetElementId</code> determinado.</dd> + <dt>{{WebExtApiRef("menus.overrideContext()")}}</dt> + <dd>Oculta todos os itens de menu padrão do Firefox para fornecer uma interface de usuário personalizada do menu de contexto.</dd> + <dt>{{WebExtAPIRef("menus.refresh()")}}</dt> + <dd>Atualiza um menu que está sendo exibido no momento.</dd> + <dt>{{WebExtAPIRef("menus.remove()")}}</dt> + <dd>Remove um item do menu.</dd> + <dt>{{WebExtAPIRef("menus.removeAll()")}}</dt> + <dd>Remove todos os itens do menu adicionados por esta extensão.</dd> + <dt>{{WebExtAPIRef("menus.update()")}}</dt> + <dd>Atualiza um item do menu criado anteriormente.</dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("menus.onClicked")}}</dt> + <dd>Ativado quando um item de menu é clicado.</dd> + <dt>{{WebExtAPIRef("menus.onHidden")}}</dt> + <dd>Ativado quando o navegador esconde um menu.</dd> + <dt>{{WebExtAPIRef("menus.onShown")}}</dt> + <dd>Ativado quando o navegador mostra um menu.</dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{ Compat("webextensions.api.menus", 1, "true") }}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Reconhecimentos</strong> + +<p>Esta API é baseada na API <a href="https://developer.chrome.com/extensions/contextMenus"><code>chrome.contextMenus</code> </a>do Chromium. Esta documentação é derivada do <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> do código do Chromium .</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html new file mode 100644 index 0000000000..b6f69f193b --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html @@ -0,0 +1,223 @@ +--- +title: tabs +slug: Mozilla/Add-ons/WebExtensions/API/tabs +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - TopicStub + - WebExtensions + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs +--- +<div>{{AddonSidebar}}</div> + +<p>Interact with the browser's tab system.</p> + +<p>You can use this API to get a list of opened tabs, filtered by various criteria, and to open, update, move, reload, and remove tabs. You can't directly access the content hosted by tabs using this API, but you can insert JavaScript and CSS into tabs using the {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}} APIs.</p> + +<p>You can use most of this API without any special permission. However:</p> + +<ul> + <li>To access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the <code>"tabs"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. + + <ul> + <li>In Firefox, this also means you need <code>"tabs"</code> to {{WebExtAPIRef("tabs.query()")}} by URL.</li> + </ul> + </li> + <li>To use {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}}, you must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the tab</li> +</ul> + +<p>Alternatively, you can get these permissions temporarily, only for the currently active tab and only in response to an explicit user action, by asking for the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>"activeTab"</code> permission</a>.</p> + +<p>Many tab operations use a Tab <code>id</code>. Tab <code>id</code>s are guaranteed to be unique to a single tab only within a browser session. If the browser is restarted, then it can and will reuse tab <code>id</code>s. To associate information with a tab across browser restarts, use {{WebExtAPIRef("sessions.setTabValue()")}}.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.MutedInfoReason")}}</dt> + <dd>Specifies the reason a tab was muted or unmuted.</dd> + <dt>{{WebExtAPIRef("tabs.MutedInfo")}}</dt> + <dd>This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.</dd> + <dt>{{WebExtAPIRef("tabs.PageSettings")}}</dt> + <dd> + <p>Used to control how a tab is rendered as a PDF by the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF" title="Saves the current page as a PDF. This will open a dialog, supplied by the underlying operating system, asking the user where they want to save the PDF."><code>tabs.saveAsPDF()</code></a> method.</p> + </dd> + <dt>{{WebExtAPIRef("tabs.Tab")}}</dt> + <dd>This type contains information about a tab.</dd> + <dt>{{WebExtAPIRef("tabs.TabStatus")}}</dt> + <dd>Indicates whether the tab has finished loading.</dd> + <dt>{{WebExtAPIRef("tabs.WindowType")}}</dt> + <dd>The type of window that hosts this tab.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettingsMode")}}</dt> + <dd>Defines whether zoom changes are handled by the browser, by the extension, or are disabled.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettingsScope")}}</dt> + <dd>Defines whether zoom changes will persist for the page's origin, or only take effect in this tab.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettings")}}</dt> + <dd>Defines zoom settings {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, and default zoom factor.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.TAB_ID_NONE")}}</dt> + <dd>A special ID value given to tabs that are not browser tabs (for example, tabs in devtools windows).</dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.captureTab()")}}</dt> + <dd>Creates a data URI encoding an image of the visible area of the given tab.</dd> + <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt> + <dd>Creates a data URI encoding an image of the visible area of the currently active tab in the specified window.</dd> + <dt>{{WebExtAPIRef("tabs.connect()")}}</dt> + <dd>Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.create()")}}</dt> + <dd>Creates a new tab.</dd> + <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt> + <dd>Detects the primary language of the content in a tab.</dd> + <dt>{{WebExtAPIRef("tabs.discard()")}}</dt> + <dd>Discards one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.duplicate()")}}</dt> + <dd>Duplicates a tab.</dd> + <dt>{{WebExtAPIRef("tabs.executeScript()")}}</dt> + <dd>Injects JavaScript code into a page.</dd> + <dt>{{WebExtAPIRef("tabs.get()")}}</dt> + <dd>Retrieves details about the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt> + <dd>Gets details about all tabs in the specified window.</dd> + <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt> + <dd>Gets information about the tab that this script is running in, as a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd> + <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt> + <dd>Gets the tab that is selected in the specified window. <strong>Deprecated: use <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a> instead.</strong></dd> + <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt> + <dd>Gets the current zoom factor of the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt> + <dd>Gets the current zoom settings for the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.goForward()")}}</dt> + <dd>Go forward to the next page, if one is available.</dd> + <dt>{{WebExtAPIRef("tabs.goBack()")}}</dt> + <dd>Go back to the previous page, if one is available.</dd> + <dt>{{WebExtAPIRef("tabs.hide()")}} {{experimental_inline}}</dt> + <dd>Hides one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.highlight()")}}</dt> + <dd>Highlights one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.insertCSS()")}}</dt> + <dd>Injects CSS into a page.</dd> + <dt>{{WebExtAPIRef("tabs.move()")}}</dt> + <dd>Moves one or more tabs to a new position in the same window or to a different window.</dd> + <dt>{{WebExtApiRef("tabs.moveInSuccession()")}}</dt> + <dd>Modifies the succession relationship for a group of tabs.</dd> + <dt>{{WebExtAPIRef("tabs.print()")}}</dt> + <dd>Prints the contents of the active tab.</dd> + <dt>{{WebExtAPIRef("tabs.printPreview()")}}</dt> + <dd> + <div>Opens print preview for the active tab.</div> + </dd> + <dt>{{WebExtAPIRef("tabs.query()")}}</dt> + <dd>Gets all tabs that have the specified properties, or all tabs if no properties are specified.</dd> + <dt>{{WebExtAPIRef("tabs.reload()")}}</dt> + <dd>Reload a tab, optionally bypassing the local web cache.</dd> + <dt>{{WebExtAPIRef("tabs.remove()")}}</dt> + <dd>Closes one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.removeCSS()")}}</dt> + <dd>Removes from a page CSS which was previously injected by calling {{WebExtAPIRef("tabs.insertCSS()")}}.</dd> + <dt>{{WebExtAPIRef("tabs.saveAsPDF()")}}</dt> + <dd>Saves the current page as a PDF.</dd> + <dt>{{WebExtAPIRef("tabs.sendMessage()")}}</dt> + <dd>Sends a single message to the content script(s) in the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}</dt> + <dd>Sends a single request to the content script(s) in the specified tab. <strong>Deprecated</strong>: use {{WebExtAPIRef("tabs.sendMessage()")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.setZoom()")}}</dt> + <dd>Zooms the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.setZoomSettings()")}}</dt> + <dd>Sets the zoom settings for the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.show()")}} {{experimental_inline}}</dt> + <dd>Shows one or more tabs that have been {{WebExtAPIRef("tabs.hide()", "hidden")}}.</dd> + <dt>{{WebExtAPIRef("tabs.toggleReaderMode()")}}</dt> + <dd>Toggles Reader mode for the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.update()")}}</dt> + <dd>Navigate the tab to a new URL, or modify other properties of the tab.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.onActivated")}}</dt> + <dd>Fires when the active tab in a window changes. Note that the tab's URL may not be set at the time this event fired.</dd> + <dt>{{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}</dt> + <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onAttached")}}</dt> + <dd>Fired when a tab is attached to a window, for example because it was moved between windows.</dd> + <dt>{{WebExtAPIRef("tabs.onCreated")}}</dt> + <dd>Fired when a tab is created. Note that the tab's URL may not be set at the time this event fired.</dd> + <dt>{{WebExtAPIRef("tabs.onDetached")}}</dt> + <dd>Fired when a tab is detached from a window, for example because it is being moved between windows.</dd> + <dt>{{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}</dt> + <dd>Fired when the highlighted or selected tabs in a window change. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onHighlighted")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onHighlighted")}}</dt> + <dd>Fired when the highlighted or selected tabs in a window change.</dd> + <dt>{{WebExtAPIRef("tabs.onMoved")}}</dt> + <dd>Fired when a tab is moved within a window.</dd> + <dt>{{WebExtAPIRef("tabs.onRemoved")}}</dt> + <dd>Fired when a tab is closed.</dd> + <dt>{{WebExtAPIRef("tabs.onReplaced")}}</dt> + <dd>Fired when a tab is replaced with another tab due to prerendering.</dd> + <dt>{{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}</dt> + <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onUpdated")}}</dt> + <dd>Fired when a tab is updated.</dd> + <dt>{{WebExtAPIRef("tabs.onZoomChange")}}</dt> + <dd>Fired when a tab is zoomed.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("webextensions.api.tabs")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html new file mode 100644 index 0000000000..4eb0dc1b8d --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html @@ -0,0 +1,55 @@ +--- +title: tema +slug: Mozilla/Add-ons/WebExtensions/API/tema +tags: + - Aplicativo + - Extensões + - Navegador + - Tema + - Temas + - add-on + - extensão +translation_of: Mozilla/Add-ons/WebExtensions/API/theme +--- +<div>{{AddonSidebar}}</div> + +<p>Permite que extensões do navegador alterem seu tema.</p> + +<p>Para usar esta API, uma extensão deve solicitar a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> (permissão) de "tema" em seu arquivo<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Quando configuramos um arquivo de plano de fundo, devemos declarar a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> (permissão) de "tema" e, assim sendo, nós não poderemos usar a função <a href="/en-US/Add-ons/WebExtensions/manifest.json/theme">theme</a> (de tema), se esta for incompatível.</p> +</div> + +<h2 id="Tipo">Tipo</h2> + +<dl> + <dt>{{WebExtAPIRef("theme.Theme")}}</dt> + <dd>Representa o conteúdo de um tema.</dd> +</dl> + +<h2 id="Funções">Funções</h2> + +<dl> + <dt>{{WebExtAPIRef("theme.getCurrent()")}}</dt> + <dd>Obtém o tema atual do navegador.</dd> + <dt>{{WebExtAPIRef("theme.update()")}}</dt> + <dd>Atualiza o tema do navegador.</dd> + <dt>{{WebExtAPIRef("theme.reset()")}}</dt> + <dd>Remove quaisquer atualizações de temas feitas em uma chamada para {{WebExtAPIRef("theme.update()")}}.</dd> +</dl> + +<h2 id="Evento">Evento</h2> + +<dl> + <dt>{{WebExtAPIRef("theme.onUpdated")}}</dt> + <dd>Disparada<em> </em>quando o navegador tiver sido alterado.</dd> +</dl> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div class="hidden">A tabela de compatibilidade, nesta página, foi gerada a partir de dados estruturados. Se você apreciar contribuir com ela, por favor, verifique a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e deixe-nos saber de seu interesse.</div> + +<p>{{Compat("webextensions.api.theme")}}</p> + +<p>{{WebExtExamples("h2")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/pt-br/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..4333baf5b1 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,15 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +<div>{{AddonSidebar}}</div> + +<div>{{WebExtAllCompatTables}}</div> + +<p class="hidden">A compatibilidade table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html b/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html new file mode 100644 index 0000000000..2b210f5125 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html @@ -0,0 +1,94 @@ +--- +title: Empacotando e Instalando +slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +--- +<h2 id="Packaging_your_extension">Packaging your extension</h2> + +<div class="note"> +<p>Nós estamos trabalhando em uma GUI para empacotar e carregar extensões. Veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185460">Bug 1185460</a> para mais informações. Enquanto isso, siga as etapas abaixo.</p> +</div> + +<p>Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".</p> + +<p>Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.</p> + +<h3 id="Windows">Windows</h3> + +<ol> + <li>Abra a pasta com seus arquivos da extensão.</li> + <li>Selecione todos os arquivos.</li> + <li>Clique com o direito e escolha Enviar para → Pasta Compactada.</li> + <li>Renomeie o arquivo de "something.zip" para "something.xpi".</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ol> + <li>Abra a pasta com seus arquivos da extensão.</li> + <li>Selecione todos os arquivos.</li> + <li>Clique com o direito e escolha Compress <em>n</em> Items.</li> + <li>Renomeie o arquivo de<code> Archive.zip</code> para <code>something.xpi</code>.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> + +<ol> + <li><code>cd path/to/my-extension/</code></li> + <li><code>zip -r ../my-extension.xpi *</code></li> +</ol> + +<h2 id="Installing_your_extension">Installing your extension</h2> + +<ol> + <li>Digite no caminho de URL <code>about:addons</code></li> + <li>Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."</li> + <li>Clique instalar no dialog que irá aparecer</li> +</ol> + +<h2 id="Instalando_suas_extensões_no_Firefox_OS">Instalando suas extensões no Firefox OS</h2> + +<p>You can install your extension from <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.</p> + +<p>When the manifest.json validation status is valid you will be able to Install and Run your extension on the attached Firefox OS device running a nightly build of Firefox OS.</p> + +<p>The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.</p> + +<h2 id="Soluções_de_problemas">Soluções de problemas</h2> + +<p>There are a few common problems that you might run into:</p> + +<h3 id="Este_add-on_não_poderá_ser_instalado_porque_não_pode_ser_verificado.">"Este add-on não poderá ser instalado porque não pode ser verificado."</h3> + +<ul> + <li>Make sure you're using <a href="https://nightly.mozilla.org/">Nightly</a> and that <code>xpinstall.signatures.required</code> is <code>false</code> in <code>about:config</code>.</li> + <li>Learn more about <a href="/en-US/docs/Mozilla/Add-ons/Distribution">add-on signing and distribution</a>.</li> +</ul> + +<h3 id="Este_add-on_não_pode_ser_instalado_porque_pode_está_corrompido.">"Este add-on não pode ser instalado porque pode está corrompido."</h3> + +<ul> + <li>Make sure you zipped your add-ons files directly, <em>not</em> the folder <em>containing</em> your add-ons files. Your manifest.json must be at the root of the zip file.</li> + <li>Make sure you are using a <a href="https://nightly.mozilla.org/">Nightly</a> build of Firefox.</li> +</ul> + +<h3 id="Nada_aconteceu">Nada aconteceu</h3> + +<ul> + <li>Make sure your file name actually ends in <code>.xpi</code>, since some operating systems <em>really</em> like to hide file extensions. + + <ul> + <li>On Windows, check with View → Show / Hide: File Name Extensions.</li> + <li>On Mac OS X, check with File → Get Info → Name and Extension.</li> + </ul> + </li> + <li>It's possible you misclicked and dismissed the installation prompt. Look for a puzzle piece icon next to the Back button in Nightly. Click that to bring the popup back.</li> +</ul> + +<h3 id="Observe_o_console">Observe o console</h3> + +<p>Some additional error information relating to how your extension was extracted and loaded might be available in the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/examples/index.html b/files/pt-br/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..3b0c265377 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,30 @@ +--- +title: Exemplos de Extensões +slug: Mozilla/Add-ons/WebExtensions/Examples +tags: + - WebExntesoes +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +<div>{{AddonSidebar}}</div> + +<div>Para ajudar a ilustrar como desenvolver extensões, nós mantemos um repositório com simples exemplos de extensões em <a href="https://github.com/mdn/webextensions-examples">https://github.com/mdn/webextensions-examples</a>. Este artigo descreve a WebExtension APIs utilizadas neste respositório.</div> + +<div> </div> + +<div>Estes exemplos funcionam no Firefox Nightly: A maioria funciona em versões anteriores do Firefox, porém verifique a chave <a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a> no manifest.json da extensão por certificação.</div> + +<div> </div> + +<div>Se você quiser experimentar estes exemplos, você tem três opções principais:</div> + +<div> </div> + +<ol> + <li>Clonar o repositório, então carregue a extensão diretamente de seu diretório de origem, usando o recurso <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Load Temporary Add-on"</a>. A extensão permanecerá carregada até você reiniciar o Firefox.</li> + <li>Clonar o repositório, então use a ferramenta linha de comando <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> para executar o Firefox com a extensão instalada.</li> + <li>Clonar o repositório, então vá até o diretório de <a href="https://github.com/mdn/webextensions-examples/tree/master/build">build</a> (construção). Isto contém as versões construídas e assinadas de todos os exemplos, então você pode simplesmente abrir eles no Firefox (usando Arquivo/Abrir arquivo) e instalar eles permanentemente, como uma extensão que você pode instalar de <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>.</li> +</ol> + +<p>Se você quer contribuir com o respositório, <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">nos envie um pull request.</a></p> + +<p>{{WebExtAllExamples}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/index.html b/files/pt-br/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..862d00ba21 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,138 @@ +--- +title: Extensões do navegador +slug: Mozilla/Add-ons/WebExtensions +tags: + - Extensões + - Passo a passo + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions +--- +<p class="summary"><span class="seoSummary">Extensões são capazes de extender e modificar a capacidade de um navegador. As extensões para Firefox são criadas usando a API WebExtensions, um sistema comum a vários navegadores para desenvolvimento de extensões.</span> Em grande parte, o sistema é compatível com a <a class="external-icon external" href="https://developer.chrome.com/extensions">API de extensões</a> suportada pelo Google Chrome, Opera e <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a>.</p> + +<p>Extensões escritas para esses navegadores na maioria dos casos vão funcionar no Firefox ou <a href="https://developer.microsoft.com/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> com <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">apenas algumas alterações</a>. A API é também totalmente compatível com o <a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox">multiprocessamento do Firefox</a>.</p> + +<p>Se você tem dúvidas ou sugestões, ou precisa de ajuda para migrar um complemento legado para usar APIs WebExtensions, pode entrar em contato conosco pela <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">newsletter de desenvolvimento de complementos </a>ou <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> no <a class="external-icon external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Começando">Começando</h3> + +<ul> + <li><a href="/Add-ons/WebExtensions/What_are_WebExtensions">O que é uma extensão </a></li> + <li><a href="/Add-ons/WebExtensions/Your_first_WebExtension">Sua primeira extensão</a></li> + <li><a href="/Add-ons/WebExtensions/Your_second_WebExtension">Sua segunda extensão</a></li> + <li><a href="/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia de uma extensão</a></li> + <li><a href="/Add-ons/WebExtensions/Examples">Extensões de exemplo</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/What_next_">E depois?</a></li> +</ul> + +<h3 id="Conceitos">Conceitos</h3> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/API">Visão geral da API JavaScript</a></li> + <li><a href="/Add-ons/WebExtensions/Content_scripts">Scripts de conteúdo</a></li> + <li><a href="/Add-ons/WebExtensions/Match_patterns">Padrões de correspondência</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Trabalhando com arquivos</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internacionalização</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">Melhores práticas de segurança</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de segurança de conteúdo</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Troca de mensagens nativa</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">Usando as APIs devtools</a></li> + <li><a href="/Add-ons/WebExtensions/User_experience_best_practices">Melhores práticas de experiência do usuário</a></li> + <li><a href="/Add-ons/WebExtensions/Native_manifests">Manifestos nativos</a></li> +</ul> + +<h3 id="Interface_do_usuário">Interface do usuário</h3> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface">Introdução</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Botão na barra de ferramenta</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Botão na barra de ferramenta com um popup</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Botão na barra de endereços</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Botão na barra de endereços com um popup</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Itens de menu de contexto</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Painéis laterais</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Página de opções</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Páginas da extensão</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notificação</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Sugestões na barra de endereços</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Painéis na ferramenta do desenvolvedor</a></li> +</ul> + +<h3 id="Como">Como</h3> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Interceptar solicitações HTTP</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modificar uma página da web</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Adicionar um botão na barra de ferramenta</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implementar uma página de configurações</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interagir com a área de transferência</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">Trabalhar com a API de abas</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Trabalhar com a API de favoritos</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">Trabalhar com a API de cookies</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">Trabalhar com identidades contextuais</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">Inserir conteúdo externo</a></li> +</ul> + +<h3 id="Portabilidade">Portabilidade</h3> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portando uma extensão do Google Chrome</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portando uma extensão legada do Firefox</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Desenvolvendo para o Firefox para Android</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">WebExtensions incorporadas</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparação com Add-on SDK</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparação com extensões XUL/XPCOM</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Incompatibilidades com Chrome</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Diferenças entre desktop e Android</a></li> +</ul> + +<h3 id="Fluxo_de_trabalho_do_Firefox">Fluxo de trabalho do Firefox</h3> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">Experiência do usuário</a></li> + <li><a href="/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Instalando</a></li> + <li><a href="/Add-ons/WebExtensions/Debugging">Depurando</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Testando funcionalidades de persistência e reinicialização</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Começando com web-ext</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Referência de comandos web-ext</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensões e ID de complementos</a></li> + <li><a href="/Add-ons/WebExtensions/Alternative_distribution_options">Opções de distribuição alternativas</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">Solicitando as permissões corretas</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Compartilhando objetos com scripts de páginas</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publicando sua extensão</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension">Descontinuando sua extensão</a></li> + <li><a href="/Add-ons/WebExtensions/Tips">Dicas e truques</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="Referências">Referências</h3> + +<h4 id="APIs_JavaScript">APIs JavaScript</h4> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/API">Visão geral da API JavaScript </a></li> + <li><a href="/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Tabelas de compatibilidade de navegadores com APIs JavaScript</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Chaves_do_Manifest">Chaves do Manifest</h4> + +<ul> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/manifest.json">Visão geral do manifest.json</a></li> + <li><a href="/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Compatibilidade de navegadores com manifest.json</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> + +<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;"> +<div class="SL_SelectionRect"> +<div class="SL_SelectionLabel"></div> +</div> +</div> + +<div>{{AddonSidebar}}</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/pt-br/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..f79b4debaa --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,155 @@ +--- +title: Interceptando requisições HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +<div>{{AddonSidebar}}</div> + +<p>Para interceptar uma requisição HTTP, utilize a API {{WebExtAPIRef("webRequest")}}. Esta API permite adicionar listeners para vários estágios de uma requisição HTTP. Nos listeners, você pode:</p> + +<ul> + <li>ter acesso ao cabeçalho e o corpo da requisição e, o cabeçalho da resposta</li> + <li>cancelar e redirecionar requisições</li> + <li>modificar requisições e o cabeçalho da resposta</li> +</ul> + +<p>Neste artigo você verá três diferentes usos para o módulo <code>webRequest</code>:</p> + +<ul> + <li>Logando como as URLs da requisição são feitas.</li> + <li>Redirecionando requisições.</li> + <li>Modificando os cabeçalhos da requisição.</li> +</ul> + +<h2 id="Logando_URLs_de_requisição">Logando URLs de requisição</h2> + +<p>Crie um novo diretório chamado "requests". Neste diretório, crie um arquivo chamado "manifest.json" com seguinte conteúdo:</p> + +<pre class="brush: json">{ + "description": "Demonstrating webRequests", + "manifest_version": 2, + "name": "webRequest-demo", + "version": "1.0", + + "permissions": [ + "webRequest", + "<all_urls>" + ], + + "background": { + "scripts": ["background.js"] + } +}</pre> + +<p>A seguir, crie um arquivo chamado"background.js" com o seguinte conteúdo:</p> + +<pre class="brush: js">function logURL(requestDetails) { + console.log("Loading: " + requestDetails.url); +} + +browser.webRequest.onBeforeRequest.addListener( + logURL, + {urls: ["<all_urls>"]} +); + +</pre> + +<p>Aqui vamos usar {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para chamar a função <code>logURL()</code> antes do inicio da requisição. A função <code>logURL()</code> guarda a URL da requisição para o objeto event e efetua log no console do navegador. O <a href="/en-US/Add-ons/WebExtensions/Match_patterns">padrão</a> <code>{urls: ["<all_urls>"]}</code> significa que iremos interceptar as requisições HTTP para todas URLs.</p> + +<p>Para testá-lo, <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instale a extensão</a>, <a href="/en-US/docs/Tools/Browser_Console">abra o console do navegador</a>, e abra alguma página da internet. No console do navegador você pode ver as URLs para alguns recursos que o navegador requisita:</p> + +<p>{{EmbedYouTube("X3rMgkRkB1Q")}}</p> + +<h2 id="Redirecionando_requisições">Redirecionando requisições</h2> + +<p>Agora vamos usar o <code>webRequest</code> para redirecionar requisições HTTP. Primeiro, substitua o manifest.json com o seguinte conteúdo:</p> + +<pre class="brush: json">{ + + "description": "Demonstrating webRequests", + "manifest_version": 2, + "name": "webRequest-demo", + "version": "1.0", + + "permissions": [ + "webRequest", + "webRequestBlocking", + "https://developer.mozilla.org/", + "https://mdn.mozillademos.org/" + ], + + "background": { + "scripts": ["background.js"] + } + +}</pre> + +<p>A única alteração aqui é a adição da <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissão</a> <code>"webRequestBlocking"</code>. Precisamos invocar esta permissão extra toda vez que estamos ativamente modificando a requisição.</p> + +<p>A seguir, substitua o "background.js" com o seguinte conteúdo:</p> + +<pre class="brush: js">var pattern = "https://mdn.mozillademos.org/*"; + +function redirect(requestDetails) { + console.log("Redirecting: " + requestDetails.url); + return { + redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif" + }; +} + +browser.webRequest.onBeforeRequest.addListener( + redirect, + {urls:[pattern], types:["image"]}, + ["blocking"] +);</pre> + +<p>Novamente vamos usar event listener {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} apenas para executar a função antes que cada requisição seja feita. Está função irá substituir a URL desejada com o <code>redirectUrl</code> especificado na função.</p> + +<p>Desta vez não estamos interceptando cada requisição: a opção <code>{urls:[pattern], types:["image"]}</code> especifica apenas o que deveria interceptar requisições(1) para URLs residindo sob o "https://mdn.mozillademos.org/" (2) para o recurso de imagens. Veja mais em {{WebExtAPIRef("webRequest.RequestFilter")}}.</p> + +<p>Observe também que estamos passando uma opção chamada <code>"blocking"</code>: precisamos informá-la toda vez que desejamos modificar a requisição. Isto faz com que a função bloqueie a requisição de rede, então o navegador espera pelo event listener retornar antes de continuar. Veja a documentação {{WebExtAPIRef("webRequest.onBeforeRequest")}} para mais no <code>"blocking"</code>.</p> + +<p>Teste abrindo uma página no MDN que possua muitas imagens (por exemplo <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor</a>), <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recarregue a extensão</a> e então recarregue a página:</p> + +<p>{{EmbedYouTube("ix5RrXGr0wA")}}</p> + +<h2 id="Modificando_os_cabeçalhos_da_requisição">Modificando os cabeçalhos da requisição</h2> + +<p>Finalmente iremos utilizar <code>webRequest</code> para modificar os cabeçalhos da requisição. Neste example iremos modificar o cabeçalho "User-Agent" que identifica o navegador como Opera 12.16, mas apenas quando visitamos páginas sob "http://useragentstring.com/".</p> + +<p>O "manifest.json" pode permanecer do mesmo jeito.</p> + +<p>Modifique o "background.js" com este código:</p> + +<pre class="brush: js">var targetPage = "http://useragentstring.com/*"; + +var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16"; + +function rewriteUserAgentHeader(e) { + e.requestHeaders.forEach(function(header){ + if (header.name.toLowerCase() == "user-agent") { + header.value = ua; + } + }); + return {requestHeaders: e.requestHeaders}; +} + +browser.webRequest.onBeforeSendHeaders.addListener( + rewriteUserAgentHeader, + {urls: [targetPage]}, + ["blocking", "requestHeaders"] +);</pre> + +<p>Aqui vamos usar event listener {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} para executar a função somente quando os cabeçalhos forem enviados.</p> + +<p>O event listener será chamada somente para requisitar as URLs que batem com o <a href="/en-US/Add-ons/WebExtensions/Match_patterns">padrão</a>. Observe também que passamos novamente <code>"blocking"</code> como uma opção. Passamos também <code>"requestHeaders"</code>, que significa que o listener será passado como um array contendo os cabeçalhos da requisição que desejamos enviar. Veja {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} para mais informações dessas opções.</p> + +<p>A função listener procura pelo cabeçalho "User-Agent" no array de cabeçalhos da requisição, substitui seu valor com o valor <code>ua</code> da variável, e retorna o array modificado. Este array modificado será agora enviado para o servidor.</p> + +<p>Teste abrindo <a href="http://useragentstring.com/">useragentstring.com</a> e veja como ele identifica o navegador como sendo o Firefox. Então, recarregue a extensão, recarregue também o <a href="http://useragentstring.com/">useragentstring.com</a> e veja que agora o Firefox é identificado como Opera:</p> + +<p>{{EmbedYouTube("SrSNS1-FIx0")}}</p> + +<h2 id="Aprenda_mais">Aprenda mais</h2> + +<p>Para aprender sobre todas as coisas que você pode fazer com a API <code>webRequest</code>, veja sua <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">documentação de referência</a>.</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..b8f93649d2 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,105 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +<div>{{AddonSidebar}}</div> + +<p>The manifest.json file is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, and is the only file that every WebExtension must contain.</p> + +<p>Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.</p> + +<p>manifest.json keys are listed below:</p> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> + +<div class="twocolumns"> </div> + +<p><code>"manifest_version"</code>, <code>"version"</code>, and <code>"name"</code> are the only mandatory keys. <code>"default_locale"</code> must be present if the "_locales" directory is present and must be absent otherwise. <code>"applications"</code> is not supported in Google Chrome, and is mandatory in Firefox before Firefox 48 and Firefox for Android.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.manifest")}}</p> + +<h2 id="Example">Example</h2> + +<p>Quick syntax example for manifest.json:</p> + +<pre class="brush: json">{ + "applications": { + "gecko": { + "id": "addon@example.com", + "strict_min_version": "42.0" + } + }, + + "background": { + "scripts": ["jquery.js", "my-background.js"], + "page": "my-background.html" + }, + + "browser_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "commands": { + "toggle-feature": { + "suggested_key": { + "default": "Ctrl+Shift+Y", + "linux": "Ctrl+Shift+U" + }, + "description": "Send a 'toggle-feature' event" + } + }, + + "content_security_policy": "script-src 'self' https://example.com; object-src 'self'", + + "content_scripts": [ + { + "exclude_matches": ["*://developer.mozilla.org/*"], + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ], + + "default_locale": "en", + + "description": "...", + + "icons": { + "48": "icon.png", + "96": "icon@2x.png" + }, + + "manifest_version": 2, + + "name": "...", + + "page_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "permissions": ["webNavigation"], + + "version": "0.1", + + "web_accessible_resources": ["images/my-image.png"] +}</pre> + +<p> </p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissões/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissões/index.html new file mode 100644 index 0000000000..41312323b4 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissões/index.html @@ -0,0 +1,184 @@ +--- +title: permissões +slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissões +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Tipo</th> + <td><code>Array</code></td> + </tr> + <tr> + <th scope="row">Obrigatório</th> + <td>Não</td> + </tr> + <tr> + <th scope="row">Examplo</th> + <td> + <pre class="brush: json no-line-numbers"> +"permissions": [ + "*://developer.mozilla.org/*", + "webRequest" +]</pre> + </td> + </tr> + </tbody> +</table> + +<p>Use a chave <code>permissions</code> para solicitar privilégios especiais para sua extensão. Esta chave é um array de strings, onde cada string é uma solicitação para uma permissão.</p> + +<p>Se você solicitar permissões usando esta chave, o navegador poderá informar ao usuário que a extensão a ser instalada está solicitando certos privilégios, e perguntar se aceita ou não conceder esses privilégios. O navegador também poderá permitir que o usuário inspecione os privilégios de uma extensão depois que essa for instalada.</p> + +<p>A chave pode conter três tipos de permissões:</p> + +<ul> + <li>permissões de servidor (host)</li> + <li>permissões de API</li> + <li>a permissão activeTab (aba ativa)</li> +</ul> + +<h2 id="Permissões_de_servidor_(host)">Permissões de servidor (host)</h2> + +<p>Permissões de servidor são espscificadas como <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>. Cada <em>pattern</em> identifica um grupo de URLs para os quais a extensão solicita privilégios adicionais. Por exemplo, uma permissão de servidor poderia ser <code>"*://developer.mozilla.org/*"</code>.</p> + +<p>Os privilégios adicionais incluem:</p> + +<ul> + <li>acesso <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> e <a href="/en-US/docs/Web/API/Fetch_API">fetch</a> para aquelas origens sem restrições <em>cross-origin</em> (mesmo para requisições feitas a partir de <em>content scripts</em>)</li> + <li>habilidade de injetar scripts programaticamente (usando <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript</a>) em páginas servidas a partir daquelas origens</li> + <li>habilidade de receber eventos a partir da API <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a> para aqueles servidores</li> + <li>habilidade de acessar cookies daquele servidor usando a API <a href="/en-US/Add-ons/WebExtensions/API/cookies">cookies</a>, caso a permissão de API "cookies" também esteja incluída.</li> + <li>desconsiderar a proteção contra rastreamento se o servidor for um domínio completo sem asteriscos. Não funciona com <code><all_urls></code>.</li> +</ul> + +<p>No Firefox, da versão 56 em diante, extensões recebem automaticamente permissões de servidor para sua própria origem, que é na forma:</p> + +<pre><code>moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/</code></pre> + +<p>onde <code>60a20a9b-1ad4-af49-9b6c-c64c98c37920</code> é o ID interno da extensão. A extensão pode obter essa URL programaticamente chamando <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/extension/getURL">extension.getURL()</a>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">""</span><span class="punctuation token">);</span> +// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/</code></pre> + +<h2 id="Permissões_de_API">Permissões de API</h2> + +<p>Permissões de API são especificadas como palavras-chave. Cada palavra-chave nomeia uma API WebExtension que a extensão gostaria de usar.</p> + +<p>As seguintes palavras-chave estão atualmente disponíveis:</p> + +<ul> + <li><code>activeTab</code></li> + <li><code>alarms</code></li> + <li><code>background</code></li> + <li><code>bookmarks</code></li> + <li><code>browserSettings</code></li> + <li><code>browsingData</code></li> + <li><code>contentSettings</code></li> + <li><code>contextMenus</code></li> + <li><code>contextualIdentities</code></li> + <li><code>cookies</code></li> + <li><code>debugger</code></li> + <li><code>dns</code></li> + <li><code>downloads</code></li> + <li><code>downloads.open</code></li> + <li><code>find</code></li> + <li><code>geolocation</code></li> + <li><code>history</code></li> + <li><code>identity</code></li> + <li><code>idle</code></li> + <li><code>management</code></li> + <li><code>menus</code></li> + <li><code>nativeMessaging</code></li> + <li><code>notifications</code></li> + <li><code>pageCapture</code></li> + <li><code>pkcs11</code></li> + <li><code>privacy</code></li> + <li><code>proxy</code></li> + <li><code>search</code></li> + <li><code>sessions</code></li> + <li><code>storage</code></li> + <li><code>tabHide</code></li> + <li><code>tabs</code></li> + <li><code>theme</code></li> + <li><code>topSites</code></li> + <li><code>webNavigation</code></li> + <li><code>webRequest</code></li> + <li><code>webRequestBlocking</code></li> +</ul> + +<p>Na maioria dos casos, a permissão apenas concede acesso à API, com as seguintes exceções:</p> + +<ul> + <li> <code>tabs</code> dá acesso a <a href="/en-US/Add-ons/WebExtensions/API/tabs">partes privilagiadas da API <code>tabs</code></a>: <code>Tab.url</code>, <code>Tab.title</code> e <code>Tab.faviconUrl</code>. No Firefox, você também precisa <code>tabs</code> se quiser incluir <code>url</code> no parâmetro <code>queryInfo</code> para <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code>. O resto ad API <code>tabs</code> pode ser usado sem solicitar nenhuma permissão.</li> + <li><code>webRequestBlocking</code> permite usar o argumento "blocking", assim você pode <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">modificar e cancelar requisições</a>.</li> + <li><code>downloads.open</code> permite usar a API {{WebExtAPIRef("downloads.open()")}}.</li> + <li><code>tabHide</code> permite usar a API {{WebExtAPIRef("tabs.hide()")}}.</li> +</ul> + +<h2 id="Permissão_activeTab_(aba_ativa)">Permissão activeTab (aba ativa)</h2> + +<p>Esta permissão é especificada como <code>"activeTab"</code>. Se uma extensão tem a permissão <code>activeTab</code>, quando o usuário interage com a extensão, a extensão recebe privilégios adicionais somente para a aba ativa.</p> + +<p>"Interação do usuário" inclui:</p> + +<ul> + <li>o usuário clica na ação da extensão, no navegador ou na página</li> + <li>o usuário seleciona um item da extensão no menu de contexto</li> + <li>o usuário ativa um atalho de teclado definido pela extensão</li> +</ul> + +<p>Os privilégios adicionais são:</p> + +<ul> + <li>habilidade de injetar JavaScript ou CSS na aba programaticamente, usando <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript</a></code> e <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS</a></code></li> + <li>acesso a essas partes privilegiadas da API <em>tabs</em> na aba atual: <code>Tab.url</code>, <code>Tab.title</code> e <code>Tab.faviconUrl</code>.</li> +</ul> + +<p>A intenção desta permissão é permitir que extensões executem um caso de uso comum, sem ter que lhes dar permissões poderosas demais. Muitas extensões querem "fazer alguma coisa com a página atual quando o usuário pede". Por exemplo, considere uma extensão que queira executar um script na página atual quando o usuário clicar em uma ação do navegador. Se a permissão <code>activeTab</code> não existisse, a extensão precisaria pedir a permissão de servidor <code><all_urls></code>. Mas isso daria à extensão mais poder que o necessário: ela poderia executar scripts em qualquer aba e quando quisesse, em vez de apenas na aba atual e somente em resposta a uma ação do usuário.</p> + +<p>Note que você só pode ter acesso à aba ou dado que estava ali, quando a interação do usuário ocorreu (por exemplo, um clique do mouse). Quando a aba ativa muda para outra página, por exemplo devido a concluir o carregamento ou algum outro evento, a permissão não lhe concede mais acesso à aba.</p> + +<p>Normalmente, a aba a qual foi concedido <code>activeTab</code> é somente a aba ativa atual, exceto em um caso. A API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code> permite a uma extensão criar um item de menu que é exibido se o usuário abrir o menu de contexto sobre uma aba (ou seja, no elemento na lista de abas que permite ao usuário mudar de uma aba para outra). Se o usuário clicar em um item desses, a permissão <code>activeTab</code> é concedida para a aba em que o usuário clicou, mesmo que essa não seja a aba ativa no momento (de acordo com Firefox 63, {{bug(1446956)}}).</p> + +<h2 id="Acesso_à_área_de_transferência">Acesso à área de transferência</h2> + +<p>Existem duas permissões que permitem à extensão interagir com a área de transferência:</p> + +<ul> + <li><code>clipboardWrite</code>: escrever para a área de transferência usando <code>document.execCommand("copy")</code> ou <code>document.execCommand("cut")</code></li> + <li><code>clipboardRead</code>: ler da área de transferência usando <code>document.execCommand("paste")</code></li> +</ul> + +<p>Consulte <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interação com a área de transferência</a> para saber todos os detalhes sobre isso.</p> + +<h2 id="Armazenamento_ilimitado">Armazenamento ilimitado</h2> + +<p>A permissão <code>unlimitedStorage</code>:</p> + +<ul> + <li>permite que extensões exceder qualquer quota imposta pela API {{WebExtAPIRef("storage.local")}}</li> + <li>no Firefox, permite que extensões criem um <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Firefox_specifics">banco de dados IndexedDB "persistente"</a>, sem que o navegador peça ao usuário permissão no momento em que o banco de dados é criado.</li> +</ul> + +<h2 id="Examplos">Examplos</h2> + +<pre class="brush: json no-line-numbers"> "permissions": ["*://developer.mozilla.org/*"]</pre> + +<p>Solicita acesso privilegiado a páginas sob developer.mozilla.org.</p> + +<pre class="brush: json no-line-numbers"> "permissions": ["tabs"]</pre> + +<p>Solicita acesso a partes privilegiadas da API <code>tabs</code>.</p> + +<pre class="brush: json no-line-numbers"> "permissions": ["*://developer.mozilla.org/*", "tabs"]</pre> + +<p>Solicita ambas as permissões anteriores.</p> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.manifest.permissions")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/short_name/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/short_name/index.html new file mode 100644 index 0000000000..10566678d3 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/short_name/index.html @@ -0,0 +1,43 @@ +--- +title: short_name +slug: Mozilla/Add-ons/WebExtensions/manifest.json/short_name +tags: + - Manifesto + - Sort name +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/short_name +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Tipo</th> + <td><code>String</code></td> + </tr> + <tr> + <th scope="row">Obrigatório</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Exemplo</th> + <td> + <pre class="brush: json no-line-numbers"> +"short_name": "Minha Extensão"</pre> + </td> + </tr> + </tbody> +</table> + +<p>Nome abreviado (short name) da extensão. Se informado, ele será usado em contextos onde o campo de nome for muito longo. É recomendado que o nome abreviado não deva exceder 12 caracteres. Se o campo do nome abreviado não for incluído no manifest.json, então o nome será usado em vez disso e pode ser truncado. </p> + +<p>Isto é um <a href="/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">propriedade localizável</a>.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: json no-line-numbers">"short_name": "Minha Extensão"</pre> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados. Se você gostaria de contribuir para os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um 'pull request'.</p> + +<p>{{Compat("webextensions.manifest.short_name")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html new file mode 100644 index 0000000000..9d13e7e72c --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html @@ -0,0 +1,97 @@ +--- +title: web_accessible_resources +slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources +tags: + - Add-ons + - Extensões +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources +--- +<p>{{AddonSidebar}}</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Tipo</th> + <td><code>Array</code></td> + </tr> + <tr> + <th scope="row">Obrigatório</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Exemplo</th> + <td> + <pre class="brush: json no-line-numbers"> +"web_accessible_resources": [ + "images/my-image.png" +]</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Descrição">Descrição</h2> + +<p>As vezes, você precisa empacotar recursos — por exemplo, imagens, HTML, CSS ou Javascript — com a sua extensão e fazê-la acessível para as páginas web.</p> + +<p>Por exemplo, a <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">extensão de exemplo Beastify</a> substitui uma página por uma imagem de um animal selecionado pelo usuário. As imagens foram empacotadas com a extensão. Para fazer visível a imagem selecionada, a extensão adiciona elementos <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> cujo atributo <code>src</code> aponta para a imagem do animal. Para que a página da web possa carregar as imagens, elas devem estar disponíveis na extensão.</p> + +<p>With the <code>web_accessible_resources</code> key, you list all the packaged resources that you want to make available to web pages. You specify them as paths relative to the manifest.json file.</p> + +<p>Note that content scripts don't need to be listed as web accessible resources.</p> + +<p>If an extension wants to use {{WebExtAPIRef("webRequest")}} to redirect a public URL (e.g., HTTPS) to a page that's packaged in the extension, then the extension must list the page in the <code>web_accessible_resources</code> key.</p> + +<h3 id="Using_web_accessible_resources">Using web_accessible_resources</h3> + +<p>For example, suppose your extension includes an image file at images/my-image.png, like this:</p> + +<pre class="no-line-numbers">my-extension-files/ + manifest.json + my-background-script.js + images/ + my-image.png</pre> + +<p>To enable a web page to use an <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element whose <code>src</code> attribute points to this image, you would specify <code>web_accessible_resources</code> like this:</p> + +<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre> + +<p>The file is then available using a URL like:</p> + +<pre class="no-line-numbers">moz-extension://<extension-UUID>/images/my-image.png"</pre> + +<p><code><extension-UUID></code> is <strong>not</strong> your extension's ID. This ID is randomly generated for every browser instance. This prevents websites from fingerprinting a browser by examining the extensions it has installed.</p> + +<div class="blockIndicator note"> +<p>In Chrome, an extension's ID is fixed. When a resource is listed in <code>web_accessible_resources</code>, it is accessible as <code>chrome-extension://<your-extension-id>/<path/to/resource></code>. </p> +</div> + +<p>The recommended approach to obtaining the URL of the resource is to use <code><a href="/en-US/Add-ons/WebExtensions/API/runtime/getURL">runtime.getURL</a></code> passing the path relative to manifest.json, for example:</p> + +<pre class="brush: js no-line-numbers">browser.runtime.getURL("images/my-image.png"); +// something like: +// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png</pre> + +<p>This approach gives you have the correct URL regardless of the browser your extension is running on.</p> + +<h3 id="Wildcards">Wildcards</h3> + +<p><code>web_accessible_resources</code> entries can contain wildcards. For example, the following entry would also work to include the resource at "images/my-image.png":</p> + +<pre class="brush: json no-line-numbers"> "web_accessible_resources": ["images/*.png"]</pre> + +<h3 id="Security">Security</h3> + +<p>Note that if you make a page web-accessible, any website may link or redirect to that page. The page should then treat any input (POST data, for examples) as if it came from an untrusted source, just as a normal web page should.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre> + +<p>Make the file at "images/my-image.png" web accessible.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.manifest.web_accessible_resources")}}</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html b/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html new file mode 100644 index 0000000000..7050516e82 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html @@ -0,0 +1,56 @@ +--- +title: O que vem a seguir ? +slug: Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +<div>{{AddonSidebar}}</div> + +<p>Você está pronto para começar a tornar a tua ideia de extensão de navegador uma realidade. Antes de iniciar essa jornada, vale a pena estar ciente de algumas coisas que te ajudarão a torná-la tranquila.</p> + +<h2 id="Teu_ambiente_de_desenvolvimento">Teu ambiente de desenvolvimento</h2> + +<p>Você não precisa de ferramentas de desenvolvimento especiais para criar extensões de navegador: é inteiramente possível criar ótimas extensões de navegador sem mais que um editor de textos. Porém, talvez você tenha desenvolvido para a web e tenha um conjunto de ferramentas e um ambiente que quer usar. Se for assim, você precisa estar ciente de algumas coisas.</p> + +<p>Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para <a href="#The_review_process">o processo de revisão AMO</a>. Além disso, as ferramentas que você utiliza, — para minificação, obfuscação e contrução — devem ser open source ( ou oferecer uso gratuito sem limites ) e disponíveis para execução no computador do revisor (Windows, Mac ou Linux). Infelizmente, nossos revisores não podem trabalhar com ferramentas comerciais ou baseadas em web.</p> + +<p><a href="/en-US/Add-ons/Source_Code_Submission#About_build_tools">Aprenda mais acerca de ferramentas de construção</a></p> + +<h2 id="Third-party_libraries">Third-party libraries</h2> + +<p>Third-party libraries are a great way to add complex features or functionality to your browser extensions quickly. When you submit an extension to the <a href="#The_review_processv">AMO review process</a>, the process will also consider any third-party libraries used. To streamline the review, make sure you always download third-party libraries from their official website or repository, and if the library is minified provide a link to the source code. Please note that third-party libraries cannot be modified in any way.</p> + +<p><a href="/en-US/Add-ons/Source_Code_Submission">Learn more about submitting source code</a></p> + +<h2 id="The_Firefox_Add-on_Distribution_Agreement">The Firefox Add-on Distribution Agreement</h2> + +<p>Browser extensions need to be signed to install into the release or beta versions of Firefox. Signing takes place in addons.mozilla.org (AMO) and is subject to the terms and conditions of the Firefox Add-on Distribution Agreement. The goal of the agreement is to ensure Firefox users get access to well supported, quality add-ons that enhance the Firefox experience.</p> + +<p><a href="/Add-ons/AMO/Policy/Agreement">Read the agreement</a></p> + +<p><a href="/en-US/Add-ons/WebExtensions/Distribution">Learn more about signing</a></p> + +<h2 id="The_review_process">The review process</h2> + +<p>When a browser extension is submitted for signing, it's subject to automated review. It may also be subject to a manual review, when the automated review determines that a manual review is needed. Your browser extension won't be signed until it’s passed the automated review and may have its signing revoked if it fails to pass the manual review. The review process follows a strict set of guidelines, so it’s easy to check and avoid any likely review problems.</p> + +<p><a href="/en-US/Add-ons/AMO/Policy/Reviews">Check out the review policy and guidelines</a></p> + +<h2 id="AMO_featured_browser_extensions">AMO featured browser extensions</h2> + +<p>If you choose to list your browser extension on AMO, your extension could be featured on the AMO website, in the Firefox browser’s add-on manager, or elsewhere on a Mozilla website. We've compiled a list of guidelines about how extensions are selected for featuring, by following these guidelines you give your extension the best chance of being featured.</p> + +<p><a href="/en-US/Add-ons/AMO/Policy/Featured">Learn more about getting your add-ons featured</a></p> + +<h2 id="Continue_your_learning_experience">Continue your learning experience</h2> + +<p>Now you know what lies ahead, it's time to dive into more details about browser extension development. In the sections that follow, you’ll discover:</p> + +<ul> + <li>More about the fundamental concepts behind browser extensions, starting with details on how to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">use the JavaScript APIs</a>.</li> + <li>A guide to the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">user interface components</a> available to your browser extensions.</li> + <li>A collection of how-to guides on achieving key tasks in your extensions or making use of the JavaScript APIs.</li> + <li>Information on how to port other browser extensions to Firefox.</li> + <li>Details about the Firefox specific workflows you can use to develop browser extensions.</li> + <li>A full reference guide to the JavaScript APIs.</li> + <li>A full reference guide to the Manifest keys.</li> +</ul> diff --git a/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html b/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html new file mode 100644 index 0000000000..1e49d92e3c --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html @@ -0,0 +1,306 @@ +--- +title: Passo-a-Passo +slug: Mozilla/Add-ons/WebExtensions/Passo-a-Passo +tags: + - Extensões Web + - extensões firefox + - passo-a-passo +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +<p>Neste artigo iremos criar uma Extensão para Firefox do início ao fim.</p> + +<p>A extensão adicionará um novo botão na barra de ferramentas do Firefox. Quando clicar no botão se exibirá um popup habilitando a escolha de um animal. Uma vez que o usuário escolher um animal, a página atual do navegador será substituida por uma imagem do animal escolhido.</p> + +<p>Para implementar esse extensão, será necessário:</p> + +<ul> + <li><strong>definir a ação do navegador, que é um botão ligado a barra de ferramentas</strong>.<br> + Para o botão nós iremos fornecer: + <ul> + <li>um icone chamado "beasts.png"</li> + <li>um popup para abrir quando o botão for pressionado. O popup irá ter incluso HTML, CSS e JavaScript.</li> + </ul> + </li> + <li><strong>escrever um content script, "beastify.js" que irá ser injetado na página web</strong>.<br> + Este é o código que irá modificar a página.</li> + <li><strong>empacotar alguma imagens de animais para substituir na página</strong>.<br> + Nós iremos criar as imagens "web accessible resources" então a página poderá referenciar eles.</li> +</ul> + +<p>Você pode visualizar toda a estrutura da extensão da seguinte forma:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11467/beastify-anatomy.svg" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:</p> + +<ul> + <li>adicionando um botão na barra de ferramentas</li> + <li>Definindo um panel de popup usando HTML, CSS e JavaScript</li> + <li>Injetando content scripts nas páginas</li> + <li>comunicação entre content scripts e o resto das extensões</li> + <li>empacotando recursos com sua extensão que serão usadas nas páginas</li> +</ul> + +<p>Você pode encontrar o código completo da extensão no <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">GitHub</a>.</p> + +<p>Para criar essa extensão você precisará do Firefox 45 ou mais recente.</p> + +<h2 id="Escrevendo_a_WebExtension">Escrevendo a WebExtension</h2> + +<p>Crie um novo diretório e navegue até ele:</p> + +<pre class="brush: bash">mkdir beastify +cd beastify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Beastify", + "version": "1.0", + + "applications": { + "gecko": { + "id": "beastify@mozilla.org" + } + }, + + "permissions": [ + "http://*/*", + "https://*/*" + ], + + "browser_action": { + "default_icon": "button/beasts.png", + "default_title": "Beastify", + "default_popup": "popup/choose_beast.html" + }, + + "web_accessible_resources": [ + "beasts/frog.jpg", + "beasts/turtle.jpg", + "beasts/snake.jpg" + ] + +} +</pre> + +<ul> + <li>As primeiras três chaves : <strong><code>manifest_version</code></strong>, <strong><code>name</code></strong>, e <strong><code>version</code></strong>, são obrigatórias e contém metadados básicos para a extensão.</li> + <li><strong><code>permissions</code></strong> lista as permisões que a extensão precisa. Nós iremos apenas perguntar se pediremos permissão para modificar todas as páginas HTTP e HTTPS : veja a documentação para as chaves de <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>. Nós prefirimos por usar a permissão <code>activeTab</code> aqui , mas atualmente não é suportada pela Firefox.</li> + <li><strong><code>browser_action</code></strong> especifica o botão da barra de ferramentas. Iremos fornecer três informações aqui: + <ul> + <li><strong><code>default_icon</code></strong> é obrigatório, e aponta para o icone do botão</li> + <li><strong><code>default_title</code></strong> é opicional, e mostra a mensagem em um tooltip</li> + <li><strong><code>default_popup</code></strong> é usado se você quer que um popup seja mostrado quando o usuário clicar no botão. Nós fazemos isto, então incluímos esta chave e apontamos para um arquivo HTML incluído na extensão.</li> + </ul> + </li> + <li><strong><code>web_accessible_resources</code></strong> lista arquivos que queremos criar tornar acessível para as páginas. Uma vez que a extensão substitui as imagens da página com imagens que já empacotamos com a extensão , nós precisamos fazer estas imagens acessíveis à página.</li> +</ul> + +<p>Perceba que todos os caminhos são relativos ao manifest.json.</p> + +<h3 id="O_Botão_na_barra_de_ferramentas">O Botão na barra de ferramentas</h3> + +<p>O botão na barra de ferramentas precisa de um icone, e nosso manifest.json informa que nós teriamos um icone em "button/beasts.png".</p> + +<p>Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/button/beasts.png">exemplo,</a> que é retirado do <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina iconset</a> e usado sob os termos de sua <a href="http://www.iconbeast.com/faq/">licença</a>.</p> + +<p>Se você não fornecer um popup, então um evento de click é lançado para sua extensão quando o usuário clicar no botão. Se você fornecer um popup, o evento de click não envia, mas ao invés disso, o popup é aberto. Nós queremos abrir um popup, então vamos criá-lo na próxima etapa.</p> + +<h3 id="O_popup">O popup</h3> + +<p>A função do popup é ativar a escolha do usuário para um dos três animais.</p> + +<p>Crie um novo diretório chamado "popup" na raiz do projeto. Aqui é onde nós criar os códigos para o popup. O popup irá ser constituido em três arquivos :</p> + +<ul> + <li><strong><code>choose_beast.html</code></strong> Define o conteúdo do panel</li> + <li><strong><code>choose_beast.css</code></strong> Estilo do conteúdo</li> + <li><strong><code>choose_beast.js</code></strong> Captura a escolha do usuário executando um content script a aba ativa</li> +</ul> + +<h4 id="choose_beast.html">choose_beast.html</h4> + +<p>O arquivo HTML criado é este:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="choose_beast.css"/> + </head> + + <body> + <div class="beast">Frog</div> + <div class="beast">Turtle</div> + <div class="beast">Snake</div> + + <script src="choose_beast.js"></script> + </body> + +</html></pre> + +<p>Nós temos um elemento para cada escolha de animal. Perceba que nós incluimos os arquivo CSS e JS nesse arquivo, igual a uma página web.</p> + +<h4 id="choose_beast.css">choose_beast.css</h4> + +<p>O CSS ajusta o tamanho do popup, garantindo que as três escolhas irão preencher o espaço, e daremos a eles algum estilo básico:</p> + +<pre class="brush: css">html, body { + height: 100px; + width: 100px; + margin: 0; +} + +.beast { + height: 30%; + width: 90%; + margin: 3% auto; + padding-top: 6%; + text-align: center; + font-size: 1.5em; + background-color: #E5F2F2; + cursor: pointer; +} + +.beast:hover { + background-color: #CFF2F2; +}</pre> + +<h4 id="choose_beast.js">choose_beast.js</h4> + +<p>No JavaScript para o popup, nós iremos "escutar" o evento de click . Se o clique foi em uma das três escolhas de animais, nós iremos injetar um content script na aba ativa. Um vez que o content script é carregado , nós enviaremos uma mensagem com o animal escolhido:</p> + +<pre class="brush: js">document.addEventListener("click", function(e) { + if (!e.target.classList.contains("beast")) { + return; + } + + var chosenBeast = e.target.textContent; + + chrome.tabs.executeScript(null, { + file: "/content_scripts/beastify.js" + }); + + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {beast: chosenBeast}); + }); + +}); +</pre> + +<p>É usado três funções da API WebExtension:</p> + +<ul> + <li><strong><code>chrome.tabs.executeScript</code></strong> Para injetar um content script que se encontra em "content_scripts/beastify.js" na aba ativa</li> + <li><strong><code>chrome.tabs.query</code></strong> Obter a aba ativa</li> + <li><strong><code>chrome.tabs.sendMessage</code></strong> para enviar uma mensagem para o content scripts executando na aba ativa. A mensagem irá conter as propriedades do animal escolhido.</li> +</ul> + +<h3 id="O_content_script">O content script</h3> + +<p>Crie a novo diretório na pasta root do projeto chamado "content_scripts" e crie um novo arquivo com o nome "beastify.js", com o seguinte conteúdo:</p> + +<pre class="brush: js">// Assign beastify() as a listener for messages from the extension. +chrome.runtime.onMessage.addListener(beastify); + +function beastify(request, sender, sendResponse) { + removeEverything(); + insertBeast(beastNameToURL(request.beast)); + chrome.runtime.onMessage.removeListener(beastify); +} + +function removeEverything() { + while (document.body.firstChild) { + document.body.firstChild.remove(); + } +} + +function insertBeast(beastURL) { + var beastImage = document.createElement("img"); + beastImage.setAttribute("src", beastURL); + beastImage.setAttribute("style", "width: 100vw"); + beastImage.setAttribute("style", "height: 100vh"); + document.body.appendChild(beastImage); +} + +function beastNameToURL(beastName) { + switch (beastName) { + case "Frog": + return chrome.extension.getURL("beasts/frog.jpg"); + case "Snake": + return chrome.extension.getURL("beasts/snake.jpg"); + case "Turtle": + return chrome.extension.getURL("beasts/turtle.jpg"); + } +} + +</pre> + +<p>O content script adiciona um listener da mensagem para a extensão (especificamente , para "choose_beast.js"). No listener:</p> + +<ul> + <li>remover todos os elementos em <code>document.body</code></li> + <li>transforma os nomes dos animais em uma URL para ser usada na imagem</li> + <li>Cria uma tag <code><img></code>, e insere no DOM</li> + <li>Remove a mensagem da listener</li> +</ul> + +<h3 id="Os_animais">Os animais</h3> + +<p>Finalmente, nós precisamos incluir as imagens dos animais.</p> + +<p>Crie um novo diretório chamado "beasts", e adicione as três imagens nos diretório, com os nomes apropriados. Você pode obter as imagens aqui no <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">GitHub</a>, ou aqui:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p> + +<h2 id="Empacotando_e_instalando">Empacotando e instalando</h2> + +<p>Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:</p> + +<pre>beastify/ + + beasts/ + frog.jpg + snake.jpg + turtle.jpg + + button/ + beasts.png + + content_scripts/ + beastify.js + + popup/ + choose_beast.css + choose_beast.html + choose_beast.js + + manifest.json</pre> + +<p>Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".</p> + +<p>Um truque é que o arquivo ZIP deve ser um dos arquivos de extensão . Portanto, para criar um XPI a partir dos arquivos beastify , navegue até o diretório " beastify " em um shell de comando e digite:</p> + +<pre class="brush: bash"> # in beastify/ + zip -r ../beastify.xpi *</pre> + + + +<p>Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI</p> + +<p>Para instalar o XPI, você apenas irá abrir o Firefox:</p> + +<ul> + <li>Vá até o Arquivos, seleciona Abrir arquivo, ou pressione Ctrl/Cmd+O</li> + <li>selecione "beastify.xpi" na caixa de dialógo que abriu</li> +</ul> + +<p>Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.</p> + +<p>Você poderá ver o icone aparecer na barra de ferramentas. Abra uma nova página web, então click no icone, selecione um animal e veja a imagem que você escolheu na página.</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html b/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html new file mode 100644 index 0000000000..4e7e854644 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html @@ -0,0 +1,23 @@ +--- +title: Pré-requisitos +slug: Mozilla/Add-ons/WebExtensions/pre-requisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +<p>Para desenvolver utilizando as APIs de uma WebExtension, você precisa de uma configuração mínima.</p> + +<ul> + <li>baixar, instalar e abrir o <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a> ou o <a class="external text" href="https://nightly.mozilla.org/" rel="nofollow">Firefox Nightly</a>. Use o Nightly caso queira as atualizações mais recentes.</li> + <li>altere a preferência que permite que o Firefox instale add-ons sem assinatura. Essa opção de configuração só está disponível nas versões do Firefox citadas no item anterior. + <ul> + <li>digite <code>about:config</code> na barra de endereço do Firefox</li> + <li>na caixa de pesquisa digite <code>xpinstall.signatures.required</code></li> + <li>dê um duplo clique na preferência ou clique com o botão direito e selecione a opção "Inverter valor" para alternar de <code>verdadeiro</code> para <code>falso</code>.</li> + </ul> + </li> +</ul> + +<div id="forvo" style="position: absolute; background-color: green; color: white; top: 87px; left: 100px;"> </div> + +<div id="forvo" style="position: absolute; background-color: green; color: white;"> </div> + +<div id="forvo" style="position: absolute; background-color: green; color: white;"> </div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html new file mode 100644 index 0000000000..9d3045e28a --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html @@ -0,0 +1,150 @@ +--- +title: Sua primeira extensão +slug: Mozilla/Add-ons/WebExtensions/sua_primeira_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p><span id="result_box" lang="pt"><span>Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox.</span> <span>A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios</span></span>.</p> + +<p>O código fonte para este exemplo está no GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p><span id="result_box" lang="pt"><span>Para começar, você precisará do Firefox versão 45 ou posterior</span></span>.</p> + +<h2 id="Construindo_a_Extensão">Construindo a Extensão</h2> + +<p>Crie uma nova pasta dando o nome de "<span id="result_box" lang="pt"><span>borderify</span></span>" e navegue para dentro dela.</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p><span id="result_box" lang="pt"><span>Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e</span> c<span>oloque o seguinte conteúdo no arquivo</span></span>:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "<span id="result_box" lang="pt"><span>Adiciona uma borda vermelha a todas as páginas da Web correspondentes a</span></span> mozilla.org.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li>As primeiras tres chaves: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, e <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, são obrigatórias e contém os metadados básicos sobre a extensão.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> é opcional contudo é recomendada pois aparece no gerenciador de complementos.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> é opcional porém recomendada pois define os ícones que aparecem no gerenciador de complementos.</li> +</ul> + +<p><span id="result_box" lang="pt"><span>A chave mais interessante aqui é</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <span id="result_box" lang="pt"><span>que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico.</span> <span>Nesse caso, pedimos ao Firefox para carregar um script chamado "borderify.js" em todas as páginas HTTP ou HTTPS oriundas de "mozilla.org" ou em qualquer um de seus subdomínios.</span></span></p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Saiba mais sobre scripts de conteúdo.</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Saiba mais sobre padrões de correspondência</a>.</li> +</ul> + +<div class="warning"> +<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">Em algumas situações, você precisa especificar uma ID para sua extensão</a>. Se você precisar especificar um ID de extensão, inclua a chave <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> no <code>manifest.json</code> e configure sua propriedade <code>id</code>:</p> + +<pre class="brush: json">"applications": { + "gecko": { + "id": "borderify@example.com" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p><span id="result_box" lang="pt"><span>A extensão deve ter um ícone.</span> Ele<span> será mostrado ao lado da listagem de extensões no Gerenciador de Extensões.</span> <span>Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".</span></span></p> + +<p><span id="result_box" lang="pt"><span>Crie o diretório "icons" diretamente sob o diretório "borderify".</span> <span>Salve um ícone chamado "border-48.png"</span></span>. Você pode usar o icone <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">do nosso exemplo</a>, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p> + +<p><span id="result_box" lang="pt"><span>Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e</span><span> também deve criar um ícone de 96x96 pixels também .PNG, para telas de alta resolução, e se você fizer isso será especificado como a propriedade 96 do objeto icons em manifest.json</span></span>:</p> + +<pre class="brush: json">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p><span id="result_box" lang="pt"><span>Como alternativa, você pode criar um ícone em formato SVG e ele será dimensionado corretamente</span></span>.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Saiba mais sobre como especificar ícones.</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p><span id="result_box" lang="pt"><span>Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte</span><span> conteúdo:</span></span></p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p><span id="result_box" lang="pt"><span>Este script será carregado nas páginas que correspondem ao padrão especificado na chave </span></span> <code>content_scripts</code> do manifest.json. <span id="result_box" lang="pt"><span>O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.</span></span></p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Saiba mais sobre scripts de conteúdo.</a></li> +</ul> + +<h2 id="Testando">Testando</h2> + +<p>Primeiro, verifique se você está com os arquivos corretos nos lugares certos:</p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="Instalando">Instalando</h3> + +<p><span id="result_box" lang="pt"><span>Acesse a área de Debugging do Firefox digitando diretamente na barra de endereço: "about: debugging", em seguida clique em "Load Temporary Add-on" e selecione o "</span></span>borderify.js<span lang="pt"><span>".</span></span></p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p><span id="result_box" lang="pt"><span>A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.</span><br> + <br> + <span>Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta </span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p> + +<h3 id="Testando_2">Testando</h3> + +<p><span id="result_box" lang="pt"><span>Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:</span></span></p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p><span id="result_box" lang="pt"><span>Não tente acessar addons.mozilla.org!</span> <span>Os scripts de conteúdo são bloqueados nesse domínio</span></span>.</p> +</div> + +<p><span id="result_box" lang="pt"><span>Experimente um pouco.</span> <span>Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página.</span> <span>Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging.</span> <span>Você poderá ver as mudanças imediatamente:</span></span></p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Saiba mais sobre o carregamento de extensões</a></li> +</ul> + +<h2 id="Empacotando_e_publicando">Empacotando e publicando</h2> + +<p><span id="result_box" lang="pt"><span>Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura.</span> <span>Para saber mais sobre isso, consulte</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publicando sua Extensão"</a>.</p> + +<h2 id="Próximos_passos">Próximos passos</h2> + +<p><span id="result_box" lang="pt"><span>Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:</span></span></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia de uma Extensão</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Criar uma Extensão mais complexa</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">Saber mais sobre JavaScript APIs disponíveis para Extensões.</a></li> +</ul> diff --git a/files/pt-br/mozilla/add-ons/webextensions/user_interface/index.html b/files/pt-br/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..78b988a523 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,97 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</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">UI option</th> + <th scope="col">Description</th> + <th scope="col" style="width: 350px;">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</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 showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td>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 the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</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/15745/address_bar_button.png" style="height: 348px; width: 700px;"></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/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</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="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></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 sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></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 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/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</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/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</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 of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</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/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td> + <td>A tab with an associated HTML document that displays in the browser's developer tools.</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/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></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="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines">Accessibility guidelines</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> +</ul> diff --git a/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html b/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html new file mode 100644 index 0000000000..cf8e2d7198 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html @@ -0,0 +1,58 @@ +--- +title: Itens do menu de contexto +slug: Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +<div>{{AddonSidebar}}</div> + +<div> +<p><span class="seoSummary">Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.</span>Este é o menu de contexto disponível quando um usuário clica com o botão direito numa página web. As guias também podem ter menus de contexto, disponível através da API <a href="/en-US/Add-ons/WebExtensions/API/menus">browser.menus</a>.</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/15756/context_menu_example.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>Você usaria essa opção para expor recursos relevantes para contextos específicos de navegadores ou páginas da web. Por exemplo, você poderia mostrar recursos para abrir um editor gráfico quando o usuário clica em uma imagem ou pode oferecer um recurso para salvar o conteúdo da página quando uma parte da página é selecionada. Você pode adicionar itens planos de menu, caixas de seleção, grupos de botões de rádio, e separadores para os menus. Quando um item de menu de contexto for adicionado usando {{WebExtAPIRef("contextMenus.create")}}, é mostrado em todas as guias do navegador, mas você pode escondê-lo usando {{WebExtAPIRef("contextMenus.remove")}}.</p> + +<p>A lista inteira dos contextos suportados está disponível em {{WebExtAPIRef("menus.ContextType")}} e inclui contextos de fora de uma página web, como itens de favoritos na interface do navegador. Por exemplo, a extensão "<a href="https://github.com/Rob--W/bookmark-container-tab">Open bookmark in Container Tab</a>" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16554/extension_context_menu.png" style="border: 1px solid black; display: block; height: 637px; margin: 0px auto; width: 505px;"></p> + +<h2 id="Especificando_itens_do_menu_de_contexto">Especificando itens do menu de contexto</h2> + +<p>Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão <code>contextMenus</code> em seu manifest.json para poder tomar vantagem desta API.</p> + +<pre class="brush: json">"permissions": ["contextMenus"]</pre> + +<p>Você pode então adicionar (e atualizar ou apagar) os itens do menu de contexto em seu script de "background" (segundo plano) da sua extensão. Para criar um item de menu, você especifica um id, seu título, e os menus de contexto em que ele deve aparecer:</p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "log-selection", + title: browser.i18n.getMessage("contextMenuItemSelectionLogger"), + contexts: ["selection"] +}, onCreated);</pre> + +<p>Sua extensão então escuta os cliques nos itens do menu. As informações passadas sobre o item clicado, o contexto em que o clique ocorreu e os detalhes da guia em que o clique ocorreu podem ser usadas para chamar a funcionalidade de extensão apropriada.</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="Ícones">Ícones</h2> + +<p>Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> na 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>O repositório <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/menu-demo">menu-demo</a> adiciona muitos itens para o menu de contexto do navegador.</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> adiciona um item de menu de contexto aos links que copiam o URL do link para a área de transferência, como texto sem formatação e HTML avançado.</li> +</ul> +</div> diff --git a/files/pt-br/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/pt-br/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..629cc94a9d --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,22 @@ +--- +title: O que são extensões? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>Extensões são bits de código que modificam a funcionalidade do navegador. Eles são escritos usando as tecnologias padrões da Web - JavaScript, HTML e CSS - além de APIs JavaScript dedicadas. Entre outras coisas, extensões podem adicionar novas funcionalidades para o navegador, ou mudar sua aparência, ou o conteúdo de páginas particulares.</p> + +<p>Extensões para Firefox são construídas usando <em>WebExtensions APIs</em>, um sistema multi-navegador (<em>cross-browser</em>) para o desenvolvimento de extensões. Para uma maior portabilidade, a API é compatível com a <a class="external external-icon" href="https://developer.chrome.com/extensions"><em>extension API</em>,</a> suportada pelo Google Chrome e pelo Opera. Extensões escritas para esses navegadores, na maioria dos casos, vão rodar no Firefox ou Microsoft Edge <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">com poucas mudanças</a>. A API é também totalmente compatível com o <em><a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a></em>.</p> + +<p>No passado, você poderia desenvolver extensões para Firefox usando um dos três <span class="gt-baf-word-clickable">métodos</span> diferentes: <em><a href="/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a></em> ou o <em><a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a></em>. A partir do fim de Novembro de 2017, <em>WebExtensions APIs</em> será o único meio de desenvolver extensões para Firefox, e os outros <span class="gt-baf-word-clickable">métodos</span> serão descontinuados.</p> + +<p>Se você tem dúvidas ou sugestões, ou precisa de ajuda para migrar um <em>add-on</em> antigo para o <em>WebExtensions APIs</em>, você pode entrar em contato conosco pela <a href="https://mail.mozilla.org/listinfo/dev-addons"><em>dev-addon mailing list</em> </a>ou pelo canal <em><a href="irc://irc.mozilla.org/extdev">#extdev</a></em> no <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 id="Próximos_passos">Próximos passos</h2> + +<ul> + <li>Para experimentar alguns exemplos de extensões, veja <a href="/en-US/Add-ons/WebExtensions/Examples">Exemplos de extensões</a></li> + <li>Para aprender sobre a estrutura de uma extensão, acesse <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia de uma Extensão.</a></li> + <li>Para acompanhar <span class="gt-baf-word-clickable">do início ao fim</span> o desenvolvimento de uma simples extensão, veja <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Sua primeira Extensão.</a></li> +</ul> |