From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../anatomia_de_uma_webextension/index.html | 115 ----- .../anatomy_of_a_webextension/index.html | 115 +++++ .../add-ons/webextensions/api/tema/index.html | 55 --- .../add-ons/webextensions/api/theme/index.html | 55 +++ .../empacotando_e_instalando/index.html | 95 ----- .../manifest.json/permissions/index.html | 184 ++++++++ .../manifest.json/permiss\303\265es/index.html" | 184 -------- .../webextensions/o_que_vem_a_seguir_/index.html | 56 --- .../add-ons/webextensions/passo-a-passo/index.html | 306 -------------- .../webextensions/pre-requisitos/index.html | 23 - .../add-ons/webextensions/prerequisites/index.html | 23 + .../sua_primeira_webextension/index.html | 150 ------- .../user_interface/context_menu_items/index.html | 58 +++ .../itens_do_menu_de_contexto/index.html | 58 --- .../add-ons/webextensions/what_next_/index.html | 56 +++ .../your_first_webextension/index.html | 150 +++++++ .../your_second_webextension/index.html | 306 ++++++++++++++ .../developer_guide/codigo_fonte/index.html | 70 --- .../mozilla/developer_guide/source_code/index.html | 70 +++ .../firefox/experimental_features/index.html | 469 +++++++++++++++++++++ .../firefox/novas_funcionalidades/index.html | 469 --------------------- .../firefox/releases/3/full_page_zoom/index.html | 45 ++ .../3/zoom_de_p\303\241gina_inteira/index.html" | 45 -- 23 files changed, 1531 insertions(+), 1626 deletions(-) delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html delete mode 100644 "files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html delete mode 100644 files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 files/pt-br/mozilla/developer_guide/codigo_fonte/index.html create mode 100644 files/pt-br/mozilla/developer_guide/source_code/index.html create mode 100644 files/pt-br/mozilla/firefox/experimental_features/index.html delete mode 100644 files/pt-br/mozilla/firefox/novas_funcionalidades/index.html create mode 100644 files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html delete mode 100644 "files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" (limited to 'files/pt-br/mozilla') 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 deleted file mode 100644 index 231797ec59..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/anatomia_de_uma_webextension/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -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 ---- -

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.

- -

Toda extensão contém um arquivo chamado "manifest.json". Ele pode conter ponteiros para quatro outros tipos de arquivos:

- - - -

- -

manifest.json

- -

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.

- -

Para mais detalhes sobre o arquivo "manifest.json", acesse a página de referência.

- -

Background pages

- -

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.

- -

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.

- -

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.

- -

Você pode incluir uma background page usando a chave background 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.

- -
// manifest.json
-
-"background": {
-  "scripts": ["background-script.js"]
-}
- -

No entanto, você pode escolher informar a página de background como um arquivo HTML a parte:

- -
// manifest.json
-
-"background": {
-  "page": "background-page.html"
-}
- -

Scripts de conteúdo

- -

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.

- -

Eles podem ver e manipular páginas DOM,

- -

Scripts de conteúdo podem ver e manipular o DOM das páginas, da mesma forma como os scripts normais carregados pela página.

- -

Ao contrário dos scripts normais, os scripts de conteúdo podem:

- - - -

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.

- -

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.

- -

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.

- -

Para injetar scripts em páginas com base na URL, use a chave content_scripts no "manifest.json", informando um ou mais scripts e um array com os padrões:

- -
// manifest.json
-
-"content_scripts": [
-  {
-    "matches": ["*://*.mozilla.org/*"],
-    "js": ["my-script.js"]
-  }
-]
- -

Se a URL da página corresponder aos padrões passados na chave matches, os scripts passados na chave js serão carregados.

- -

Para injetar os scripts na página via programação (por exemplo, quando o usuário clicar em um botão) use a API tabs:

- -
// background.js
-
-chrome.tabs.executeScript({
-  file: "my-script.js"
-});
- -

Aprenda mais sobre scripts de conteúdo lendo sua documentação.

- -

Ações de navegador

- -

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.

- -

Opcionalmente, você pode definir um popup para o botão usando HTML, CSS e JavaScript.

- -

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.

- -

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.

- -

Para aprender mais sobre ações de navegador, consulte a página da API.

- -

Recursos acessíveis na web

- -

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.

- -

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 img que fazem referência às imagens através do atributo src.

- -

Para entender mais, veja a documentação sobre chaves no manifest.json em recursos acessíveis na web.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..231797ec59 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/anatomy_of_a_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 +--- +

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.

+ +

Toda extensão contém um arquivo chamado "manifest.json". Ele pode conter ponteiros para quatro outros tipos de arquivos:

+ + + +

+ +

manifest.json

+ +

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.

+ +

Para mais detalhes sobre o arquivo "manifest.json", acesse a página de referência.

+ +

Background pages

+ +

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.

+ +

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.

+ +

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.

+ +

Você pode incluir uma background page usando a chave background 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.

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

No entanto, você pode escolher informar a página de background como um arquivo HTML a parte:

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

Scripts de conteúdo

+ +

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.

+ +

Eles podem ver e manipular páginas DOM,

+ +

Scripts de conteúdo podem ver e manipular o DOM das páginas, da mesma forma como os scripts normais carregados pela página.

+ +

Ao contrário dos scripts normais, os scripts de conteúdo podem:

+ + + +

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.

+ +

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.

+ +

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.

+ +

Para injetar scripts em páginas com base na URL, use a chave content_scripts no "manifest.json", informando um ou mais scripts e um array com os padrões:

+ +
// manifest.json
+
+"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["my-script.js"]
+  }
+]
+ +

Se a URL da página corresponder aos padrões passados na chave matches, os scripts passados na chave js serão carregados.

+ +

Para injetar os scripts na página via programação (por exemplo, quando o usuário clicar em um botão) use a API tabs:

+ +
// background.js
+
+chrome.tabs.executeScript({
+  file: "my-script.js"
+});
+ +

Aprenda mais sobre scripts de conteúdo lendo sua documentação.

+ +

Ações de navegador

+ +

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.

+ +

Opcionalmente, você pode definir um popup para o botão usando HTML, CSS e JavaScript.

+ +

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.

+ +

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.

+ +

Para aprender mais sobre ações de navegador, consulte a página da API.

+ +

Recursos acessíveis na web

+ +

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.

+ +

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 img que fazem referência às imagens através do atributo src.

+ +

Para entender mais, veja a documentação sobre chaves no manifest.json em recursos acessíveis na web.

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 deleted file mode 100644 index 4eb0dc1b8d..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/api/tema/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -

Permite que extensões do navegador alterem seu tema.

- -

Para usar esta API, uma extensão deve solicitar a permission (permissão) de "tema" em seu arquivo manifest.json.

- -
-

Nota: Quando configuramos um arquivo de plano de fundo, devemos declarar a permission (permissão) de "tema" e, assim sendo, nós não poderemos usar a função theme  (de tema), se esta for incompatível.

-
- -

Tipo

- -
-
{{WebExtAPIRef("theme.Theme")}}
-
Representa o conteúdo de um tema.
-
- -

Funções

- -
-
{{WebExtAPIRef("theme.getCurrent()")}}
-
Obtém o tema atual do navegador.
-
{{WebExtAPIRef("theme.update()")}}
-
Atualiza o tema do navegador.
-
{{WebExtAPIRef("theme.reset()")}}
-
Remove quaisquer atualizações de temas feitas em uma chamada para {{WebExtAPIRef("theme.update()")}}.
-
- -

Evento

- -
-
{{WebExtAPIRef("theme.onUpdated")}}
-
Disparada quando o navegador tiver sido alterado.
-
- -

Compatibilidade

- - - -

{{Compat("webextensions.api.theme")}}

- -

{{WebExtExamples("h2")}}

diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/theme/index.html new file mode 100644 index 0000000000..4eb0dc1b8d --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/theme/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 +--- +
{{AddonSidebar}}
+ +

Permite que extensões do navegador alterem seu tema.

+ +

Para usar esta API, uma extensão deve solicitar a permission (permissão) de "tema" em seu arquivo manifest.json.

+ +
+

Nota: Quando configuramos um arquivo de plano de fundo, devemos declarar a permission (permissão) de "tema" e, assim sendo, nós não poderemos usar a função theme  (de tema), se esta for incompatível.

+
+ +

Tipo

+ +
+
{{WebExtAPIRef("theme.Theme")}}
+
Representa o conteúdo de um tema.
+
+ +

Funções

+ +
+
{{WebExtAPIRef("theme.getCurrent()")}}
+
Obtém o tema atual do navegador.
+
{{WebExtAPIRef("theme.update()")}}
+
Atualiza o tema do navegador.
+
{{WebExtAPIRef("theme.reset()")}}
+
Remove quaisquer atualizações de temas feitas em uma chamada para {{WebExtAPIRef("theme.update()")}}.
+
+ +

Evento

+ +
+
{{WebExtAPIRef("theme.onUpdated")}}
+
Disparada quando o navegador tiver sido alterado.
+
+ +

Compatibilidade

+ + + +

{{Compat("webextensions.api.theme")}}

+ +

{{WebExtExamples("h2")}}

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 deleted file mode 100644 index 16e718fc9c..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/empacotando_e_instalando/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Empacotando e Instalando -slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -

Packaging your extension

- -
-

Nós estamos trabalhando em uma GUI  para empacotar e carregar extensões. Veja Bug 1185460 para mais informações. Enquanto isso, siga as etapas abaixo.

-
- -

Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".

- -

Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.

- -

Windows

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Enviar para → Pasta Compactada.
    4. -
  4. Renomeie o arquivo de "something.zip" para "something.xpi".
    5. -
- -

- -

Mac OS X

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Compress n Items.
    4. -
  4. Renomeie o arquivo de Archive.zip para something.xpi.
    5. -
- -

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-extension/
    2. -
  2. zip -r ../my-extension.xpi *
    3. -
- -

Installing your extension

- -
    -
  1. Digite no caminho de URL about:addons
    2. -
  2. Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."
    3. -
  3. Clique instalar no dialog que irá aparecer
    4. -
- -

Instalando suas extensões no Firefox OS

- -

You can install your extension from WebIDE running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.

- -

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.

- -

The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.

- -

Soluções de problemas

- -

There are a few common problems that you might run into:

- -

"Este add-on não poderá ser instalado porque não pode ser verificado."

- - - -

"Este add-on não pode ser instalado porque pode está corrompido."

- - - -

Nada aconteceu

- - - -

Observe o console

- -

Some additional error information relating to how your extension was extracted and loaded might be available in the Browser Console.

diff --git a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/index.html new file mode 100644 index 0000000000..41312323b4 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permissions/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 +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TipoArray
ObrigatórioNão
Examplo + 
+"permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]
+
+ +

Use a chave permissions 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.

+ +

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.

+ +

A chave pode conter três tipos de permissões:

+ + + +

Permissões de servidor (host)

+ +

Permissões de servidor são espscificadas como match patterns. Cada pattern identifica um grupo de URLs para os quais a extensão solicita privilégios adicionais. Por exemplo, uma permissão de servidor poderia ser "*://developer.mozilla.org/*".

+ +

Os privilégios adicionais incluem:

+ + + +

No Firefox, da versão 56 em diante, extensões recebem automaticamente permissões de servidor para sua própria origem, que é na forma:

+ +
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

onde 60a20a9b-1ad4-af49-9b6c-c64c98c37920 é o ID interno da extensão. A extensão pode obter essa URL programaticamente chamando extension.getURL():

+ +
browser.extension.getURL("");
+// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

Permissões de API

+ +

Permissões de API são especificadas como palavras-chave. Cada palavra-chave nomeia uma API WebExtension que a extensão gostaria de usar.

+ +

As seguintes palavras-chave estão atualmente disponíveis:

+ + + +

Na maioria dos casos, a permissão apenas concede acesso à API, com as seguintes exceções:

+ + + +

Permissão activeTab (aba ativa)

+ +

Esta permissão é especificada como "activeTab". Se uma extensão tem a permissão activeTab, quando o usuário interage com a extensão, a extensão recebe privilégios adicionais somente para a aba ativa.

+ +

"Interação do usuário" inclui:

+ + + +

Os privilégios adicionais são:

+ + + +

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  activeTab não existisse, a extensão precisaria pedir a permissão de servidor <all_urls>. 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.

+ +

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.

+ +

Normalmente, a aba a qual foi concedido activeTab é somente a aba ativa atual, exceto em um caso. A API menus 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 activeTab é 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)}}).

+ +

Acesso à área de transferência

+ +

Existem duas permissões que permitem à extensão interagir com a área de transferência:

+ + + +

Consulte Interação com a área de transferência para saber todos os detalhes sobre isso.

+ +

Armazenamento ilimitado

+ +

A permissão unlimitedStorage:

+ + + +

Examplos

+ +
 "permissions": ["*://developer.mozilla.org/*"]
+ +

Solicita acesso privilegiado a páginas sob developer.mozilla.org.

+ +
  "permissions": ["tabs"]
+ +

Solicita acesso a partes privilegiadas da API tabs.

+ +
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
+ +

Solicita ambas as permissões anteriores.

+ +

Compatibilidade com navegadores

+ + + +

{{Compat("webextensions.manifest.permissions")}}

diff --git "a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" "b/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" deleted file mode 100644 index 41312323b4..0000000000 --- "a/files/pt-br/mozilla/add-ons/webextensions/manifest.json/permiss\303\265es/index.html" +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: permissões -slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissões -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TipoArray
ObrigatórioNão
Examplo - 
-"permissions": [
-  "*://developer.mozilla.org/*",
-  "webRequest"
-]
-
- -

Use a chave permissions 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.

- -

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.

- -

A chave pode conter três tipos de permissões:

- - - -

Permissões de servidor (host)

- -

Permissões de servidor são espscificadas como match patterns. Cada pattern identifica um grupo de URLs para os quais a extensão solicita privilégios adicionais. Por exemplo, uma permissão de servidor poderia ser "*://developer.mozilla.org/*".

- -

Os privilégios adicionais incluem:

- - - -

No Firefox, da versão 56 em diante, extensões recebem automaticamente permissões de servidor para sua própria origem, que é na forma:

- -
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
- -

onde 60a20a9b-1ad4-af49-9b6c-c64c98c37920 é o ID interno da extensão. A extensão pode obter essa URL programaticamente chamando extension.getURL():

- -
browser.extension.getURL("");
-// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
- -

Permissões de API

- -

Permissões de API são especificadas como palavras-chave. Cada palavra-chave nomeia uma API WebExtension que a extensão gostaria de usar.

- -

As seguintes palavras-chave estão atualmente disponíveis:

- - - -

Na maioria dos casos, a permissão apenas concede acesso à API, com as seguintes exceções:

- - - -

Permissão activeTab (aba ativa)

- -

Esta permissão é especificada como "activeTab". Se uma extensão tem a permissão activeTab, quando o usuário interage com a extensão, a extensão recebe privilégios adicionais somente para a aba ativa.

- -

"Interação do usuário" inclui:

- - - -

Os privilégios adicionais são:

- - - -

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  activeTab não existisse, a extensão precisaria pedir a permissão de servidor <all_urls>. 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.

- -

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.

- -

Normalmente, a aba a qual foi concedido activeTab é somente a aba ativa atual, exceto em um caso. A API menus 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 activeTab é 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)}}).

- -

Acesso à área de transferência

- -

Existem duas permissões que permitem à extensão interagir com a área de transferência:

- - - -

Consulte Interação com a área de transferência para saber todos os detalhes sobre isso.

- -

Armazenamento ilimitado

- -

A permissão unlimitedStorage:

- - - -

Examplos

- -
 "permissions": ["*://developer.mozilla.org/*"]
- -

Solicita acesso privilegiado a páginas sob developer.mozilla.org.

- -
  "permissions": ["tabs"]
- -

Solicita acesso a partes privilegiadas da API tabs.

- -
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
- -

Solicita ambas as permissões anteriores.

- -

Compatibilidade com navegadores

- - - -

{{Compat("webextensions.manifest.permissions")}}

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 deleted file mode 100644 index 7050516e82..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/o_que_vem_a_seguir_/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: O que vem a seguir ? -slug: Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ -translation_of: Mozilla/Add-ons/WebExtensions/What_next_ ---- -
{{AddonSidebar}}
- -

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.

- -

Teu ambiente de desenvolvimento

- -

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.

- -

Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para o processo de revisão AMO. 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.

- -

Aprenda mais acerca de ferramentas de construção

- -

Third-party libraries

- -

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 AMO review process, 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.

- -

Learn more about submitting source code

- -

The Firefox Add-on Distribution Agreement

- -

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.

- -

Read the agreement

- -

Learn more about signing

- -

The review process

- -

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.

- -

Check out the review policy and guidelines

- - - -

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.

- -

Learn more about getting your add-ons featured

- -

Continue your learning experience

- -

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:

- - 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 deleted file mode 100644 index 1e49d92e3c..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/passo-a-passo/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -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 ---- -

Neste artigo iremos criar uma Extensão para Firefox do início ao fim.

- -

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.

- -

Para implementar esse extensão, será necessário:

- - - -

Você pode visualizar toda a estrutura da extensão da seguinte forma:

- -

- -

É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:

- - - -

Você pode encontrar o código completo da extensão no GitHub.

- -

Para criar essa extensão você precisará do Firefox 45 ou mais recente.

- -

Escrevendo a WebExtension

- -

Crie um novo diretório e navegue até ele:

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:

- -
{
-
-  "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"
-  ]
-
-}
-
- - - -

Perceba que todos os caminhos são relativos ao manifest.json.

- -

O Botão na barra de ferramentas

- -

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".

- -

Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos exemplo, que é retirado do  Aha-Soft’s Free Retina iconset e usado sob os termos de sua licença.

- -

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.

- -

O popup

- -

A função do popup é ativar a escolha do usuário para um dos três animais.

- -

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 :

- - - -

choose_beast.html

- -

O arquivo HTML criado é este:

- -
<!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>
- -

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.

- -

choose_beast.css

- -

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:

- -
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;
-}
- -

choose_beast.js

- -

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:

- -
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});
-  });
-
-});
-
- -

É usado três funções da API WebExtension:

- - - -

O content script

- -

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:

- -
// 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");
-  }
-}
-
-
- -

O content script  adiciona um listener da mensagem para a extensão (especificamente , para "choose_beast.js"). No listener:

- - - -

Os animais

- -

Finalmente, nós precisamos incluir as imagens dos animais.

- -

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 GitHub, ou aqui:

- -

- -

Empacotando e instalando

- -

Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:

- -
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
- -

Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".

- -

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:

- -
   # in beastify/
-   zip -r ../beastify.xpi *
- - - -

Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI

- -

Para instalar o XPI, você apenas irá abrir o Firefox:

- - - -

Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.

- -

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.

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 deleted file mode 100644 index 4e7e854644..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/pre-requisitos/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Pré-requisitos -slug: Mozilla/Add-ons/WebExtensions/pre-requisitos -translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites ---- -

Para desenvolver utilizando as APIs de uma WebExtension, você precisa de uma configuração mínima.

- - - -
 
- -
 
- -
 
diff --git a/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html b/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..4e7e854644 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,23 @@ +--- +title: Pré-requisitos +slug: Mozilla/Add-ons/WebExtensions/pre-requisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

Para desenvolver utilizando as APIs de uma WebExtension, você precisa de uma configuração mínima.

+ + + +
 
+ +
 
+ +
 
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 deleted file mode 100644 index 9d3045e28a..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/sua_primeira_webextension/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Sua primeira extensão -slug: Mozilla/Add-ons/WebExtensions/sua_primeira_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox. A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios.

- -

O código fonte para este exemplo está no GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Para começar, você precisará do Firefox versão 45 ou posterior.

- -

Construindo a Extensão

- -

Crie uma nova pasta dando o nome de "borderify" e navegue para dentro dela.

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e coloque o seguinte conteúdo no arquivo:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Adiciona uma borda vermelha a todas as páginas da Web correspondentes a mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

A chave mais interessante aqui é content_scripts, que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico. 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.

- - - -
-

Em algumas situações, você precisa especificar uma ID para sua extensão. Se você precisar especificar um ID de extensão, inclua a chave applications no manifest.json e configure sua propriedade id:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

A extensão deve ter um ícone. Ele será mostrado ao lado da listagem de extensões no Gerenciador de Extensões. Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".

- -

Crie o diretório "icons" diretamente sob o diretório "borderify". Salve um ícone chamado "border-48.png". Você pode usar o icone do nosso exemplo, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença Creative Commons Attribution-ShareAlike.

- -

Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e 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:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Como alternativa, você pode criar um ícone em formato SVG  e ele será dimensionado corretamente.

- - - -

borderify.js

- -

Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte conteúdo:

- -
document.body.style.border = "5px solid red";
- -

Este script será carregado nas páginas que correspondem ao padrão especificado na chave content_scripts do manifest.json. O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.

- - - -

Testando

- -

Primeiro, verifique se você está com os arquivos corretos nos lugares certos:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Instalando

- -

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 "borderify.js".

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.
-
- Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta web-ext.

- -

Testando

- -

Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Não tente acessar addons.mozilla.org! Os scripts de conteúdo são bloqueados nesse domínio.

-
- -

Experimente um pouco. Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página. Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging. Você poderá ver as mudanças imediatamente:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Empacotando e publicando

- -

Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura. Para saber mais sobre isso, consulte "Publicando sua Extensão".

- -

Próximos passos

- -

Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:

- - diff --git a/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..cf8e2d7198 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/user_interface/context_menu_items/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 +--- +
{{AddonSidebar}}
+ +
+

Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.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 browser.menus.

+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

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")}}.

+ +

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 "Open bookmark in Container Tab" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:

+ +

+ +

Especificando itens do menu de contexto

+ +

Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão contextMenus em seu manifest.json para poder tomar vantagem desta API.

+ +
"permissions": ["contextMenus"]
+ +

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:

+ +
browser.contextMenus.create({
+  id: "log-selection",
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+ +

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.

+ +
browser.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    ...
+  }
+})
+ +

Ícones

+ +

Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja Iconography na documentação Photon Design System.

+ +

Exemplos

+ +

O repositório webextensions-examples no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:

+ + +
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 deleted file mode 100644 index cf8e2d7198..0000000000 --- a/files/pt-br/mozilla/add-ons/webextensions/user_interface/itens_do_menu_de_contexto/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -
-

Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.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 browser.menus.

- -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

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")}}.

- -

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 "Open bookmark in Container Tab" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:

- -

- -

Especificando itens do menu de contexto

- -

Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão contextMenus em seu manifest.json para poder tomar vantagem desta API.

- -
"permissions": ["contextMenus"]
- -

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:

- -
browser.contextMenus.create({
-  id: "log-selection",
-  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
-  contexts: ["selection"]
-}, onCreated);
- -

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.

- -
browser.contextMenus.onClicked.addListener(function(info, tab) {
-  switch (info.menuItemId) {
-    case "log-selection":
-      console.log(info.selectionText);
-      break;
-    ...
-  }
-})
- -

Ícones

- -

Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja Iconography na documentação Photon Design System.

- -

Exemplos

- -

O repositório webextensions-examples no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:

- - -
diff --git a/files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html b/files/pt-br/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..7050516e82 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/what_next_/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_ +--- +
{{AddonSidebar}}
+ +

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.

+ +

Teu ambiente de desenvolvimento

+ +

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.

+ +

Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para o processo de revisão AMO. 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.

+ +

Aprenda mais acerca de ferramentas de construção

+ +

Third-party libraries

+ +

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 AMO review process, 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.

+ +

Learn more about submitting source code

+ +

The Firefox Add-on Distribution Agreement

+ +

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.

+ +

Read the agreement

+ +

Learn more about signing

+ +

The review process

+ +

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.

+ +

Check out the review policy and guidelines

+ + + +

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.

+ +

Learn more about getting your add-ons featured

+ +

Continue your learning experience

+ +

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:

+ + diff --git a/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..9d3045e28a --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/your_first_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 +--- +
{{AddonSidebar}}
+ +

Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox. A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios.

+ +

O código fonte para este exemplo está no GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Para começar, você precisará do Firefox versão 45 ou posterior.

+ +

Construindo a Extensão

+ +

Crie uma nova pasta dando o nome de "borderify" e navegue para dentro dela.

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e coloque o seguinte conteúdo no arquivo:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adiciona uma borda vermelha a todas as páginas da Web correspondentes a mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

A chave mais interessante aqui é content_scripts, que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico. 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.

+ + + +
+

Em algumas situações, você precisa especificar uma ID para sua extensão. Se você precisar especificar um ID de extensão, inclua a chave applications no manifest.json e configure sua propriedade id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

A extensão deve ter um ícone. Ele será mostrado ao lado da listagem de extensões no Gerenciador de Extensões. Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".

+ +

Crie o diretório "icons" diretamente sob o diretório "borderify". Salve um ícone chamado "border-48.png". Você pode usar o icone do nosso exemplo, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença Creative Commons Attribution-ShareAlike.

+ +

Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e 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:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Como alternativa, você pode criar um ícone em formato SVG  e ele será dimensionado corretamente.

+ + + +

borderify.js

+ +

Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte conteúdo:

+ +
document.body.style.border = "5px solid red";
+ +

Este script será carregado nas páginas que correspondem ao padrão especificado na chave content_scripts do manifest.json. O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.

+ + + +

Testando

+ +

Primeiro, verifique se você está com os arquivos corretos nos lugares certos:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalando

+ +

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 "borderify.js".

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.
+
+ Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta web-ext.

+ +

Testando

+ +

Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Não tente acessar addons.mozilla.org! Os scripts de conteúdo são bloqueados nesse domínio.

+
+ +

Experimente um pouco. Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página. Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging. Você poderá ver as mudanças imediatamente:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Empacotando e publicando

+ +

Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura. Para saber mais sobre isso, consulte "Publicando sua Extensão".

+ +

Próximos passos

+ +

Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:

+ + diff --git a/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..1e49d92e3c --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/your_second_webextension/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 +--- +

Neste artigo iremos criar uma Extensão para Firefox do início ao fim.

+ +

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.

+ +

Para implementar esse extensão, será necessário:

+ + + +

Você pode visualizar toda a estrutura da extensão da seguinte forma:

+ +

+ +

É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:

+ + + +

Você pode encontrar o código completo da extensão no GitHub.

+ +

Para criar essa extensão você precisará do Firefox 45 ou mais recente.

+ +

Escrevendo a WebExtension

+ +

Crie um novo diretório e navegue até ele:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:

+ +
{
+
+  "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"
+  ]
+
+}
+
+ + + +

Perceba que todos os caminhos são relativos ao manifest.json.

+ +

O Botão na barra de ferramentas

+ +

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".

+ +

Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos exemplo, que é retirado do  Aha-Soft’s Free Retina iconset e usado sob os termos de sua licença.

+ +

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.

+ +

O popup

+ +

A função do popup é ativar a escolha do usuário para um dos três animais.

+ +

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 :

+ + + +

choose_beast.html

+ +

O arquivo HTML criado é este:

+ +
<!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>
+ +

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.

+ +

choose_beast.css

+ +

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:

+ +
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;
+}
+ +

choose_beast.js

+ +

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:

+ +
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});
+  });
+
+});
+
+ +

É usado três funções da API WebExtension:

+ + + +

O content script

+ +

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:

+ +
// 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");
+  }
+}
+
+
+ +

O content script  adiciona um listener da mensagem para a extensão (especificamente , para "choose_beast.js"). No listener:

+ + + +

Os animais

+ +

Finalmente, nós precisamos incluir as imagens dos animais.

+ +

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 GitHub, ou aqui:

+ +

+ +

Empacotando e instalando

+ +

Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:

+ +
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
+ +

Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".

+ +

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:

+ +
   # in beastify/
+   zip -r ../beastify.xpi *
+ + + +

Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI

+ +

Para instalar o XPI, você apenas irá abrir o Firefox:

+ + + +

Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.

+ +

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.

diff --git a/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html b/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html deleted file mode 100644 index 7d56685269..0000000000 --- a/files/pt-br/mozilla/developer_guide/codigo_fonte/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Trabalhando com o código-fonte Mozilla -slug: Mozilla/Developer_guide/Codigo_Fonte -translation_of: Mozilla/Developer_guide/Source_Code ---- -

Os artigos abaixo vão ajuda-lo a obter o código-fonte Mozilla, aprender a navegar pelo código e como ter as suas modificações aceitas para inclusão no repositório principal.

- - - - - - - - - - -
-

Tópicos da documentação

-
-
-
- Obtendo o código do repositório Mercurial
-
- Se você planeja contribuir com o projeto Mozilla, a melhor forma de obter o código-fonte é fazendo checkout do repositório versionado. Aprenda aqui como fazê-lo.
-
- Baixando o código usando HTTP ou FTP
-
- Se você quer obter o código de uma versão específica ou de um produto Mozilla em particular, você pode optar por baixar um pacote de código-fonte.
-
- Vendo e buscando pelo código-fonte Mozilla online
-
- Aprenda a usar a MXR, a ferramenta Mozilla de busca e navegação para acessar o código-fonte. Esta não é uma boa forma de baixar o código, mas é uma ótima maneira de fazer buscas nele.
-
- Navegando no código-fonte Mozilla
-
- Aprenda a respeito das várias pastas na árvore de código-fonte da Mozilla e como encontrar o que você está procurando.
-
- Bugs para novatos
-
- Se você é novo no projeto e quer algo para trabalhar, olhe aqui.
-
- 		-
-
- Guia de estilo do código Mozilla
-
- O guia de estilo do código provê informações sobre como você deve formatar o seu código-fonte para garantir que você não sofra bullying dos revisadores.
-
- Guia de desenvolvimento de interfaces
-
- Diretrizes e documentação sobre como criar e atualizar interfaces XPCOM.
-
- Servidores de teste
-
- Os produtos Mozilla são compilados em pelo menos três plataformas. Se você não tem acesso a todas elas, você pode usar os servidores de teste para testar seus patches e ter certeza que eles passam nos testes.
-
- Criando um patch
-
- Após fazer mudanças no código Mozilla, o próximo passo (depois de ter certeza que ele funciona) é criar um patch e envia-lo para revisão. Esse artigo precisa ser completamente atualizado para o Mercurial.
-
- Obtendo acesso para fazer commit no código-fonte
-
- Sentindo-se preparado para untar-se aos poucos e orgulhosos committers? Descubra como obter acesso para gravação no código Mozilla.
-
- Obtendo o código Mozilla antigo usando CVS
-
- Versões antigas do código-fonte Mozilla, assim como as versões atuais do NSS e NSPR, são mantidas num repositório CVS. Aprenda sobre isso nesse artigo.
-
-
-

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code" } ) }}

diff --git a/files/pt-br/mozilla/developer_guide/source_code/index.html b/files/pt-br/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..7d56685269 --- /dev/null +++ b/files/pt-br/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,70 @@ +--- +title: Trabalhando com o código-fonte Mozilla +slug: Mozilla/Developer_guide/Codigo_Fonte +translation_of: Mozilla/Developer_guide/Source_Code +--- +

Os artigos abaixo vão ajuda-lo a obter o código-fonte Mozilla, aprender a navegar pelo código e como ter as suas modificações aceitas para inclusão no repositório principal.

+ + + + + + + + + + +
+

Tópicos da documentação

+
+
+
+ Obtendo o código do repositório Mercurial
+
+ Se você planeja contribuir com o projeto Mozilla, a melhor forma de obter o código-fonte é fazendo checkout do repositório versionado. Aprenda aqui como fazê-lo.
+
+ Baixando o código usando HTTP ou FTP
+
+ Se você quer obter o código de uma versão específica ou de um produto Mozilla em particular, você pode optar por baixar um pacote de código-fonte.
+
+ Vendo e buscando pelo código-fonte Mozilla online
+
+ Aprenda a usar a MXR, a ferramenta Mozilla de busca e navegação para acessar o código-fonte. Esta não é uma boa forma de baixar o código, mas é uma ótima maneira de fazer buscas nele.
+
+ Navegando no código-fonte Mozilla
+
+ Aprenda a respeito das várias pastas na árvore de código-fonte da Mozilla e como encontrar o que você está procurando.
+
+ Bugs para novatos
+
+ Se você é novo no projeto e quer algo para trabalhar, olhe aqui.
+
+ 		+
+
+ Guia de estilo do código Mozilla
+
+ O guia de estilo do código provê informações sobre como você deve formatar o seu código-fonte para garantir que você não sofra bullying dos revisadores.
+
+ Guia de desenvolvimento de interfaces
+
+ Diretrizes e documentação sobre como criar e atualizar interfaces XPCOM.
+
+ Servidores de teste
+
+ Os produtos Mozilla são compilados em pelo menos três plataformas. Se você não tem acesso a todas elas, você pode usar os servidores de teste para testar seus patches e ter certeza que eles passam nos testes.
+
+ Criando um patch
+
+ Após fazer mudanças no código Mozilla, o próximo passo (depois de ter certeza que ele funciona) é criar um patch e envia-lo para revisão. Esse artigo precisa ser completamente atualizado para o Mercurial.
+
+ Obtendo acesso para fazer commit no código-fonte
+
+ Sentindo-se preparado para untar-se aos poucos e orgulhosos committers? Descubra como obter acesso para gravação no código Mozilla.
+
+ Obtendo o código Mozilla antigo usando CVS
+
+ Versões antigas do código-fonte Mozilla, assim como as versões atuais do NSS e NSPR, são mantidas num repositório CVS. Aprenda sobre isso nesse artigo.
+
+
+

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code" } ) }}

diff --git a/files/pt-br/mozilla/firefox/experimental_features/index.html b/files/pt-br/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..12a4aa7c23 --- /dev/null +++ b/files/pt-br/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,469 @@ +--- +title: Novas funcionalidades no Firefox +slug: Mozilla/Firefox/Novas_funcionalidades +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}

Em ordem para testar as novas funcionalidades, a Mozilla publica uma versão de testes do navegador Firefox, Firefox Nightly, diariamente. Funcionalidades experimentais, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

+ +

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition.

+ +

CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Grid Layout4040DisabledDisabledlayout.css.grid.enabled
SubgridsDisabledDisabledDisabledDisabledlayout.css.grid-template-subgrid-value.enabled
Logical values for clear and float CSS properties
+ The values {{cssxref("clear")}}: inline-start and clear: inline-end as well as {{cssxref("float")}}: inline-start and float: inline-end are making easier to create layouts that are agnostic to the text directionality.		4545DisabledDisabledlayout.css.float-logical-values.enabled
Display stray control characters in CSS as hex boxes
+ This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.		4343DisabledDisabledlayout.css.control-characters.enabled
The transform-box property
+ Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.		4141DisabledDisabledsvg.transform-box.enabled
Basic shapes in clip-path
+ Adds the functions circle(), ellipse(), and polygon() to the set of possible values for {{cssxref("clip-path")}}.		Enabled
+ (available since 47, enabled by default since 53)		Enabled
+ (available since 47, enabled by default since 53)		Disabled
+ (available since 47)		Disabled
+ (available since 47)		layout.css.clip-path-shapes.enabled
The font-display descriptor for @font-face
+ To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		layout.css.font-display.enabled
Longhand properties of CSS Masks
+ The longhand properties of CSS Masks are only available behind a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).		---------------
The touch-action CSS property
+ The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification, and lets the CSS specify how and in what way the user is able to manipulate an object by touch.		50---------layout.css.touch_action.enabled
+ +

JavaScript

+ +

See also ECMAScript Next support for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Exponentiation operator42Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}None
Additions to the ArrayBuffer object
+ Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new ArrayBuffer whose contents have been taken from the oldBuffer's data (spec).		36DisabledDisabledDisabledNone
TypedObject objects (spec)EnabledDisabledDisabledDisabledNone
SIMD (specification and polyfill)EnabledDisabledDisabledDisabledNone
Shared Memory objects
+ {{jsxref("SharedArrayBuffer")}}
+ {{jsxref("Atomics")}}		Enabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		Disabled
+ (available since 46)		javascript.options.shared_memory
+ +

APIs

+ +

Canvas & WebGL

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebGL 2
+ The {{domxref("WebGL2RenderingContext")}} interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.		46
+ (implemented with disabled pref before 46)		Enabled in 51Enabled in 51Enabled in 51webgl.enable-webgl2
WEBGL_debug_renderer_info extension
+ The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.		4242DisabledDisabledwebgl.enable-debug-renderer-info
OffscreenCanvas
+ The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.		Disabled
+ (available since 44)		Disabled
+ (available since 44)		Disabled
+ (available since 44)		Disabled
+ (available since 44)		gfx.offscreencanvas.enabled
Hit regions
+ Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.		Disabled
+ (available since 30)		Disabled
+ (available since 30)		Disabled
+ (available since 30)		Disabled
+ (available since 30)		canvas.hitregions.enabled
+ +

 DOM

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebVR API
+ The WebVR API allows to control and use virtual reality devices.		46
+ A major update of the interface happened in version 51.		46
+ A major update of the interface happened in version 51.		DisabledDisableddom.vr.enabled
FlyWeb
+ FlyWeb is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.		51DisabledDisabledDisableddom.flyweb.enabled
HTMLMediaElement.seekToNextFrame()
+ Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.		49
+ (Fundamental update in version 50)		49
+ (Fundamental update in version 50)		DisabledDisabledmedia.seekToNextFrame.enabled
GeometryUtils.getBoxQuads() ({{bug(917755)}})3131DisabledDisabledlayout.css.getBoxQuads.enabled
GeometryUtils.convertPointFromNode(),
+ GeometryUtils.RectFromNode(), and
+ GeometryUtils.convertQuadFromNode()
+ ({{bug(918189)}})		3131DisabledDisabledlayout.css.convertFromNode.enabled
Node.rootNode
+ The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.
+ This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.		4848DisabledDisableddom.node.rootNode.enabled
Performance Observer API
+ The {{domxref("PerformanceObserver")}} interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.		49DisabledDisabledDisableddom.enable_performance_observer
WebVTT Regions API
+ WebVTT regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.
+ This interface is considered to be in flux and isn't therefore activated in any version by default.		Disabled
+ (Experimental implementation since version 30)		DisabledDisabledDisabledmedia.webvtt.regions.enabled
Support for audio and video tracks
+ Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.
+ Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.		Disabled
+ (Experimental implementation since version 33)		DisabledDisabledDisabledmedia.track.enabled
Better value for Event.timestamp
+ The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.		32 (Windows)
+ 43 (Linux)		32 (Windows)
+ 43 (Linux)		DisabledDisabledmedia.track.enabled
Pointer Events50DisabledDisabledDisableddom.w3c_pointer_events.enabled
MediaDevices.ondevicechange and the devicechange event
+ The {{domxref("MediaDevices.ondevicechange")}} event handler and corresponding {{event("devicechange")}} event make it possible to detect and react when audio and video devices are attached to or removed from the computer.		 +

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		+

Disabled
+ 51 (Mac)

+ +

Enabled
+ 52 (Mac)
+ 52 (Windows)
+ 52 (Linux)

+ 		media.ondevicechange.enabled
+ +

Developer Tools

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Debugger rewrite in HTML52525252devtools.debugger.new-debugger-frontend
Console rewrite in HTML52DisabledDisabledDisableddevtools.webconsole.new-frontend-enabled
Responsive Design Mode rewrite in HTML
+ A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.		52525252devtools.responsive.html.enabled
Experimental Performance tool options
+ Enables options in the UI for JIT optimizations, memory, etc.		41DisabledDisabledDisableddevtools.performance.ui.experimental
+ +

See also

+ + diff --git a/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html b/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html deleted file mode 100644 index 12a4aa7c23..0000000000 --- a/files/pt-br/mozilla/firefox/novas_funcionalidades/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Novas funcionalidades no Firefox -slug: Mozilla/Firefox/Novas_funcionalidades -translation_of: Mozilla/Firefox/Experimental_features ---- -
{{FirefoxSidebar}}

Em ordem para testar as novas funcionalidades, a Mozilla publica uma versão de testes do navegador Firefox, Firefox Nightly, diariamente. Funcionalidades experimentais, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

- -

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition.

- -

CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Grid Layout4040DisabledDisabledlayout.css.grid.enabled
SubgridsDisabledDisabledDisabledDisabledlayout.css.grid-template-subgrid-value.enabled
Logical values for clear and float CSS properties
- The values {{cssxref("clear")}}: inline-start and clear: inline-end as well as {{cssxref("float")}}: inline-start and float: inline-end are making easier to create layouts that are agnostic to the text directionality.		4545DisabledDisabledlayout.css.float-logical-values.enabled
Display stray control characters in CSS as hex boxes
- This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.		4343DisabledDisabledlayout.css.control-characters.enabled
The transform-box property
- Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.		4141DisabledDisabledsvg.transform-box.enabled
Basic shapes in clip-path
- Adds the functions circle(), ellipse(), and polygon() to the set of possible values for {{cssxref("clip-path")}}.		Enabled
- (available since 47, enabled by default since 53)		Enabled
- (available since 47, enabled by default since 53)		Disabled
- (available since 47)		Disabled
- (available since 47)		layout.css.clip-path-shapes.enabled
The font-display descriptor for @font-face
- To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		layout.css.font-display.enabled
Longhand properties of CSS Masks
- The longhand properties of CSS Masks are only available behind a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).		---------------
The touch-action CSS property
- The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification, and lets the CSS specify how and in what way the user is able to manipulate an object by touch.		50---------layout.css.touch_action.enabled
- -

JavaScript

- -

See also ECMAScript Next support for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Exponentiation operator42Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}Will ship in version 52, see {{bug(1291212)}}None
Additions to the ArrayBuffer object
- Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new ArrayBuffer whose contents have been taken from the oldBuffer's data (spec).		36DisabledDisabledDisabledNone
TypedObject objects (spec)EnabledDisabledDisabledDisabledNone
SIMD (specification and polyfill)EnabledDisabledDisabledDisabledNone
Shared Memory objects
- {{jsxref("SharedArrayBuffer")}}
- {{jsxref("Atomics")}}		Enabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		Disabled
- (available since 46)		javascript.options.shared_memory
- -

APIs

- -

Canvas & WebGL

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebGL 2
- The {{domxref("WebGL2RenderingContext")}} interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.		46
- (implemented with disabled pref before 46)		Enabled in 51Enabled in 51Enabled in 51webgl.enable-webgl2
WEBGL_debug_renderer_info extension
- The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.		4242DisabledDisabledwebgl.enable-debug-renderer-info
OffscreenCanvas
- The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.		Disabled
- (available since 44)		Disabled
- (available since 44)		Disabled
- (available since 44)		Disabled
- (available since 44)		gfx.offscreencanvas.enabled
Hit regions
- Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.		Disabled
- (available since 30)		Disabled
- (available since 30)		Disabled
- (available since 30)		Disabled
- (available since 30)		canvas.hitregions.enabled
- -

 DOM

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WebVR API
- The WebVR API allows to control and use virtual reality devices.		46
- A major update of the interface happened in version 51.		46
- A major update of the interface happened in version 51.		DisabledDisableddom.vr.enabled
FlyWeb
- FlyWeb is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.		51DisabledDisabledDisableddom.flyweb.enabled
HTMLMediaElement.seekToNextFrame()
- Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.		49
- (Fundamental update in version 50)		49
- (Fundamental update in version 50)		DisabledDisabledmedia.seekToNextFrame.enabled
GeometryUtils.getBoxQuads() ({{bug(917755)}})3131DisabledDisabledlayout.css.getBoxQuads.enabled
GeometryUtils.convertPointFromNode(),
- GeometryUtils.RectFromNode(), and
- GeometryUtils.convertQuadFromNode()
- ({{bug(918189)}})		3131DisabledDisabledlayout.css.convertFromNode.enabled
Node.rootNode
- The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.
- This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.		4848DisabledDisableddom.node.rootNode.enabled
Performance Observer API
- The {{domxref("PerformanceObserver")}} interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.		49DisabledDisabledDisableddom.enable_performance_observer
WebVTT Regions API
- WebVTT regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.
- This interface is considered to be in flux and isn't therefore activated in any version by default.		Disabled
- (Experimental implementation since version 30)		DisabledDisabledDisabledmedia.webvtt.regions.enabled
Support for audio and video tracks
- Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.
- Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.		Disabled
- (Experimental implementation since version 33)		DisabledDisabledDisabledmedia.track.enabled
Better value for Event.timestamp
- The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.		32 (Windows)
- 43 (Linux)		32 (Windows)
- 43 (Linux)		DisabledDisabledmedia.track.enabled
Pointer Events50DisabledDisabledDisableddom.w3c_pointer_events.enabled
MediaDevices.ondevicechange and the devicechange event
- The {{domxref("MediaDevices.ondevicechange")}} event handler and corresponding {{event("devicechange")}} event make it possible to detect and react when audio and video devices are attached to or removed from the computer.		 -

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		-

Disabled
- 51 (Mac)

- -

Enabled
- 52 (Mac)
- 52 (Windows)
- 52 (Linux)

- 		media.ondevicechange.enabled
- -

Developer Tools

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Debugger rewrite in HTML52525252devtools.debugger.new-debugger-frontend
Console rewrite in HTML52DisabledDisabledDisableddevtools.webconsole.new-frontend-enabled
Responsive Design Mode rewrite in HTML
- A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.		52525252devtools.responsive.html.enabled
Experimental Performance tool options
- Enables options in the UI for JIT optimizations, memory, etc.		41DisabledDisabledDisableddevtools.performance.ui.experimental
- -

See also

- - diff --git a/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..1a22edfb92 --- /dev/null +++ b/files/pt-br/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,45 @@ +--- +title: Zoom de página inteira +slug: Mozilla/Firefox/Releases/3/Zoom_de_página_inteira +tags: + - Extensões + - Firefox 3 + - XUL +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +
{{FirefoxSidebar}}
+ +

{{ Gecko_minversion_header("1.9") }}

+ +

Zoom de página inteira (ou apenas fullzoom) é um novo recurso do Firefox 3.

+ +

Exemplo (XUL:browser)

+ +

O exemplo a seguir demonstra o uso da janela atual do navegador. Esse é o uso típico de uma extensão do Firefox.

+ +
var zoom = ZoomManager.getZoomForBrowser(gBrowser.selectedBrowser);
+ZoomManager.enlarge();
+ZoomManager.setZoomForBrowser(gBrowser.selectedBrowser, ZoomManager.MIN);
+
+ +

Exemplo (XUL:iframe)

+ +

Nota: Isso provavelmente está desatualizado.

+ +

Você pode usar o recurso fullZoom para um XUL:iframe também. No entanto, como um iframe não tem uma propriedade  markupDocumentViewer, precisamos obtê-la primeiro:

+ +
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+ +

References

+ + diff --git "a/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" "b/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" deleted file mode 100644 index 1a22edfb92..0000000000 --- "a/files/pt-br/mozilla/firefox/releases/3/zoom_de_p\303\241gina_inteira/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Zoom de página inteira -slug: Mozilla/Firefox/Releases/3/Zoom_de_página_inteira -tags: - - Extensões - - Firefox 3 - - XUL -translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom ---- -
{{FirefoxSidebar}}
- -

{{ Gecko_minversion_header("1.9") }}

- -

Zoom de página inteira (ou apenas fullzoom) é um novo recurso do Firefox 3.

- -

Exemplo (XUL:browser)

- -

O exemplo a seguir demonstra o uso da janela atual do navegador. Esse é o uso típico de uma extensão do Firefox.

- -
var zoom = ZoomManager.getZoomForBrowser(gBrowser.selectedBrowser);
-ZoomManager.enlarge();
-ZoomManager.setZoomForBrowser(gBrowser.selectedBrowser, ZoomManager.MIN);
-
- -

Exemplo (XUL:iframe)

- -

Nota: Isso provavelmente está desatualizado.

- -

Você pode usar o recurso fullZoom para um XUL:iframe também. No entanto, como um iframe não tem uma propriedade  markupDocumentViewer, precisamos obtê-la primeiro:

- -
var zoom = 1.5;
-var iframe = document.getElementById("authorFrame");
-var contViewer = iframe.docShell.contentViewer;
-var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
-docViewer.fullZoom = zoom;
-
- -

References

- - -- cgit v1.2.3-54-g00ecf