initial commit

19 files changed, 2684 insertions, 0 deletions

diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/abra_uma_página_web/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/abra_uma_página_web/index.html
new file mode 100644
index 0000000000..defcedcee2
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/abra_uma_página_web/index.html
@@ -0,0 +1,51 @@
+---
+title: Abra uma Página Web
+slug: Mozilla/Add-ons/SDK/Tutorials/Abra_uma_Página_Web
+tags:
+  - Add-on SDK
+  - Tab
+  - runScript
+  - tab.attach
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page
+---
+<div class="note">Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado o SDK</a> e ter conhecimento básico <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">sobre cfx</a>.</div>
+
+<p>Para abrir uma página web, você pode usar o módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open("http://www.example.com");
+</pre>
+
+<p>Esta função é <span class="short_text" id="result_box" lang="pt"><span class="hps">assíncrona</span></span>, então você não recebe imediatamente um objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>tab</code></a> que você possa examinar. Faça isto, passe uma função de retorno para <code>open()</code>. A função de retorno é atribuída a propriedade <code>onReady</code>, e será passada a tab como argumento:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: function onReady(tab) {
+    console.log(tab.title);
+  }
+});
+</pre>
+
+<p>Mesmo assim, você não consegue acesso direto a qualquer conteúdo hospedado na tab.</p>
+
+<p>Para acessar conteúdo da tab você precisa anexar um script à tab usando o <code>tab.attach()</code>. Este add-on carrega uma página, então anexa um script à página que adiciona uma borda vermelha nela:</p>
+
+<pre class="brush: js">var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: runScript
+});
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+
+<p>Para aprender mais sobre uso de tabs no SDK, veja a referência da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p>
+
+<p>Para aprender mais sobre execução de scripts em tabs, veja o tutorial sobre uso de <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab"><code>tab.attach()</code></a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
new file mode 100644
index 0000000000..83b2f61907
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
@@ -0,0 +1,83 @@
+---
+title: Adicionando um botão à barra de ferramentas
+slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+---
+<div class="note">
+<p>Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado o SDK</a> e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico do cfx</a>.</p>
+
+<p>Este tutorial usa a API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que está disponível somente do Firefox 29 em diante.</p>
+</div>
+
+<p>Para adicionar um botão à barra de ferramentas, use os módulos <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> ou <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p>
+
+<p>Crie um novo diretório, navegue até ele, e execute <code>cfx init</code>.</p>
+
+<p>Então salve estes três ícones no diretório "data":</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Então abra o arquivo chamado "main.js" no diretório "lib" e adicione o seguinte código a ele:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}</pre>
+
+<p>Agora execute o add-on com <code>cfx run</code>. O botão é adicionado à barra de ferramentas no topo da janela do navegador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7641/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Você não pode configurar a localização inicial para o botão, mas o usuário pode mover ele usando as características de personalização do navegador. O <code>id</code> é obrigatório, e é usado para lembrar a posição do botão, então você não deve mudá-lo em versões subsequentes do add-on.</p>
+
+<p>Clicando no botão carrega <a href="https://www.mozilla.org/en-US/">https://www.mozilla.org/</a> em uma nova tab.</p>
+
+<h2 id="Especificando_o_ícone">Especificando o ícone</h2>
+
+<p>A propriedade ícone pode especificar um único ícone ou uma coleção de ícones em diferentes tamanhos, como o exemplo acima. Se você especificar uma coleção de ícones em diferentes tamanhos o navegador automaticamente escolherá o melhor para a resolução de tela em uso e coloca na interface de usuário do navegador que hospeda o botão. <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)">Leia mais sobre especificar múltiplos ícones</a>.</p>
+
+<p>O arquivo de ícone deve ser empacotado com seu add-on: ele não pode referenciar um arquivo remoto.</p>
+
+<p>Você pode mudar o ícone a qualquer hora configurando a propriedade <code>icon</code> do botão. Você pode mudar o ícone, e os outros atributos de estado, ou globalmente, para uma janela específica, ou para uma tab específica. <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Updating_state">Leia mais sobre atualização de estado.</a></p>
+
+<h2 id="Anexando_um_painel">Anexando um painel</h2>
+
+<p>Se você precisar anexar um panel a um botão, use a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>. É como a API do action button exceto que ele adiciona uma propriedade boleana <code>checked </code>que é alternada sempre que o botão é checado. Para anexar o painel, passe o método <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#show(options)"><code>show()</code></a> do painel. Para mais detalhes sobre isso, veja a <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">documentação do toggle button</a>.</p>
+
+<h2 id="Mostrando_conteúdo_mais_rico">Mostrando conteúdo mais rico</h2>
+
+<p>Para criar conteúdo mais complexo para a interface do usuário do que é possível com apenas um botão, use a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a>. Com a API toolbar você consegue uma faixa horizontal da interface do usuário. Você pode adicionar botões à barra de ferramentas e também <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">frames</a>, que podem ter HTML, CSS, e JavaScript.</p>
+
+<h2 id="Aprendendo_mais">Aprendendo mais</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">Referência action button</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">Referência </a><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">Referência </a><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a></li>
+</ul>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/adicionar_uma_item_de_menu_ao_firefox/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/adicionar_uma_item_de_menu_ao_firefox/index.html
new file mode 100644
index 0000000000..ebc4e41846
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/adicionar_uma_item_de_menu_ao_firefox/index.html
@@ -0,0 +1,115 @@
+---
+title: Adicionar um item de menu ao Firefox
+slug: Mozilla/Add-ons/SDK/Tutorials/Adicionar_uma_item_de_menu_ao_Firefox
+tags:
+  - Add-on SDK
+  - Menu Item
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox
+---
+<div class="note">
+<p>Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Installation">instalado o SDK</a> e aprendido o <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Getting_Started_With_cfx">básico do cfx</a>.</p>
+</div>
+
+<div class="note">
+<p>Se vocé estiver usando <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm">jpm</a> ao invés de cfx, o método para usar módulos de terceiros é diferente, e você deve ler a <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Using_third-party_modules_%28jpm%29">versão jpm</a> ao invés deste guia.</p>
+</div>
+
+<p>O SDK não tem ainda uma API para adicionar novos itens de menu ao Firefox. Mas é extensível por design, então qualquer um pode construir e publicar módulos para desenvolvedores de add-on usar. Felizmente, Erik Vold escreveu um módulo <a href="https://github.com/mykmelez/menuitems-jplib"><code>menuitems</code></a> que nos permite adicionar itens de menu.</p>
+
+<p>Este tutorial tem dupla função. Ele descreve o método geral para usar um externo, módulo de terceiro em seu add-on, e ele descreve como adicionar um item de menu usando o módulo <code>menuitems</code> em especial.</p>
+
+<p>Primeiro, crie um novo add-on. Crie um diretório chamado "clickme" onde você quiser, navegue para ele e execute <code>cfx init</code>.</p>
+
+<pre>mkdir clickme
+cd clickme
+cfx init
+</pre>
+
+<p>A estrutura de diretório de costume será criada:</p>
+
+<ul>
+ <li>clickme
+  <ul>
+   <li>data</li>
+   <li>lib
+    <ul>
+     <li>main.js</li>
+    </ul>
+   </li>
+   <li>package.json</li>
+   <li>tests
+    <ul>
+     <li>test-main.js</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div> </div>
+
+<h2 id="Inslatando_menuitems">Inslatando menuitems</h2>
+
+<p>Crie um diretório em "clickme" chamado "packages". Baixe o pacote <code>menuitems</code> de <a href="https://github.com/mykmelez/menuitems-jplib/zipball/4d6ae5b410d79cc16c9c76920fbaa8a367e44ca7">https://github.com/mykmelez/menuitems-jplib</a> e extrai ele dentro do diretório "packages" que você criou:</p>
+
+<pre>mkdir packages
+cd packages
+tar -xf ../erikvold-menuitems-jplib-d80630c.zip
+</pre>
+
+<h2 id="Dependências_de_Módulo">Dependências de Módulo</h2>
+
+<p>Se os módulos de terceiros dependem de módulos SDK, você pode usá-los imediatamente, mas se eles dependem de módulos de terceiros, você terá de instalar essas dependências também.</p>
+
+<p>No diretório principal do pacote (menuitems) você encontrará um arquivo chamado "package.json". Abra ele e procure por uma entrada chamada "dependencies". A entrada para o pacote <code>menuitems</code> é:</p>
+
+<pre>"dependencies": ["api-utils", "vold-utils"]
+</pre>
+
+<p>Isso nos diz que nós precisamos instalar o pacote <code>vold-utils</code>, que nós podemos fazer baixando ele de <a href="https://github.com/mykmelez/vold-utils-jplib/zipball/a321447dc5d613df33023165854957c181dc3174">https://github.com/mykmelez/vold-utils-jplib </a>e adicionando ele ao diretório packages com <code>menuitems</code>. Veja também <a href="/en-US/docs/Mozilla/QA/Mozmill_tests/Shared_Modules/UtilsAPI">api-utils Docs</a>(UtilsAPI).</p>
+
+<h2 id="Usando_menuitems">Usando <code>menuitems</code></h2>
+
+<p>A documentação para o módulo <a href="https://github.com/mykmelez/menuitems-jplib/blob/master/docs/menuitems.md"><code>menuitems</code></a> nos diz para criar um item de menu usando <code>MenuItem()</code>. Das opções aceitas pelo <code>MenuItem()</code>, nós usaremos este conjunto mínimo:</p>
+
+<ul>
+ <li><code>id</code>: identificado para este item de menu</li>
+ <li><code>label</code>: texto para mostrar no item</li>
+ <li><code>command</code>: função chamada quando o usuário seleciona o item</li>
+ <li><code>menuid</code>: identificador para o elemento pai do item</li>
+ <li><code>insertbefore</code>: identificador para o item anterior àquele que nós queremos que o item apareça</li>
+</ul>
+
+<div>
+<div>
+<pre class="brush: js">var menuitem = require("menuitems").Menuitem({
+  id: "clickme",
+  menuid: "menu_ToolsPopup",
+  label: "Click Me!",
+  onCommand: function() {
+    console.log("clicked");
+  },
+  insertbefore: "menu_pageInfo"
+});</pre>
+
+<div> </div>
+</div>
+</div>
+
+<p>Próximo, nós temos que declarar nossa dependência do pacote <code>menuitems</code>. No <code>package.json</code> de nosso add-on adicionamos a linha:</p>
+
+<pre>"dependencies": "menuitems"
+</pre>
+
+<p>Observe que devido ao <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=663480">bug 663480</a>, se você adicionar uma linha <code>dependencies </code>ao <code>package.json</code>, e você usar qualquer módulo do SDK, então você deve também declarar sua dependência naquele pacote embutido, como isto:</p>
+
+<pre>"dependencies": ["menuitems", "addon-sdk"]
+</pre>
+
+<p>Agora terminamos. Execute o add-on e você verá o novo item aparecer no menu de Ferramentas: selecione ele e você verá a <code>info: clicked </code>aparecer no console.</p>
+
+<h2 id="Cuidados">Cuidados</h2>
+
+<p>Módulos de terceiros são uma ótima forma de usar características não suportadas diretamente pelo SDK, mas porque módulos de terceiros usam APIs de nível baixo, eles podem quebrar quando forem lançadas novas versões do Firefox.</p>
+
+<p> </p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/adicione_um_item_ao_menu_de_contexto/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/adicione_um_item_ao_menu_de_contexto/index.html
new file mode 100644
index 0000000000..d864cd3029
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/adicione_um_item_ao_menu_de_contexto/index.html
@@ -0,0 +1,120 @@
+---
+title: Adicione um Item ao Menu de Contexto
+slug: Mozilla/Add-ons/SDK/Tutorials/Adicione_um_Item_ao_Menu_de_Contexto
+tags:
+  - Add-on SDK
+  - Firefox
+  - Guide
+  - context-menu
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item
+---
+<div class="note">
+<p>Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Installation">instalado o SDK</a> e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Getting_Started_With_cfx">básico sobre cfx</a>.</p>
+</div>
+
+<p>Para adicionar itens e submenus ao menu de contexto do Firetox, use o módulo  <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p>
+
+<p>Aqui está um add-on que adiciona um novo item ao menu de contexto. O item é mostrado sempre que alguma coisa na página é selecionada. Quando é clicado, a seleção é enviada para o código principal do add-on, que apenas registra ele:</p>
+
+<pre class="brush: js">var contextMenu = require("sdk/context-menu");
+ var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});</pre>
+
+<p>Teste: execute o add-on, carregue uma página web, selecione algum texto e clique com o botão direito. Você verá o novo item aparecer:</p>
+
+<p><img src="https://mdn.mozillademos.org/files/6513/context-menu-selection.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Clique nele, e a seleção é <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Logging">registrada no console</a> (ou na shell, se você estiver executando uma instância do Firefox na linha de comando):</p>
+
+<pre>info: elephantine lizard
+</pre>
+
+<h2 id="Detalhes">Detalhes</h2>
+
+<p>Tudo que este add-on faz é criar um item no menu de contexto. Você não precisa adicioná-lo: uma vez que você criou o item, ele é automaticamente adicionado no contexto correto. O construtor nesse caso possui quatro opções: <code>label</code>, <code>context</code>, <code>contentScript</code>, e <code>onMessage</code>.</p>
+
+<h3 id="label">label</h3>
+
+<p>O <code>label</code> é tão somente a string que será mostrada.</p>
+
+<h3 id="context">context</h3>
+
+<p>O <code>context</code> descreve a circunstância em que o item será mostrado. O módulo <code>context-menu</code> oferece uma série de contextos embutidos, incluindo este <code>SelectionContext()</code>, que significa: mostrar o item quando alguma coisa na página for selecionada.</p>
+
+<p>Se estes simples contextos não forem suficiente, você pode definir contextos mais sofisticados usando scripts.</p>
+
+<h3 id="contentScript">contentScript</h3>
+
+<p>Este anexa um script ao item. Nesse caso o script espera pelo clique do usuário no item, então envia uma mensagem para o add-on contendo do texto selecionado.</p>
+
+<h3 id="onMessage">onMessage</h3>
+
+<p>A propriedade <code>onMessage</code> oferece um modo para o código do add-on responder mensagens do script anexado ao item do menu de contexto. Nesse caso é apenas registrado o texto selecionado.</p>
+
+<p>Então:</p>
+
+<ol>
+ <li>O usuário clica no item</li>
+ <li>o conteúdo do script do evento <code>click</code> dispara, e o conteúdo do script recupera o texto selecionado e envia a mensagem para o add-on</li>
+ <li>o evento <code>message</code> do add-on dispara, e ao código manipulador da função é passado o texto selecionado, que é registrado</li>
+</ol>
+
+<h2 id="Mais_opções">Mais opções</h2>
+
+<h3 id="Adicionando_uma_imagem">Adicionando uma imagem</h3>
+
+<p>Você pode adicionar uma imagem ao menu de contexto por meio da opção <code>image</code>. Isto é uma URL apontando para um ícone 16x16 que é mostrado do lado esquerdo do item do menu de contexto. Geralmente você armazenaria sua imagem no diretório "data" do seu add-on, e construiria a URL usando <code>self.data.url()</code>:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+
+var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  image: self.data.url("icon-16.png"),
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});</pre>
+
+<h3 id="Adicione_uma_tecla_de_atalho">Adicione uma tecla de atalho</h3>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 35.</p>
+</div>
+
+<p>A partir do Firefox 35 você pode especificar uma tecla de atalho usando a opção  <code>accessKey</code>. Deve ser somente um caracter. Pressione a tecla selecionada na opção quando o menu de contexto estiver aberto:</p>
+
+<pre class="brush: js">var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  accessKey: "l",
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+</pre>
+
+<p> </p>
+
+<h2 id="Aprendendo_mais">Aprendendo mais</h2>
+
+<p>Aprendendo mais sobre o módulo <code>context-menu</code>, veja a referência da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/captura_de_carregamento_da_pagina/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/captura_de_carregamento_da_pagina/index.html
new file mode 100644
index 0000000000..1fa1ae81d6
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/captura_de_carregamento_da_pagina/index.html
@@ -0,0 +1,28 @@
+---
+title: Captura de carregamento da página
+slug: Mozilla/Add-ons/SDK/Tutorials/captura_de_carregamento_da_pagina
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load
+---
+<div class="note">
+ Para seguir esse tutorial você necessita ter <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado o SDK</a> e aprendido <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">o básico do <code>cfx</code></a>.</div>
+<p>Você pode capturar notificações sobre novas páginas em carregamento usando o módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>. <span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">seguinte complemento</span> captura o evento ready <span class="hps">da</span> aba <span class="hps">e</span> mostra no console <span class="hps">a</span> <span class="hps">URL</span> <span class="hps">da</span><span class="hps"> mesma, carregada pelo usuário</span><span>:</span></span></p>
+<pre class="brush: js">require("sdk/tabs").on("ready", logURL);
+
+function logURL(tab) {
+  console.log(tab.url);
+}
+</pre>
+<p><span id="result_box" lang="pt"><span class="hps">Você não</span> <span class="hps">tem acesso direto</span> <span class="hps">a qualquer</span> <span class="hps">conteúdo hospedado</span> <span class="hps">na guia</span><span>.</span></span></p>
+<p><span id="result_box" lang="pt"><span class="hps">Para acessar o conteúdo</span> <span class="hps">da aba </span><span class="hps">você precisa anexar</span> <span class="hps">um script</span> <span class="hps">usando</span> <code>tab.attach()</code><span class="hps">.</span> <span class="hps">Este</span> <span class="hps">add</span><span>-on</span> <span class="hps">atribui</span> <span class="hps">um script para</span> <span class="hps">todas as</span> <span class="hps">abas abertas</span><span>.</span> <span class="hps">O</span> <span class="hps">script adiciona</span> <span class="hps">uma borda vermelha</span> <span class="hps">ao</span> <span class="hps">documento</span> <span class="hps">da aba</span><span>:</span></span></p>
+<pre class="brush: js">require("sdk/tabs").on("ready", runScript);
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+<p><span id="result_box" lang="pt"><span class="hps">(Este exemplo é</span> <span class="hps">apenas para mostrar</span> <span class="hps">a idéia</span><span>:</span> <span class="hps">para implementar</span> <span class="hps">algo como isso,</span> <span class="hps">você deve usar</span> <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a><span>,</span> <span class="hps">e especificar</span> <span class="hps">"*" como</span> <span class="hps">o match-pattern</span><span class="hps">.</span></span>)</p>
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+<p>Para aprender mais sobre o trabalho com abas no SDK, veja a <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">referência de tab da API</a>. <span id="result_box" lang="pt"><span class="hps">Você</span> <span class="hps">pode capturar </span><span class="hps">uma série de</span> <span class="hps">outros eventos</span> <span class="hps">da aba</span><span>, incluindo</span> <code>open</code><span class="hps">, <code>close </code></span><span class="hps">e <code>activate</code>.</span></span></p>
+<p>Para ler mais sobre rodar scripts nas abas, veja o <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">tutorial sobre como usar <code>tab.attach()</code></a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/chrome_authority/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/chrome_authority/index.html
new file mode 100644
index 0000000000..0e09ecdc02
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/chrome_authority/index.html
@@ -0,0 +1,65 @@
+---
+title: Autoridade Chrome
+slug: Mozilla/Add-ons/SDK/Tutorials/Chrome_Authority
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Chrome_Authority
+---
+<div class="warning">
+<p>A API usada para ganhar acesso ao Chrome atualmente é uma característica experimental do SDK, e deve mudar em lançamentos futuros.</p>
+</div>
+
+<h2 id="Usando_Autoridade_Chrome">Usando Autoridade Chrome</h2>
+
+<p>Os módulos de baixo-nível mais poderosos são executados com "chrome privileges", que nos dão acesso ao infame <a href="/en-US/docs/Components_object"><code>Objeto Components</code></a>, que concede acesso irrestrito ao host. A partir daí, <span id="result_box" lang="pt"><span class="hps">o módulo</span> <span class="hps">pode fazer praticamente</span> <span class="hps">qualquer coisa que o</span> <span class="hps">navegador</span> <span class="hps">é capaz.</span> <span class="hps">Para obter estes</span> <span class="hps">privilégios</span><span>, o módulo</span> <span class="hps">deve declarar</span> <span class="hps">sua intenção</span> <span class="hps">com</span> <span class="hps">uma declaração como</span> <span class="hps">a seguinte</span></span>:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");</pre>
+
+<p>O objeto retornado pelo <code>require("chrome")</code>, quando desempacotado com a característica <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7#Destructuring_assignment_(Merge_into_own_page.2Fsection)">destructuring assignment</a> disponível no ambiente JS do Mozilla, fornecerá os redutores comuns dos <code>Components.*</code>:</p>
+
+<p><code><strong>Cc</strong></code></p>
+
+<p>Um redutor para <code>Components.classes</code>.</p>
+
+<p><code><strong>Ci</strong></code></p>
+
+<p>Um redutor para <code>Components.interfaces</code>.</p>
+
+<p><code><strong>Cu</strong></code></p>
+
+<p>Um redutor para <code>Components.utils</code>.</p>
+
+<p><code><strong>Cr</strong></code></p>
+
+<p>Um redutor para <code>Components.results</code>.</p>
+
+<p><code><strong>Cm</strong></code></p>
+
+<p>Um redutor para <code>Components.manager</code>.</p>
+
+<p><code><strong>components</strong></code></p>
+
+<p>Uma outra forma de chamar <code>Components</code> por si mesmo (note as letras minúsculas). A partir daí você pode acessar propriedade de uso menos frequente como <code>Components.stack</code> e <code>Components.isSuccessCode</code>.</p>
+
+<p>Nota: a declaração <code>require("chrome")</code> é o <strong>único</strong> modo para acessar as funcionalidades do chrome e da API <code>Components</code>. O objeto <code>Components</code> <strong>não</strong> deve ser acessado de módulos. A ferramenta SDK emitira um aviso se ela vir código em móduo que referencie o <code>Components</code> diretamente.</p>
+
+<p>Seu módulo deve evitar usar privilégios do chrome a menos que seja absolutamente necessário. Uso da Autoridade do Chrome deve receber revisão extra de segurança, e a maioria dos bugs nestes módulos são críticos a segurança.</p>
+
+<h2 id="Geração_do_Manifesto">Geração do Manifesto</h2>
+
+<p>O <strong>manifesto</strong> é uma lista, incluída no XPI gerado, que especifica quais módulos requisitação accesso <code>require()</code> para quais outros módulos. Ele também grava quais módulos requisitam acesso chrome. Esta lista é gerada pelo mapeamento de todos os módulos incluído pela declaração <code>require(XYZ)</code> e grava a string "XYZ" que eles referênciam.</p>
+
+<p>Quando a implementação do manifesto estiver completa o carregador do programa  vai impedir os módulos de usar <code>require()  </code>para solicitar módulos que não estão listados no manifesto. Também, evitará que os módulos consiga autoridade chrome a menos que o manifesto indique que eles pediram para ele.<span id="result_box" lang="pt"><span class="hps"> Isto irá assegurar que</span> <span class="hps">os revisores enxerguem</span> <span class="hps">as mesmas restrições</span> <span class="hps">de autoridade</span> <span class="hps">que são aplicadas</span> <span class="hps">sobre o</span> <span class="hps">código em execução, aumentando efetivamente o tempo gasto revendo o add-on. (até que</span> <span class="hps">este trabalho</span> <span class="hps">seja concluído,</span> <span class="hps">os módulos</span> <span class="hps">podem ser capazes de</span> <span class="hps">burlar</span> <span class="hps">essas restrições).</span></span></p>
+
+<p>O manifesto é construído com um mapeador baseado em expressão regular, não um análisador Javascript. Os desenvolvedores devem manter as declarações <code>require</code> simples, com uma única string estática, uma por linha de código. Se o mapeador falhar para enxergar a entrada <code>require</code>, o manifesto não incluirá aquela entrada, e (uma vez que a implementação esteja completa) o código em execução lança uma exceção.</p>
+
+<p>Por exemplo, nenhum dos códigos a seguir serão encontrados pelo mapeamento do manifesto, levando a uma exceção em tempo de execução, quando a chamada <code>require()</code> é proibida de importar os módulos chamados:</p>
+
+<pre class="brush: js">// todos estes falharão
+var xhr = require("x"+"hr");
+var modname = "xpcom";
+var xpcom = require(modname);
+var one = require("one"); var two = require("two");
+</pre>
+
+<p>A intenção é que os desenvolvedores usem a declaração <code>require() </code>para dois propósitos: declarar (ao revisores de segurança) qual a classificação dos poderes que os modulos querem usar, e controlar como estes poderes serão mapeados dentro do namespace do módulo local. Suas declarações devem então ser claras e fáceis de analisar. Um formato de manifesto futuro deve mover a porção de declaração para um arquivo separado, para permitir expressões mais granuladas de autorização.</p>
+
+<p>Comandos que constroem um manifesto, como "<code>jpm xpi</code>" ou "<code>jpm run</code>", mapearão todos os módulos incluídos pelo uso dos atalhos <code>Cc</code>/<code>Ci</code> (ou a forma expandida <code>Components.classes</code>). Emitirá um aviso se ele visualizar a forma expandida ou ver o uso e.g. "<code>Cc</code>" sem a entrada correspondente na declaração <code>require("chrome")</code>. Estes avisos servem para guiar os desenvolvedores para o usar o padrão correto. Todos os desenvolvedores de módulos devem reparar os avisos e corrigir seus códigos até que os avisos tenham desaparecido.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/começando/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/começando/index.html
new file mode 100644
index 0000000000..1294a58ffd
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/começando/index.html
@@ -0,0 +1,206 @@
+---
+title: Começando
+slug: Mozilla/Add-ons/SDK/Tutorials/Começando
+tags:
+  - Add-on SDK
+  - Tutorial
+translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29
+---
+<p>Este tutorial percorre a criação de um add-on simples usando o SDK.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Para criar add-ons para Firefox usando SDK, você primeiro precisará seguir as instruções para <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar e ativar o SDK</a>. Uma vez que você fez isso, você estará olhando para um prompt de comando.</p>
+
+<h2 id="Inicializando_um_add-on_vazio">Inicializando um add-on vazio</h2>
+
+<p>No prompt de comando, crie um novo diretório. O diretório não precisa estar no diretório principal do SDK: você pode criar ele em qualquer lugar que você quiser. Navegue para ele, digite cfx init, e tecle enter:</p>
+
+<pre>mkdir my-addon
+cd my-addon
+cfx init
+</pre>
+
+<p>Você verá uma saída como esta:</p>
+
+<pre>* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+</pre>
+
+<h2 id="Implementando_o_add-on">Implementando o add-on</h2>
+
+<p>Agora você pode escrever o código do add-on, que vai no arquivo "main.js" em diretório "lib". Esse arquivo foi criado para você no passo anterior. Abra ele e adicione o seguinte código:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visite Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+</pre>
+
+<p>Salve o arquivo.</p>
+
+<p>Próximo, salve estes ícones no diretório "data" de seu add-on:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Volte ao prompt de comando, digite:</p>
+
+<pre>cfx run
+</pre>
+
+<p>Este é o comando SDK para executar uma nova instância do Firefox com seu add-on instalado. Quando o Firefox inicia, no canto de cima do lado direito do navegador você verá um ícone com o logotipo do Firefox. Clique nele, e uma nova tab abrirá com o site <a href="https://www.mozilla.org/">https://www.mozilla.org/</a> carregado nela.</p>
+
+<p>Isso é tudo que esse add-on faz. Ele usa dois módulos SDK: o módulo <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que permite a você adicionar botões ao navegador, e o módulo <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>, que permite a você realizar operações básicas com <em>tabs</em>. Nesse caso, nós criamos uma botão cujo ícone é o íncone do Firefox, e adicionamos um manipulador de clique que carrega a home page da Mozilla na nova tab.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Tente editar esse arquivo. Por exemplo, nós poderíamos mudar a página que é carregada:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}</pre>
+
+<p>No promp de comando, execute novamente cfx run. Desta vez clicando levará você para <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<h2 id="Empacotando_o_add-on">Empacotando o add-on</h2>
+
+<p>Quando você termina o add-on e está preparado para distribui-lo, você precisa empacotá-lo como um arquivo XPI. Esse é um formato de arquivo instalável para add-ons de Firefox.  Você pode distribuir arquivos XPI ou publicá-los em <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> assim outros usuários podem baixar e instalá-los.</p>
+
+<p>Para construir um XPI, apenas execute o comando cfx xpi do diretório do add-on:</p>
+
+<pre>cfx xpi
+</pre>
+
+<p>Você deve ver uma mensagem como:</p>
+
+<pre>Exporting extension to my-addon.xpi.
+</pre>
+
+<p>Para testar que funcionou, tente instalar o arquivo XPI em sua própria instalação do Firefox. Você pode fazer isso pressionando Ctrl+O (Cmd+O no Mac) de dentro do Firefox, ou selecionando o item "Abrir arquivo" do menu "Arquivo" do Firefox. Isso trará uma caixa de seleção; navegue até o arquivo "my-addon.xpi", abra-o e siga o prompt para instalar o add-on.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Neste tutorial nós construímos e empacotamos um add-on usando três comandos:</p>
+
+<ul>
+ <li><code>cfx init</code> para inicializar um modelo vazio do add-on</li>
+ <li><code>cfx run</code> para executar uma nova instância do Firefox com o add-on instalado, não nós testamos ele</li>
+ <li><code>cfx xpi</code> para empacotar o add-on dentro do arquivo XPI para distribuição</li>
+</ul>
+
+<p>Esses são os três principais comandos que você usará quando desenvolver add-ons no SDK. Há uma abrangente <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">documentação de referência</a> cobrindo todos os comandos que você pode usar e todas as opções que eles possuem.</p>
+
+<p>O próprio código do add-on usa dois módulos do SDK, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> e <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Há documentação de referência para toda a API do SDK, de <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">alto</a> e <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs">baixo nível</a>.</p>
+
+<h2 id="O_que_vem_a_seguir">O que vem a seguir?</h2>
+
+<p>Para sentir algumas das coisas que você pode fazer com a API do SDK, tente trabalhar através de alguns dos <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutorials</a>.</p>
+
+<h2 id="Técnicas_avançadas">Técnicas avançadas</h2>
+
+<h3 id="Sobreescrevendo_os_módulos_embutidos">Sobreescrevendo os módulos embutidos</h3>
+
+<p>Os módulos do SDK que você usa para implementar seu add-on estão embutidas no Firefox. Quando você executa ou empacota um add-on usando <code>cfx run</code> ou <code>cfx xpi</code>, o add-on usará as versões dos módulos na versão do Firefox que hospeda elas.</p>
+
+<p>Como um desenvolvedor de add-on, isso é normalmente o que você quer. Mas se você está desenvolvendo os módulos SDK por si mesmo, claro, não será. Nesse caso assumimos que você pegou o SDK de seu <a href="https://github.com/mozilla/addon-sdk">repositório GitHub</a> e executará o script <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">bin/activate</a> desse diretório raiz de trabalho.</p>
+
+<p>Então quando você invoca <code>cfx run</code> ou <code>cfx xpi</code>, você passa a opçao "-o":</p>
+
+<pre>cfx run -o
+</pre>
+
+<p>Isso instrui o cfx a usar a cópia local dos módulos do SDK, não aqueles existentes no Firefox.</p>
+
+<h3 id="Desenvolvendo_sem_cfx_run">Desenvolvendo sem cfx run</h3>
+
+<p>Porque <code>cfx run</code> reinicia o navegador cada vez que você invoca ele, ele pode ser um pouco pesado se você está fazendo mudanças frequentes em um add-on. Um modelo de desenvolvimento alternativo é usar o add-on <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/">Extension Auto-Installer</a>: este escuta para novos arquivos XPI em uma porta específica e instala-os automaticamente. Dessa maneira você pode testar novas mudanças sem precisar reiniciar o navegador:</p>
+
+<ul>
+ <li>faça uma mudança em seu add-on</li>
+ <li>execute cfx xpi</li>
+ <li>posta o add-on para uma porta especificada</li>
+</ul>
+
+<p>Você poderia até mesmo automatizar esse fluxo com um script simples. Por exemplo:</p>
+
+<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+</pre>
+
+<p>Note que o nível de registro definido para o console é diferente quando você usa esse método, comparado com o nível de registro usado quando um add-on está executando usando <code>cfx run</code>. Isso significa que se você quiser ver a saída de mensagens do <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Logging">console.log()</a>, você terá que ajustar uma configuração. Veja a documentação no <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/console#Logging_Levels">nível de registros</a> para mais detalhes sobre isso.</p>
+
+<p>Um outro exemplo usando <a href="http://gruntjs.com/">grunt</a> e <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p>
+
+<pre class="brush: js">module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo&gt;/dev/null'
+        ].join('&amp;&amp;')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};</pre>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_event_targets/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_event_targets/index.html
new file mode 100644
index 0000000000..d8fd6a7318
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_event_targets/index.html
@@ -0,0 +1,245 @@
+---
+title: Criando Alvos de Eventos
+slug: Mozilla/Add-ons/SDK/Tutorials/Creating_event_targets
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Creating_event_targets
+---
+<p><span>Este tutorial descreve o uso de APIS de baixo nível. Estas APIs estão ainda em desenvolvimento, e nós esperamos fazer mudanças incompatíveis nela em lançamentos futuros.</span></p>
+
+<p>O <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">guia de programação de eventos dirigidos com SDK</a> descreve como consumir eventos: isto é, como escutar eventos gerados pelo alvos de evento. Por exemplo, você pode escutar ao evento <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#ready"><code>evento ready</code> do módulo tab</a> ou <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel#show">o event<code> show do objeto Panel</code></a>.</p>
+
+<p>Com o SDK, também é simples implementar seus próprios alvos de eventos. Isto é especialmente útil se você quiser <a href="/en-US/Add-ons/SDK/Creating_Reusable_Modules">construir seus próprios módulos</a>, ou organizar seu add-on melhor ou permitir a outros desenvolvedores reusar seu código. Se você usa o framework de eventos do SDK para seus alvos de eventos, os usuários de seus módulos podem escutar pelos eventos usando a API de evento padrão do SDK.</p>
+
+<p>Neste tutorial nów criaremos parte de um módulo para acessar a <a href="https://developer.mozilla.org/en/Places">API Local</a> do navegador. Ele emitirá eventos quando o usuário adicionar e visitar um favorito, permitindo aos usuários escutar estes eventos usando a API de evento padrão do SDK.</p>
+
+<h2 id="Usando_a_API_Local">Usando a API Local</h2>
+
+<p>Primeiro, vamos escrever algun código usando a API Local que registra as URIs do favorito que o usuário adicinou.</p>
+
+<p>Crie uma novo diretório chamado "bookmarks", navegue até ele, e execute<code><a href="/en-US/Add-ons/SDK/Tools/jpm"> jpm init</a></code>, aceitando todos os padrões. Então abra o "index.js" e adicione o seguinte código:</p>
+
+<pre class="brush: js">var {Cc, Ci, Cu} = require("chrome");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm", this);
+var bookmarkService = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                          .getService(Ci.nsINavBookmarksService);
+
+var bookmarkObserver = {
+  onItemAdded: function(aItemId, aFolder, aIndex) {
+    console.log("added ", bookmarkService.getBookmarkURI(aItemId).spec);
+  },
+  onItemVisited: function(aItemId, aVisitID, time) {
+    console.log("visited ", bookmarkService.getBookmarkURI(aItemId).spec);
+  },
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsINavBookmarkObserver])
+};
+
+exports.main = function() {
+  bookmarkService.addObserver(bookmarkObserver, false);
+};
+
+exports.onUnload = function() {
+  bookmarkService.removeObserver(bookmarkObserver);
+}
+</pre>
+
+<p>Tente executar este add-on, adicionando e visitando favoritos, e observando a saída no console.</p>
+
+<h2 id="Módulos_como_Alvos_de_Evento">Módulos como Alvos de Evento</h2>
+
+<p>Nós podemos adaptar esse código em módulos separados que expõe a interface de evento padrão do SDK.</p>
+
+<p>Para fazer isso nós usaremos o módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/event_core"><code>event/core</code></a>.</p>
+
+<p>Crie um novo arquivo no "lib" chamado "bookmarks.js", e adicione o seguinte código:</p>
+
+<pre class="brush: js">var { emit, on, once, off } = require("sdk/event/core");
+
+var {Cc, Ci, Cu} = require("chrome");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm", this);
+var bookmarkService = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                          .getService(Ci.nsINavBookmarksService);
+
+var bookmarkObserver = {
+  onItemAdded: function(aItemId, aFolder, aIndex) {
+    emit(exports, "added", bookmarkService.getBookmarkURI(aItemId).spec);
+  },
+  onItemVisited: function(aItemId, aVisitID, time) {
+    emit(exports, "visited", bookmarkService.getBookmarkURI(aItemId).spec);
+  },
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsINavBookmarkObserver])
+};
+
+bookmarkService.addObserver(bookmarkObserver, false);
+
+exports.on = on.bind(null, exports);
+exports.once = once.bind(null, exports);
+exports.removeListener = function removeListener(type, listener) {
+  off(exports, type, listener);
+};
+</pre>
+
+<p>Este código implementa um módulo que pode emitir eventos <code>added</code> e <code>visited</code>. Ele duplica o código anterior, mas com um pouco de mudanças:</p>
+
+<ul>
+ <li>importe <code>emit()</code>, <code>on()</code>, <code>once()</code>, e <code>off()</code> do <code>event/core</code></li>
+ <li>substitua as funções de escuta com chamadas para <code>emit()</code>, passando o tipo de evento apropriado</li>
+ <li>exporte sua própria API de evento. Este consiste de três funções:
+  <ul>
+   <li><code>on()</code>: inicia a escuta pelo evento ou um dado tipo</li>
+   <li><code>once()</code>: escuta pela ocorrência de um dado evento, e então para</li>
+   <li><code>removeListener()</code>: para a escuta por eventos de um dado tipo</li>
+  </ul>
+ </li>
+</ul>
+
+<p>O <code>on()</code> e <code>once()</code> exporta delegação a uma função correspondente do <code>event/core</code>, e usa <code>bind()</code> para passar o objeto <code>exports</code> por si só como o argumento <code>target(alvo)</code> à função subjacente. A função <code>removeListener()</code> é implementada pela chamada da função subjacente  <code>off()</code>.</p>
+
+<p>Nós podemos usar este módulo do mesmo modo que nós usamos qualquer outro módulo que emite eventos a nível de módulo, tais como <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>. Por exemplo, nós podemos adaptar o "index.js" como segue:</p>
+
+<pre class="brush: js">var bookmarks = require("./bookmarks");
+
+function logAdded(uri) {
+  console.log("added: " + uri);
+}
+
+function logVisited(uri) {
+  console.log("visited: " + uri);
+}
+
+exports.main = function() {
+  bookmarks.on("added", logAdded);
+  bookmarks.on("visited", logVisited);
+};
+
+exports.onUnload = function() {
+  bookmarks.removeListener("added", logAdded);
+  bookmarks.removeListener("visited", logVisited);
+}
+</pre>
+
+<h2 id="Classes_como_Alvos_de_Eventos">Classes como Alvos de Eventos</h2>
+
+<p>Às vezes nós queremos emitir eventos à nível de objetos individuais, em vez de à nível de módulo.</p>
+
+<p>Para fazer isto, nós podemos herdar da classe <a href="/en-US/Add-ons/SDK/Low-Level_APIs/event_target"><code>EventTarget</code></a> do SDK. <code>EventTarget</code> fornece uma implementação das funções necessárias a adicionar e remover escutas: <code>on()</code>, <code>once()</code>, e <code>removeListener()</code>.</p>
+
+<p>Neste exemplo, nós poderíamos definir uma classe <code>BookmarkManager</code> que herda do <code>EventTarget</code> e emite eventos <code>added</code> e <code>visited</code>.</p>
+
+<p>Abra o "bookmarks.js" e substitua seu conteúdo com este código:</p>
+
+<pre class="brush: js">var { emit } = require("sdk/event/core");
+var { EventTarget } = require("sdk/event/target");
+var { Class } = require("sdk/core/heritage");
+var { merge } = require("sdk/util/object");
+
+var {Cc, Ci, Cu} = require("chrome");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm", this);
+var bookmarkService = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                          .getService(Ci.nsINavBookmarksService);
+
+function createObserver(target) {
+   var bookmarkObserver = {
+     onItemAdded: function(aItemId, aFolder, aIndex) {
+       emit(target, "added", bookmarkService.getBookmarkURI(aItemId).spec);
+     },
+     onItemVisited: function(aItemId, aVisitID, time) {
+       emit(target, "visited", bookmarkService.getBookmarkURI(aItemId).spec);
+     },
+     QueryInterface: XPCOMUtils.generateQI([Ci.nsINavBookmarkObserver])
+   };
+   bookmarkService.addObserver(bookmarkObserver, false);
+}
+
+var BookmarkManager = Class({
+  extends: EventTarget,
+  initialize: function initialize(options) {
+    EventTarget.prototype.initialize.call(this, options);
+    merge(this, options);
+    createObserver(this);
+  }
+});
+
+exports.BookmarkManager = BookmarkManager;
+</pre>
+
+<p>O código para interagir com a API Local é o mesmo que aqui. Porém:</p>
+
+<ul>
+ <li>nós estamos agora importando de quatro módulos:
+  <ul>
+   <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/event_core"><code>event/core</code></a> nos dá <code>emit()</code>: note que nós não precisamos <code>on</code>, <code>once</code>, ou <code>off</code>, desde que nós usaremos <code>EventTarget</code> para adicionar e remover escutas</li>
+   <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/event_target"><code>event/target</code></a> nos dá <code>EventTarget</code>, que implementa a interface para adicionar e remover escutas</li>
+   <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/core_heritage"><code>core/heritage</code></a> nos dá <code>Class()</code>, que nós podemos usar para herdar do <code>EventTarget</code></li>
+   <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_object"><code>util/object</code></a> nos dá <code>merge()</code>, que apenas simplifica a configuração das propriedades do <code>BookmarkManager</code></li>
+  </ul>
+ </li>
+ <li>nós usamos classe para herdar do<code> EventTarget</code>. Em sua função <code>initialize()</code>, nós:
+  <ul>
+   <li><span class="short_text" id="result_box" lang="pt"><span class="hps">chamar o</span> <span class="hps">inicializador de</span> <span class="hps">classe base</span></span></li>
+   <li>use <code>merge()</code> para copiar qualquer opção fornecida dentro do novíssimo objeto criado</li>
+   <li>chama <code>createObserver()</code>, passando o novíssimo objeto criado como o alvo do evento</li>
+  </ul>
+ </li>
+ <li><code>createObserver()</code> é o mesmo do exemplo anterior, exceto que no <code>emit()</code> nós passamos o <code>BookmarkManager</code> criado como o alvo do evento</li>
+</ul>
+
+<p>Para usar este alvo de evento nós podemos criar ele e chamar a funções <code>on()</code>, <code>once()</code>, e <code>removeListener()</code> que ele herdou:</p>
+
+<pre class="brush: js">var bookmarks = require("./bookmarks");
+var bookmarkManager = bookmarks.BookmarkManager({});
+
+function logAdded(uri) {
+  console.log("added: " + uri);
+}
+
+function logVisited(uri) {
+  console.log("visited: " + uri);
+}
+
+exports.main = function() {
+  bookmarkManager.on("added", logAdded);
+  bookmarkManager.on("visited", logVisited);
+};
+
+exports.onUnload = function() {
+  bookmarkManager.removeListener("added", logAdded);
+  bookmarkManager.removeListener("visited", logVisited);
+}
+</pre>
+
+<h3 id="Implementando_uma_opção_onEvent">Implementando uma opção "onEvent"</h3>
+
+<p>Finalmente, a maioria dos alvos de eventos aceitam opções na forma "onEvent", onde "Event" é o nome do evento com a primeira letra em maiúsculo. Por exemplo, você pode escutar o <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel#show"><code>evento show do objeto Panel</code></a> ou chamando:</p>
+
+<pre class="brush: js">myPanel.on("show", listenerFunction);
+</pre>
+
+<p>ou passando a opção <code>onShow</code> para o construtor do Painel:</p>
+
+<pre class="brush: js">var myPanel = require("sdk/panel").Panel({
+  onShow: listenerFunction,
+  contentURL: "https://en.wikipedia.org/w/index.php"
+});
+</pre>
+
+<p>Se sua classe herda do <code>EventTarget</code>, opções como <code>this</code> são automaticamente manipuladas para você. Por exemplo, dada a implementação do <code>BookmarkManager</code> acima, seu "index.js" seria reescrito como isto:</p>
+
+<pre class="brush: js">var bookmarks = require("./bookmarks");
+
+function logAdded(uri) {
+  console.log("added: " + uri);
+}
+
+function logVisited(uri) {
+  console.log("visited: " + uri);
+}
+
+var bookmarkManager = bookmarks.BookmarkManager({
+  onAdded: logAdded,
+  onVisited: logVisited
+});
+
+exports.onUnload = function() {
+  bookmarkManager.removeListener("added", logAdded);
+  bookmarkManager.removeListener("visited", logVisited);
+}
+</pre>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_reusable_modules/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_reusable_modules/index.html
new file mode 100644
index 0000000000..837583f9c8
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/creating_reusable_modules/index.html
@@ -0,0 +1,253 @@
+---
+title: Criando Módulos Reutilizáveis
+slug: Mozilla/Add-ons/SDK/Tutorials/Creating_reusable_modules
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Creating_reusable_modules
+---
+<div class="note">Para seguir este tutorial você precisa do <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">SDK instalado</a> e conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de cfx</a>.</div>
+
+<p>Com o SDK você não precisa manter tudo em um único arquivo "main.js". Você pode separar seu código em módulos separados com interfaces claramente definidas entre eles. Você então importa e usa estes módulos de outras partes de seu add-on usando a declaração <code>require()</code>, da mesma forma que você importa os módulos core do SDK como <a href="/en-US/Add-ons/SDK/High-Level_APIs/page_mod"><code>page-mod</code></a> or <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.</p>
+
+<p>Muitas vezes faz sentido estruturar um add-on muito grande ou complexo como uma coleção de módulos. Isso torna o desenho do add-on mais fácil de entender e fornece algum encapsulamento em que cada módulo exportará somente o que ele escolheu, então você pode mudar o módulo internamente sem quebrar seu usuário.</p>
+
+<p>Uma vez que você fez isso, você pode empacotar os módulos e distribui-los independentemente de seu add-on, tornando-os disponíveis para outros desenvolvedores de add-on e efetivamente extendendo o SDK.</p>
+
+<p>Neste tutorial faremos exatamente isso com o módulo que calcula hashes de arquivo.</p>
+
+<h2 id="Um_add-on_de_hashing">Um add-on de hashing</h2>
+
+<p>Uma função <em>hash</em> leva uma <em>string</em> de qualquer tamanho de bytes, e produz uma string curta e de tamanho fixo de bytes como saída. É um modo útil para criar um "fingerprint" que pode ser usado para identificar um arquivo. MD5 é uma função hash comumente usada: embora não seja considerada segura, ela trabalha bem desconsiderando o contexto da segurança.</p>
+
+<p>Aqui nós escreveremos um add-on que deixa o usuário escolher uma arquivo no disco e calcula seu hash. Para ambas operações nós usaremos as interfaces <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a>.</p>
+
+<h3 id="File_picker">File picker</h3>
+
+<p>Para deixar o usuário selecionar um arquivo nós usaremos  o nsIFilePicker. A <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFilePicker">documentação para esta interface</a> inclui um exemplo que nós podemos adaptar como este:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+
+function promptForFile() {
+  const nsIFilePicker = Ci.nsIFilePicker;
+
+  var fp = Cc["@mozilla.org/filepicker;1"]
+           .createInstance(nsIFilePicker);
+
+  var window = require("sdk/window/utils").getMostRecentBrowserWindow();
+  fp.init(window, "Select a file", nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterAll | nsIFilePicker.filterText);
+
+  var rv = fp.show();
+  if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) {
+    var file = fp.file;
+    // Pega o caminho como string. Note que você normalmente não
+    // precisará trabalhar com strings de caminho.
+    var path = fp.file.path;
+    // Trabalhe com o retorno de nsILocalFile...
+  }
+  return path;
+}</pre>
+
+<h3 id="Função_Hash">Função Hash</h3>
+
+<p>Firefox tem suporte embutido para funções hash, exposto via interface XPCOM nsICryptoHash. A <a href="/en-US/docs/XPCOM_Interface_Reference/nsICryptoHash">página da documentação para esta interface</a> inclui um exemplo de calculadora de hash MD5 do conteúdo do arquivo, dado seu caminho. Nós adaptamos como esta:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+
+// retorna o código hexadecimal de dois dígitos para um byte
+function toHexString(charCode) {
+  return ("0" + charCode.toString(16)).slice(-2);
+}
+
+function md5File(path) {
+  var f = Cc["@mozilla.org/file/local;1"]
+          .createInstance(Ci.nsILocalFile);
+  f.initWithPath(path);
+  var istream = Cc["@mozilla.org/network/file-input-stream;1"]
+                .createInstance(Ci.nsIFileInputStream);
+  // abrindo para leitura
+  istream.init(f, 0x01, 0444, 0);
+  var ch = Cc["@mozilla.org/security/hash;1"]
+           .createInstance(Ci.nsICryptoHash);
+  // nós queremos usar o algoritmo MD5
+  ch.init(ch.MD5);
+  // isto diz para updateFromStream ler o arquivo todo
+  const PR_UINT32_MAX = 0xffffffff;
+  ch.updateFromStream(istream, PR_UINT32_MAX);
+  // passe false aqui para conseguir os dados binários de volta
+  var hash = ch.finish(false);
+
+  // converte o hash binário para hex string.
+  var s = Array.from(hash, (c, i) =&gt; toHexString(hash.charCodeAt(i))).join("");
+  return s;
+}</pre>
+
+<h3 id="Colocando_tudo_junto">Colocando tudo junto</h3>
+
+<p>O add-on completo adiciona um botão ao Firfox: quando o usuário clica no botão, nós pedimos lhe para selecionar  um arquivo, e registramos o hash no console:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+
+// retorna o código hexadecimal de dois dígitos para um byte
+function toHexString(charCode) {
+  return ("0" + charCode.toString(16)).slice(-2);
+}
+
+function md5File(path) {
+  var f = Cc["@mozilla.org/file/local;1"]
+          .createInstance(Ci.nsILocalFile);
+  f.initWithPath(path);
+  var istream = Cc["@mozilla.org/network/file-input-stream;1"]
+                .createInstance(Ci.nsIFileInputStream);
+  // abrindo para leitura
+  istream.init(f, 0x01, 0444, 0);
+  var ch = Cc["@mozilla.org/security/hash;1"]
+           .createInstance(Ci.nsICryptoHash);
+  // nós queremos usar o algoritmo MD5
+  ch.init(ch.MD5);
+  // isto diz para updateFromStream ler o arquivo todo
+  const PR_UINT32_MAX = 0xffffffff;
+  ch.updateFromStream(istream, PR_UINT32_MAX);
+  // passe false aqui para conseguir os dados binários de volta
+  var hash = ch.finish(false);
+
+  // converte o hash binário para hex string.
+  var s = Array.from(hash, (c, i) =&gt; toHexString(hash.charCodeAt(i))).join("");
+  return s;
+}
+
+function promptForFile() {
+  var window = require("sdk/window/utils").getMostRecentBrowserWindow();
+  const nsIFilePicker = Ci.nsIFilePicker;
+
+  var fp = Cc["@mozilla.org/filepicker;1"]
+           .createInstance(nsIFilePicker);
+  fp.init(window, "Select a file", nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterAll | nsIFilePicker.filterText);
+
+  var rv = fp.show();
+  if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) {
+    var file = fp.file;
+    // Pega o caminho como string. Note que você normalmente não
+    // precisará trabalhar com strings de caminho.
+    var path = fp.file.path;
+    // Trabalhe com o retorno de nsILocalFile...
+  }
+  return path;
+}
+
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png"
+  },
+  onClick: function() {
+    console.log(md5File(promptForFile()));
+  }
+});
+</pre>
+
+<p>Isso funciona, mas main.js está agora ficando mais longo e sua lógica mais difícil de entender. This works , but main.js is now getting longer and its logic is harder to understand. Vamos levar os códigos do "file picker" e do "hashing code" para módulos separados.</p>
+
+<h2 id="Criando_módulos_separados">Criando módulos separados</h2>
+
+<h3 id="filepicker.js">filepicker.js</h3>
+
+<p>Primeiro criamos um novo arquivo no diretório "lib" chamado "filepicker.js". Copiamos o código do seletor de arquivos, e adicionamos a seguinte linha de código no fim dele:</p>
+
+<pre class="brush: js">exports.promptForFile = promptForFile;
+</pre>
+
+<p>Isso define a interface pública do novo módulo.</p>
+
+<p>Então "filepicker.js" deve parecer com isto:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+
+function promptForFile() {
+  var window = require("sdk/window/utils").getMostRecentBrowserWindow();
+  const nsIFilePicker = Ci.nsIFilePicker;
+
+  var fp = Cc["@mozilla.org/filepicker;1"]
+           .createInstance(nsIFilePicker);
+  fp.init(window, "Select a file", nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterAll | nsIFilePicker.filterText);
+
+  var rv = fp.show();
+  if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) {
+    var file = fp.file;
+    // Get the path as string. Note that you usually won't
+    // need to work with the string paths.
+    var path = fp.file.path;
+    // work with returned nsILocalFile...
+  }
+  return path;
+}
+
+exports.promptForFile = promptForFile;
+</pre>
+
+<h3 id="md5.js">md5.js</h3>
+
+<p>Próximo, crie um outro arquivo no "lib", chamado "md5.js". Copie o código do hashing, e adicione esta linha ao seu fim:</p>
+
+<pre class="brush: js">exports.hashFile = md5File;</pre>
+
+<p>O arquivo completo parece com isto:</p>
+
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+
+//retorna o código hexadecimal de dois dígitos para um byte
+function toHexString(charCode) {
+  return ("0" + charCode.toString(16)).slice(-2);
+}
+
+function md5File(path) {
+  var f = Cc["@mozilla.org/file/local;1"]
+          .createInstance(Ci.nsILocalFile);
+  f.initWithPath(path);
+  var istream = Cc["@mozilla.org/network/file-input-stream;1"]
+                .createInstance(Ci.nsIFileInputStream);
+  // abrindo para leitura
+  istream.init(f, 0x01, 0444, 0);
+  var ch = Cc["@mozilla.org/security/hash;1"]
+           .createInstance(Ci.nsICryptoHash);
+  // nós queremos usar o algoritmo MD5
+  ch.init(ch.MD5);
+  // isto diz para updateFromStream ler o arquivo todo
+  const PR_UINT32_MAX = 0xffffffff;
+  ch.updateFromStream(istream, PR_UINT32_MAX);
+  // passe false aqui para conseguir os dados binários de volta
+  var hash = ch.finish(false);
+
+  // converte o hash binário para hex string.
+  var s = Array.from(hash, (c, i) =&gt; toHexString(hash.charCodeAt(i))).join("");
+  return s;
+}
+
+exports.hashFile = md5File;</pre>
+
+<h3 id="main.js">main.js</h3>
+
+<p>Finalmente, atualizamos o main.js para importar estes dois módulos e usá-los:</p>
+
+<pre class="brush: js">var filepicker = require("./filepicker.js");
+var md5 = require("./md5.js");
+
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png"
+  },
+  onClick: function() {
+    console.log(md5.hashFile(filepicker.promptForFile()));
+  }
+});</pre>
+
+<p>Você pode distribuir estes módulos para outros desenvolvedores, também. Eles podem copia-los em algum lugar do add-on, e inclui-los usando <code>require()</code> do mesmo modo.</p>
+
+<h3 id="Aprendendo_Mais">Aprendendo Mais</h3>
+
+<p>Para ver alguns módulos que as pessoas já desenvolveram, veja a página <a href="https://github.com/mozilla/addon-sdk/wiki/Community-developed-modules">community-developed</a>. Para aprender como usar módulos de terceiros em seu próprio código, veja o tutorial<a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox"> adicionando itens de menu</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html
new file mode 100644
index 0000000000..9190e825ab
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html
@@ -0,0 +1,155 @@
+---
+title: Começando (jpm)
+slug: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_(jpm)
+tags:
+  - Add-on SDK
+  - JPM
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Getting_Started_(jpm)
+---
+<div class="note">
+<p>O Add-on SDK inclui uma ferramenta de linha de comando que você usa para inicializar, executar, testar, e empacotar add-ons. A ferramenta de linha de comando atual é chamada de jpm, e é baseada no <a href="http://nodejs.org/">Node.js</a>. Ela substitui a ferramenta antiga cfx.</p>
+
+<p>Você pode usar o jpm do Firefox 38 em diante.</p>
+
+<p>Este artigo descreve como desenvolver usando jpm.</p>
+</div>
+
+<p>Este tutorial ensina a criação de uma add-on simples usando o SDK.</p>
+
+<h2 id="Pré-requisitos"><span class="short_text" id="result_box" lang="pt"><span class="hps">Pré-requisitos</span></span></h2>
+
+<p>Para criar add-ons para Firefox usando o SDK, você precisará:</p>
+
+<ul>
+ <li>Firefox versão 38 ou anteriores. Se você precisar trabalhar com versões anteriores do Firefox, você precisará usar a ferramenta cfx. Veja as instruções em <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started">getting started with cfx</a>.</li>
+ <li>a ferramenta de linha de comando jpm. Veja instruções para <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#Installation">instalação do jpm</a>. Uma vez que você fez isso, <span class="short_text" id="result_box" lang="pt"><span class="hps">você vai</span> <span class="hps">estar a olhar para</span> <span class="hps">um prompt de comando</span><span>.</span></span></li>
+</ul>
+
+<h2 id="Inicializando_um_add-on_vazio">Inicializando um add-on vazio</h2>
+
+<p>No promp de comando, crie um novo diretório. Navegue até ele, digite <code>jpm init</code>, e tecle enter:</p>
+
+<pre>mkdir my-addon
+cd my-addon
+jpm init
+</pre>
+
+<p>Você será instado à fornecer algumas informações para seu add-on: isso será usado para criar o arquivo <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> do seu add-on. Por enquanto, apenas pressione enter para aceitar o padrão para cada propriedade. Para mais informação sobre <code>jpm init</code>, veja o <a href="/en-US/Add-ons/SDK/Tools/jpm#Command_reference">jpm command reference</a>.</p>
+
+<p>Uma vez que você forneceu um valor ou aceitou o padrão para estas propriedades, será apresentado a você o conteúdo completo do "package.json" e instado a aceitá-lo.</p>
+
+<h2 id="Implementando_o_add-on">Implementando o add-on</h2>
+
+<p>Agora você pode escrever o código do add-on. A menos que você mudou o valor de entrada ("main" no package.json), ele vai no arquivo "index.js" na raiz de seu add-on. Este arquivo foi criado para você no passo anterior. Abra-o e adicione o seguinte código:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("http://www.mozilla.org/");
+}
+</pre>
+
+<div class="note">
+<p>Note que os "pontos de entrada" padrões para "index.js" no jpm, signifca que seu arquivo principal é "index.js", e é encontrado diretamente na raiz do seu add-on.</p>
+
+<p>No cfx, o ponto de entrada padrão para "main.js", e é localizado no diretório "lib" na raiz no add-on.</p>
+</div>
+
+<p>Salve o arquivo.</p>
+
+<p>Próximo, crie um diretório chamado "data" na raiz do add-on, e salve estes três ícones no diretório "data":</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Volte ao promp de comando, digite:</p>
+
+<pre>jpm run</pre>
+
+<p>Este é o comando jpm para executar uma nova instância do Firefox com seu add-on instalado.</p>
+
+<p>Quando o Firefox lança, no canto superior direito do navegador você verá um ícone com o logotipo do Firefox. Clique no ícone, e uma nova tab abrirá com o site <a href="http://www.mozilla.org/" rel="noreferrer">http://www.mozilla.org/</a> carregado.</p>
+
+<p>Isso é tudo que este add-on faz. Ele usa dois módulos SDK: o módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que lhe permite adicionar botões ao navegador, e o módulo tab, que lhe permite executar operações básicas com o módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Neste caso, nós criamos um botão cujo ícone é o ícone do Firefox, e adicionamos um manipulado de click que carrega a página do Mozilla na nova tab.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Tente editar este arquivo. Por exemplo, nós poderíamos mudar a página que está sendo carregada:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}</pre>
+
+<p>No promp de comando, execute <code>jpm run</code> novamente. Desta vez clicando lhe levará para <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<h2 id="Empacotando_o_add-on">Empacotando o add-on</h2>
+
+<p>Quando você terminou o add-on e estiver preparado para distribui-lo, você precisará empacotá-lo como um arquivo XPI. Esta é a forma instalável dos add-ons do Firefox. Você pode distribuir os arquivos XPI por si mesmo ou publicá-los em <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> então outros usuários podem baixar eles.</p>
+
+<p>Para construir um XPI, apenas execute o comando <code>jpm xpi</code> do diretório do add-on:</p>
+
+<pre>jpm xpi
+</pre>
+
+<p>Você deveria ver uma mensagem como:</p>
+
+<pre>JPM info Successfully created xpi at /path/to/getting-started/@getting-started.xpi
+</pre>
+
+<p>Para testar que isso funciona, tente instalar o arquivo XPI em sua própria instalação do Firefox. Você pode fazer isso pressionando a combinação de teclas Ctrl+O (Cmd+O no Mac) de dentro do Firefox, ou selecionando o menu "Open" do menu "Arquivo" do Firefox. Isso trará uma caixa de diálogo de seleção de arquivo: navegue para o arquivo "@getting-started.xpi", abra-o e siga o prompt para instalar o add-on.</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Neste tutorial nós construímos e empacotamos um add-on usando três comandos:</p>
+
+<ul>
+ <li><code>jpm init</code> para inicializar um modelo de add-on vazio</li>
+ <li><code>jpm run</code> para executar uma nova instância do Firefox com o add-on instalado, então nós testamos ele</li>
+ <li><code>jpm xpi</code> para empacotar o add-on em um arquivo XPI para distribuição</li>
+</ul>
+
+<p>Há três comandos principais que você usará quando desenvolvendo add-ons com SDK. Há documentação abrangente no <a href="/en-US/Add-ons/SDK/Tools/jpm" rel="noreferrer">reference documentation</a> cobrindo todos os comandos  que você pode usar e todas as opções que eles levam.</p>
+
+<p>O código do add-on por si usa dois módulos SDK, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> e <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Há documentação de referência para todas as APIS do SDK tanto as de <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">alto nível</a> quanto as de <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">baixo nível</a>.</p>
+
+<h2 id="O_que_vem_agora">O que vem agora?</h2>
+
+<p>Para ter uma ideia das coisas que você pode fazer com as APIs do SDK, tente trabalhar com alguns dos <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutoriais</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/index.html
new file mode 100644
index 0000000000..6d5484bc46
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/index.html
@@ -0,0 +1,144 @@
+---
+title: Tutoriais
+slug: Mozilla/Add-ons/SDK/Tutorials
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
+---
+<p>Esta página lista artigos úteis e práticos sobre como executar tarefas específicas usando o SDK.</p>
+
+<hr>
+<h3 id="Começando">Começando</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Installation">Instalação</a></dt>
+ <dd>Download, instalar, e inicializar o SDK no Windows, OS X e Linux.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Solução de problemas </a></dt>
+ <dd>Algumas dicas para resolver problemas comuns e conseguir mais ajuda.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Come%C3%A7ando">Começando </a></dt>
+ <dd>Criação passo-a-passo de um add-on simples com o SDK.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Criando_interfaces_de_usuário"><a name="create-user-interfaces">Criando interfaces de usuário</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Adicionando um botão de barra de ferramenta</a></dt>
+ <dd>Anexe um botão à barra de ferramentas de add-on do Firefox.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Adicionar_uma_item_de_menu_ao_Firefox">Adicione um item de menu ao Firefox</a></dt>
+ <dd>Adicione itens ao menu principal do Firefox.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Mostrar_um_Popup">Mostre um popup</a></dt>
+ <dd>Mostre um diálogo popup implementado com HTML e JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Adicione_um_Item_ao_Menu_de_Contexto">Adicione um item ao menu de contexto</a></dt>
+ <dd>Adicione itens ao menu de contexto do Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Interagindo_com_o_navegador"><a name="interact-with-the-browser">Interagindo com o navegador</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Abra_uma_P%C3%A1gina_Web">Abra uma página</a></dt>
+ <dd>Abra uma página web em um novo navegador ou janela usando o módulo tabs, e acesse seu conteúdo.</dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/captura_de_carregamento_da_pagina">Observando páginas carregadas</a></dt>
+ <dd>Use o módulo tabs para conseguir notificação quando novas páginas são carregadas, e acesse seu conteúdo.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/SDK/Tutorials/Lista_de_Tabs_Abertas">Capturando a lista de tabs abertas</a></dt>
+ <dd>Use o módulo tab para interagir pelas tabs atualmente abertas, e acesse seu conteúdo.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Modificando_páginas_web"><a name="modify-web-pages">Modificando páginas web</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modificar páginas web baseado na URL</a></dt>
+ <dd>Crie um filtro para páginas web baseado em sua URL: sempre que uma página web cuja URL combinar com o filtro carregado, executa um script espeficado nela.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modificar a página web ativa</a></dt>
+ <dd>Carrega dinamicamente um script dentro da página web ativa atualmente.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Técnicas_de_desenvolvimento"><a name="development-techniques">Técnicas de desenvolvimento</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Logging">Restro de log</a></dt>
+ <dd>Registra mensagens para o console para propósito de diagnóstico.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Criando módulos reutilizáveis</a></dt>
+ <dd>Estruture seu add-on em módulos separados deixando mais fácil o desenvolvimento, depuração e manutenção. Crie pacotes reutilizáveis contendo seus módulos, assim outros desenvolvedores de add-on podem usá-los também.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Teste de unidade </a></dt>
+ <dd>Escrevendo e executando teste de unidade usando framework de teste do SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome authority </a></dt>
+ <dd>Conseguindo acesso ao objeto Components, permitindo a seu add-on carregar e usar qualquer objeto XPCOM.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Criando event targets </a></dt>
+ <dd>Permite aos objeto que você define emitir seus próprios eventos.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Observando load e unload </a></dt>
+ <dd>Receba notificações quando seu add-on é caregado ou descarregado pelo Firefox, e passa argumentos do seu add-on a partir da linha de comando.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Usando módulos de terceiros</a></dt>
+ <dd>Instale e use módulos adicionais que não são fornecidos com o SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localização </a></dt>
+ <dd>Escrever código localizável.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Desenvolvimento mobile</a></dt>
+ <dd>Develop add-ons for Firefox Mobile on Android.</dd>
+ <dt><a href="/en-US/Add-ons/Add-on_Debugger">Depuração do Add-on</a></dt>
+ <dd>Depure o JavaScript do seu add-on.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Colocando_tudo_junto"><a name="putting-it-together">Colocando tudo junto</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on Annotator</a></dt>
+ <dd>Um guia para um add-on relativamente complexo.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/l10n/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/l10n/index.html
new file mode 100644
index 0000000000..4a762bda9b
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/l10n/index.html
@@ -0,0 +1,380 @@
+---
+title: Localização
+slug: Mozilla/Add-ons/SDK/Tutorials/l10n
+tags:
+  - Add-on SDK
+  - Localização
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/l10n
+---
+<p>O SDK suporta localização de strings que aparecem no:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_JavaScript">o código JavaScript principal do seu add-on</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_HTML">arquivos HTML empacotados com seu add-on</a></li>
+ <li><a href="/en-US/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_Preferences">os campos <code>title</code> e <code>description</code> das preferências do seu add-on's</a>.</li>
+</ul>
+
+<p>Ele, ainda, não suporta localização de conteúdo CSS ou Scripts.</p>
+
+<h2 id="Strings_de_Localização">Strings de Localização</h2>
+
+<p>Strings traduzidas são mantidas em um diretório chamado "locale" no diretório principal do seu add-on, um arquivo para cada locale. Os arquivos:</p>
+
+<ul>
+ <li>use o formato <a href="http://en.wikipedia.org/wiki/.properties"><code>.properties</code></a></li>
+ <li>são chamados "xx-YY.properties", onde "xx-YY" é o nome da<a href="https://wiki.mozilla.org/L10n:Locale_Codes"> localidade</a> em questão</li>
+ <li>contém uma entrada para cada string que você quer localizar, consistindo de um identificador para a string e sua tradução para aquela localidade, no formado <code>identificador=tradução</code>.</li>
+ <li>precisa usar UTF-8 sem codificação BOM</li>
+</ul>
+
+<p>Suponha que seu add-on contém uma única string localizável, representada em Inglês como "Hello!", e você quer suprir com localizações US English e Francês.</p>
+
+<p>Você adiciona dois arquivos ao diretório "locale":</p>
+
+<pre>my-addon/
+         data
+         lib
+         locale/
+                en-US.properties
+                fr-FR.properties
+</pre>
+
+<p>"en-US.properties" contém isto:</p>
+
+<pre>hello_id= Hello!
+</pre>
+
+<p>"fr-FR.properties" contém isto:</p>
+
+<pre>hello_id= Bonjour !
+</pre>
+
+<p>Agora que sempre que em seu código JavaScript ou HTML pedir  ao sistema de localização pela tradução do identificador <code>hello_id</code>, ele pegará a tradução correta para a localidade atual.</p>
+
+<h2 id="Usando_Strings_de_Localização_no_HTML">Usando Strings de Localização no HTML</h2>
+
+<div class="note">
+<p>Este exemplo usa a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que está disponível somente do Firefox 29 em diante.</p>
+</div>
+
+<p>Para referenciar uma string localizada do HTML, adicione um atributo <code>data-l10n-id</code> à tag HTML onde você quiser que a string localizada apareça, e atribua o identificador a ele:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1 data-l10n-id="hello_id"&gt;&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Então você pode usar o arquivo HTML para construir sua interface, por exemplo dentro de um painel:</p>
+
+<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({
+  id: "localized-hello",
+  label: "Localized hello",
+  icon: "./icon-16.png",
+  onClick: function() {
+    hello.show();
+  }
+});
+
+var hello = require("sdk/panel").Panel({
+  height: 75,
+  width: 150,
+  contentURL: require("sdk/self").data.url("my-panel.html")
+});</pre>
+
+<p>Dados os arquivos locale para "en-US" e "fr-FR" que fornece uma tradução para o <code>hello_id</code>, o painel agora mostrará o "Hello!" ou "Bonjour !", de acordo com a localidade atual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7663/bonjour.png" style="height: 160px; width: 255px;"><img alt="" src="https://mdn.mozillademos.org/files/7665/hello.png" style="height: 160px; width: 255px;"></p>
+
+<p>A tradução é inserida dentro do nó que tem o atributo<code> data-l10n-id</code>. Qualquer conteúdo anteriormente existente é substituído.</p>
+
+<p>A string é inserida como texto, então você não pode inserir HTML usando declarações como:</p>
+
+<pre>hello_id= &lt;blink&gt;Hello!&lt;/blink&gt;
+</pre>
+
+<h3 id="Localizando_Atributos_de_Elementos">Localizando Atributos de Elementos</h3>
+
+<div class="geckoVersionNote">Esta característica é nova no Firefox 39</div>
+
+<p><br>
+ Você pode localizar certos atributos de elementos com um l10n-id configurando seu valor com o l10-id.attributeName no arquivo da propriedade como isto:</p>
+
+<pre>hello_id.accesskey= H</pre>
+
+<p>Os seguintes atributos são suportados:</p>
+
+<ul>
+ <li><strong>accesskey</strong></li>
+ <li><strong>alt</strong></li>
+ <li><strong>label</strong></li>
+ <li><strong>title</strong></li>
+ <li><strong>placeholder</strong></li>
+</ul>
+
+<p><span id="result_box" lang="pt"><span class="hps">Além disso, a</span> <span class="hps">localização do</span>s atributos <span class="hps">ARIA</span> <span class="hps">aria</span><span>-label,</span> <span class="hps">aria</span><span class="atn">-</span><span>valuetext</span> <span class="hps">e</span> <span class="hps">aria</span><span class="atn">-</span><span>moz</span><span class="atn">-</span><span>dica</span> <span class="hps">são suportados</span> <span class="hps">com os mesmos</span> apelidos que <span class="hps">no</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>:</span></span></p>
+
+<ul>
+ <li><strong>ariaLabel</strong></li>
+ <li><strong>ariaValueText</strong></li>
+ <li><strong>ariaMozHint</strong></li>
+</ul>
+
+<h2 id="Usando_Strings_de_Localização_no_JavaScript">Usando Strings de Localização no JavaScript</h2>
+
+<p>Para referenciar Strings de Localização do código principal do seu add-on, você faz isso:</p>
+
+<pre class="brush: js">var _ = require("sdk/l10n").get;
+console.log(_("hello_id!"));</pre>
+
+<p><span>A atribuição de "_" em particular não é requerida, mas é uma convenção da ferramente <a href="https://www.gnu.org/software/gettext/gettext.html">gettext </a>e torna possível trabalhar com ferramentas existentes que esperam "_" para indicar Strings de Localização.</span></p>
+
+<ol>
+ <li>Importe o módulo <code>l10n</code>, atribua sua função <code>get</code> o "<code>_</code>" (underscore).</li>
+ <li>Envolva todas as referências a Strings de Localização com uma função <code>_()</code>.</li>
+</ol>
+
+<p>Se você executar ela você verá a saída esperada para a localidade atual:</p>
+
+<pre>info: Hello!
+</pre>
+
+<pre>info: Bonjour !
+</pre>
+
+<p>Observe que você não pode <code>require()</code> módulos nos scripts de conteúdo, você ainda não pode referenciar strings de localização nos scripts de conteúdo.</p>
+
+<h3 id="Plurais">Plurais</h3>
+
+<p>O módulo <code>l10n</code> suporta formas plurais. Diferentes línguas tem diferentes regras para formação de plurais. Por exemplo, Inglês tem duas formas: uma forma singular para "one", e uma forma plural para "everything else, including zero":</p>
+
+<pre>one tomato
+no tomatoes
+two tomatoes
+</pre>
+
+<p>Mas a Russa tem diferentes formas para números terminados em 1 (exceto 11), números terminados em 2-4 (exceto 12-14) e outros números:</p>
+
+<pre>один помидор     // one tomato
+два помидора     // two tomatoes
+пять помидоров   // five tomatoes
+</pre>
+
+<p>O SDK usa dados do <a href="http://cldr.unicode.org/index">Unicode CLDR</a> para descrever as diferentes formas de plural usadas pelas diferentes línguas.</p>
+
+<h4 id="Formas_Plurais_do_Unicode_CLDR">Formas Plurais do Unicode CLDR</h4>
+
+<p>O projeto Unicode CLDR define um esquema que descreve a regras de plural de uma língua em particular. Neste esquema uma  língua mapeia cada abrangência distinta de números para um ou mais formas, identificado pelas categorias: <em>zero, one, two, few, many, </em>e <em>other</em>.</p>
+
+<p>Inglês tem duas formas, que podem ser descritas pelo mapeamento "1" para "one" e "everything else" para "other":</p>
+
+<pre>one   → n is 1;
+other → everything else
+</pre>
+
+<p>A Russa usa quatro formas, que podem ser descritas como se segue:</p>
+
+<pre>one   → n mod 10 is 1 and n mod 100 is not 11;
+few   → n mod 10 in 2..4 and n mod 100 not in 12..14;
+many  → n mod 10 is 0 or n mod 10 in 5..9 or n mod 100 in 11..14;
+other → everything else
+</pre>
+
+<p>As regras de plural para todas as línguas podem ser encontrada na página de <a href="http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html">Regras para Plural das Línguas</a> do CLDR (embora esta tabela esteja desatualizada se comparada com a <a href="http://unicode.org/repos/cldr/trunk/common/supplemental/plurals.xml">CLDR XML source</a>).</p>
+
+<h4 id="Formas_Plurais_no_SDK">Formas Plurais no SDK</h4>
+
+<p>No código, você fornece uma parâmetro extra ao lado do identificador, descrevendo quantos itens há:</p>
+
+<pre class="brush: js">var _ = require("sdk/l10n").get;
+console.log(_("tomato_id"));
+console.log(_("tomato_id", 1));
+console.log(_("tomato_id", 2));
+console.log(_("tomato_id", 5));
+console.log(_("tomato_id", .5));</pre>
+
+<p>No arquivo <code>.properties</code> para cada língua você pode definir uma localização diferente para cada forma de plural possível naquela língua, usando palavras reservadas do CLDR. Então no Inglês nós teríamos duas localizações de plural (observe que a categoria "other" <strong>não</strong> leva palavra reservada do CLDR:</p>
+
+<pre># en-US translations
+tomato_id[one]= %d tomato
+tomato_id= %d tomatoes
+</pre>
+
+<p>Na Russa nós teríamos quatro localizações de plural:</p>
+
+<pre># ru-RU translations
+tomato_id[one]= %d помидор
+tomato_id[few]= %d помидора
+tomato_id[many]= %d помидоров
+tomato_id= %d помидоры
+</pre>
+
+<p>O módulo de localização por si só entende as definições CLDR para cada língua, permitindo a ele mapear, por exemplo, "2" no código e "few" no arquivo <code>ru-RU.properties</code>. Então ele pega e retorna a localização apropriada para a contagem fornecida.</p>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>O módulo <code>l10n</code> suporta placeholders, permitindo a você inserir uma string que não deveria ser localizada em uma que é. Os seguintes arquivos "en-US" e "fr-FR" ".properties" estão incluídos placeholders:</p>
+
+<pre># en-US translations
+hello_id= Hello <strong>%s</strong>!
+</pre>
+
+<pre># fr-FR translations
+hello_id= Bonjour <strong>%s</strong> !
+</pre>
+
+<p>Para usar placeholders, forneça uma string placeholder depois do identificador:</p>
+
+<pre class="brush: js">var _ = require("sdk/l10n").get;
+console.log(_("hello_id", "Bob"));
+console.log(_("hello_id", "Alice"));</pre>
+
+<p>Na localidade Inglês "en-US", isto nos é dado:</p>
+
+<pre>info: Hello Bob!
+info: Hello Alice!
+</pre>
+
+<p>No "fr-FR" nós conseguimos:</p>
+
+<pre>info: Bonjour Bob !
+info: Bonjour Alice !
+</pre>
+
+<h3 id="Ordenando_Placeholders">Ordenando Placeholders</h3>
+
+<p>Quando strings localizáveis podem levar dois ou mais placeholders, tradutores podem definir a ordem em que placeholders são inseridos, sem afetar o código.</p>
+
+<p>Primeiramente, isto é importante porque diferentes línguas tem regras diferentes para ordernar palavras. Mesmo dentro de uma mesma língua, embora traduzida, tradutores deve ter liberdade para definir a ordem.</p>
+
+<p>Por exemplo, suponha que nós queremos incluir uma string de localização designando a cidade de uma pessoa. Há dois placeholders: o nome da pessoa e o nome da cidade em que ela reside:</p>
+
+<pre class="brush: js">var _ = require("sdk/l10n").get;
+console.log(_("home_town_id", "Bob", "London"));</pre>
+
+<p>An English translator might want to choose between the following:</p>
+
+<pre>"&lt;town_name&gt; is &lt;person_name&gt;'s home town."
+</pre>
+
+<pre>"&lt;person_name&gt;'s home town is &lt;town_name&gt;"
+</pre>
+
+<p>Para escolher a primeira opção, o arquivo<code> .properties</code> pode ordenar o placeholders como:</p>
+
+<pre>home_town_id= %2s is %1s's home town.
+</pre>
+
+<p>Isso nos dá a seguinte saída:</p>
+
+<pre>info: London is Bob's home town.
+</pre>
+
+<h2 id="Usando_Strings_de_localização_em_Preferências">Usando Strings de localização em Preferências</h2>
+
+<p>Pela inclusão de uma estrutura <a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-prefs"><code>"preferences"</code> no arquivo "package.json" do seu add-on</a>, você pode definir preferências para seu add-on que o usuário pode ver e editar usando o <a href="https://support.mozilla.org/en-US/kb/Using%20extensions%20with%20Firefox#w_how-to-change-extension-settings">gerenciador de add-ons </a>do Firefox.</p>
+
+<p>Preferências tem um campo <code>title</code> obrigatório e um campo <code>description</code> opcional. Há strings que aparecem ao lado da preferência no gerenciador de Add-on, para ajudar a explicar ao usuário o que a preferência significa.</p>
+
+<ul>
+ <li>
+  <p>Para fornecer formas localizadas do title da preferência, inclua uma entrada no arquivo "properties" cujo identificador seja o nome da preferência seguido por  <code>_title</code>, e cujo valor é o título da localidade.</p>
+ </li>
+ <li>
+  <p>Para fornecer forma localizada da descrição da preferência, inclui uma entrada em seu arquivo "properties" cujo identificador é o nome da preferência seguido por <code>_description</code>, e cujo valor é a descrição da localidade.</p>
+ </li>
+</ul>
+
+<p>Por exemplo, suponha que seu "package.json" defina uma única preferência:</p>
+
+<pre>{
+    "preferences": [
+        {
+            "type": "string",
+            "name": "monster_name",
+            "value": "Gerald",
+            "title": "Name"
+        }
+    ],
+    "name": "monster-builder",
+    "license": "MPL 2.0",
+    "author": "me",
+    "version": "0.1",
+    "fullName": "Monster Builder",
+    "id": "monster-builder@me.org",
+    "description": "Build your own monster"
+}
+</pre>
+
+<p>Em seu arquivo "en-US.properties", inclua estes dois itens:</p>
+
+<pre>monster_name_title= Name
+monster_name_description= What is the monster's name?
+</pre>
+
+<p>Em seu arquivo "fr-FR.properties", inclui a tradução francesa:</p>
+
+<pre>monster_name_title= Nom
+monster_name_description= Quel est le nom du monstre ?
+</pre>
+
+<p>Agora quando o local do navegador estiver configurado para "en-US", os usuários verão este Gerenciador de Add-on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6525/preference-us.png" style="height: 77px; width: 571px;"></p>
+
+<p>Quando o local do navegador estiver configurado para "fr-FR", eles verão isto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6523/preference-french.png"></p>
+
+<p>Os tipos de preferência de <code>menulist</code> e <code>radio</code> tem opções. O atributo <code>label</code> de cada opção é mostrado para o usuário. Se o arquivo de local tem uma entrada com o valor do atributo <code>label</code> prefixado com "{name}_options." como sua chave, onde {name} é o nome da preferência, seu valor é usado como rótulo por localização.</p>
+
+<h2 id="Usando_identificadores">Usando identificadores</h2>
+
+<p>Se o sistema de localização não pode encontrar uma entrada para um identificador em particular usando a localidade atual, então ele apenas retorna o identificador por si mesmo.</p>
+
+<p>Isto tem a bonita propriedade que você pode escrever add-on localizável, inteiramente funcional sem ter que escrever qualquer arquivo local. Você pode usar somente a linguagem padrão como seu identificador, e subsequentemente fornecer arquivos <code>.properties</code> para todos os locais adicionais que você quiser suportar.</p>
+
+<p>Por exemplo, no caso acima você poderia usar "Hello!" como o identificador, e apenas ter um arquivo <code>.properties</code> para a localidade "fr-FR":</p>
+
+<pre>Hello!= Bonjour !
+</pre>
+
+<p>Então quando a localidade é "en-US", o sistema falharia ao encontrar o arquivo  <code>.properties</code> file, e retornaria "Hello!".</p>
+
+<p>Porém, essa técnica torna difícil manter um add-on que tem muitas localizações, porque você estará usando a língua padrão tanto para strings de interface quanto chaves de tradução. Isto significa que se você quiser mudar o nome de uma string na língua padrão, ou consertar a digitação, então você quebrará todos os seus arquivos de tradução.</p>
+
+<h2 id="Locale_Updater">Locale Updater</h2>
+
+<p>O addon <a href="https://github.com/downloads/ochameau/locale-updater/locale-updater.xpi">locale updater</a> torna fácil atualizar arquivos de localidade. Uma vez que você o instalou, abra o Gerenciador de Add-on, e você verá um novo botão rotulado "Update l10n" próximo a cada add-on que você instalou:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6515/locale-updater.png"></p>
+
+<p>Clique no botão e você será instado a enviar um arquivo <code>.properties</code> para aquele add-on. Se você fornecer um novo arquivo, o locale do add-on será atualizado com o novo arquivo.</p>
+
+<h2 id="Limitações">Limitações</h2>
+
+<p>A localização atual suportada é o primeiro passo  ao inteiro suporte, e contem uma série de limitações.</p>
+
+<ul>
+ <li>
+  <p>Não há suporte para scripts de conteúdo ou arquivos CSS: no momento, você pode localizar strings que aparecem nos arquivos JavaScript que podem <code>require()</code> módulos SDK e em HTML.</p>
+ </li>
+ <li>
+  <p>A configuração dos arquivos de localidade é global por um add-on. Isto significa que um módulo não pode sobreescrever uma tradução mais geral: então um módulo <code>informal.js</code> não pode especificar que "hello_id" ocorrendo em seu código deveria ser traduzida para "Hi!".</p>
+ </li>
+ <li>
+  <p>A ferramenta SDK compila os arquivos de localidade em um formato JSON quando produzindo um XPI. Isso significa que traduções não podem localizar um add-on dando o XPI sozinho, mas deve ser dado acesso ao fonte do add-on.</p>
+ </li>
+ <li>
+  <p>O desenvolvedor deve manualmente montar o conjunto de strings localizáveis compõe os arquivos de localidade.</p>
+ </li>
+</ul>
+
+<h2 id="Veja_também_-_para_desenvolvedores_que_localização_em_add-on_que_não_são_do_SDK">Veja também - para desenvolvedores que localização em add-on que não são do SDK</h2>
+
+<ul>
+ <li>Como colocar localização em páginas html, arquivos xul, e arquivos js/jsm do add-on bootstrapped: <a href="/en-US/Add-ons/Bootstrapped_extensions#Localization_%28L10n%29">Bootstrapped Extensions :: Localization (L10n)</a></li>
+ <li>XUL School Localization Tutorial: <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Localization">DTD/Entities method</a> and <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Property_Files">Properties method</a></li>
+ <li><a href="/en-US/docs/Mozilla/Localization/Localizing_an_extension">Localizing an extension</a></li>
+</ul>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/lista_de_tabs_abertas/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/lista_de_tabs_abertas/index.html
new file mode 100644
index 0000000000..d3d537037d
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/lista_de_tabs_abertas/index.html
@@ -0,0 +1,67 @@
+---
+title: Lista de Tabs Abertas
+slug: Mozilla/Add-ons/SDK/Tutorials/Lista_de_Tabs_Abertas
+tags:
+  - Add-on SDK
+  - Listando tabs abertas
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs
+---
+<div class="note">
+<p>Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado o SDK </a>e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico sobre cfx</a>.</p>
+
+<p>Este tutorial usa a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que está disponível somente do Firefox 29 em diante.</p>
+</div>
+
+<p>Para listar as tabs abertas, você pode iterar sobre o objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p>
+
+<p>O add-on a seguir adiciona um <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> que registra as URLs abertas nas tabs quando clicado:</p>
+
+<pre class="brush: js">require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    console.log(tab.url);
+}
+</pre>
+
+<p>Note que para fazer isso funcionar você precisa salvar um ícone para o botão no diretório "data" do seu add-on como "icon-15.png": você pode baixar o ícone daqui: <img alt="" src="https://mdn.mozillademos.org/files/7649/icon-16.png" style="height: 16px; width: 16px;">.</p>
+
+<p>Se você executar o add-on, carregar um grupo de tabs, e clicar no botão, você verá a saída no linha de comando do <a href="/en-US/Add-ons/SDK/Tutorials/Logging">console</a> que parece com isto:</p>
+
+<pre>info: http://www.mozilla.org/en-US/about/
+info: http://www.bbc.co.uk/
+</pre>
+
+<p>Você não consegue acesso direto a qualquer conteúdo hospedado na tab. Para acessar o conteúdo da tab você precisa anexar um script à tab usando <code>tab.attach()</code>. Este add-on anexa um script a todas as tabs abertas. O script adiciona uma borda vermelha ao documento da tab:</p>
+
+<pre class="brush: js">require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    runScript(tab);
+}
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+</pre>
+
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+
+<p>Para aprender mais sobre como trabalhar com tabs no SDK, veja a referência da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p>
+
+<p>Para aprender mais sobre execução de scripts em tabs, veja o tutorial sobre uso do <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>tab.attach()</code></a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/listening_for_load_and_unload/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/listening_for_load_and_unload/index.html
new file mode 100644
index 0000000000..5e3818036f
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/listening_for_load_and_unload/index.html
@@ -0,0 +1,60 @@
+---
+title: Capturando Load e Unload
+slug: Mozilla/Add-ons/SDK/Tutorials/Listening_for_load_and_unload
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listening_for_load_and_unload
+---
+<div class="note">
+<p><span>Para seguir este tutorial você precisará ter conhecimento <a href="/en-US/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29">básico de <code>jpm</code></a>. </span></p>
+</div>
+
+<p>Se seu add-on exporta uma função chamada <code>main()</code>, então aquela função será chamada sempre que o add-on for carregado, e será passada uma string descrevendo a razão de ele ter sido carregado bem como qualquer argumento passado para ele. Se seu add-on exporta uma função chamada <code>onUnload()</code>, então esta função será chamada quando o add-on for descarregado, e será passada uma string descrevendo a razão da descarga.</p>
+
+<p>Você não tem que usar <code>exports.main()</code> ou <code>exports.onUnload()</code>. Você pode colocar o código do seu add-on no nível superior ao invés de envolver ele em uma atribuição de função para <code>exports.main()</code>. Ele será carregado nas mesmas circunstâncias, mas você não conseguirá acesso às razões da carga ou descarga dele bem como de seus argumentos.</p>
+
+<h2 id="exports.main()">exports.main()</h2>
+
+<p>O código <code>main.js</code> do seu add-on é executado assim que ele é carregado. Ele é carregado quando ele é instalado, habilitado ou quando inicia o Firefox.</p>
+
+<p>Se seu add-on exporta uma função chamada <code>main()</code>, aquela função será chamada imediatamente depois que o <code>main.js </code>esteja completamente avaliado, e depois de todas as declarações <code>require()</code> de nível superior serem executadas (então geralmente depois de todas módulos dependentes serem carregados).</p>
+
+<div>
+<div>
+<pre><span class="brush: js">exports.main = function (options, callbacks) {};</span></pre>
+</div>
+</div>
+
+<p><code>options</code> é um objeto descrevendo os parâmetros com os quais seu add-on foi carregado</p>
+
+<h3 id="options.loadReason">options.loadReason</h3>
+
+<p><code>options.loadReason</code> é uma das seguintes strings descrevendo a razão de seu add-on ter sido carregado:</p>
+
+<pre>install
+enable
+startup
+upgrade
+downgrade
+</pre>
+
+<h2 id="exports.onUnload()">exports.onUnload()</h2>
+
+<p>Se seu add-on exporta uma função chamada <code>onUnload()</code>, aquela função será chamando quando o add-on for descarregado.</p>
+
+<div>
+<div>
+<pre><span class="brush: js">exports.onUnload = function (reason) {};</span></pre>
+</div>
+</div>
+
+<h3 id="reason">reason</h3>
+
+<p><code>reason</code> é uma das seguintes strings descrevendo a razão do add-on ter sido descarregado:</p>
+
+<pre>uninstall
+disable
+shutdown
+upgrade
+downgrade
+</pre>
+
+<p>Devido ao <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627432">bug 627432</a>, sua captura de descarga (<code style="font-size: 14px;">onUnload</code>) nunca será chamada com <code style="font-size: 14px;">uninstall</code>: ela somente é chamada com <code style="font-size: 14px;">disable</code>. Veja no comentário particular sobre este <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627432#c12">bug</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/logging/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/logging/index.html
new file mode 100644
index 0000000000..088d694408
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/logging/index.html
@@ -0,0 +1,55 @@
+---
+title: Logging
+slug: Mozilla/Add-ons/SDK/Tutorials/Logging
+tags:
+  - Add-on SDK
+  - console
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Logging
+---
+<div class="note">Para seguir este tutorial você precisa do <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">SDK instalado</a> e <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">conhecimento básico de cfx</a>.</div>
+
+<p>O objeto DOM <a href="https://developer.mozilla.org/en/DOM/console"><code>console</code></a> é útil para depuração do JavaScript. Porque os objetos DOM não estão disponíveis para o código principal do add-on, o SDK fornece seu próprio objeto global <code>console</code> com a maiorira dos mesmos métodos do do <code>console </code>DOM, incluindo métodos para registrar erros, avisos, ou mensagens informativas. Você não tem que usar <code>require()</code> qualquer coisa para conseguir acesso ao console. Ele está disponível para você.</p>
+
+<p>O método <code>console.log()</code> imprime mensagens informativas:</p>
+
+<pre class="brush: js">console.log("Hello World");
+</pre>
+
+<p>Tente:</p>
+
+<ul>
+ <li>crie um novo diretório, e navegue até ele</li>
+ <li>execute <code>cfx init</code></li>
+ <li>abra "lib/main.js" e adicione a linha acima</li>
+ <li>execute <code>cfx run</code>, então <code>cfx run</code> novamente</li>
+</ul>
+
+<p>O Firefox iniciará, e a linha a seguir aparecerá na janela de comando que você usou para executar <code>cfx run</code>:</p>
+
+<pre>info: Hello World!
+</pre>
+
+<h2 id="console_em_Scripts_de_Conteúdo"><code>console</code> em Scripts de Conteúdo</h2>
+
+<p>Você pode usar console em <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">scripts de conteúdo</a> assim como no código principal do seu add-on. O add-on a seguir registra o conteúdo do HTML de toda a tab que o usuário carregar, chamando <code>console.log()</code> dentro do script de conteúdo:</p>
+
+<pre class="brush: js">require("sdk/tabs").on("ready", function(tab) {
+  tab.attach({
+    contentScript: "console.log(document.body.innerHTML);"
+  });
+});
+</pre>
+
+<h2 id="Saída_do_console">Saída do <code>console</code></h2>
+
+<p>Se você estiver executando seu add-on da linha de comando (por exemplo, executando<code> cfx run</code> ou <code>cfx test</code>) então as mensagens do console aparece no shell de comando usado.</p>
+
+<p>Se você instalou o add-on no Firefox então as mensagens aparecerão no <a href="/en-US/docs/Tools/Browser_Console">Console do Navegador</a> do Firefox.</p>
+
+<p>Mas note que <strong>por padrão, chamadas à <code>console.log()</code> não resultarão em qualquer saída no Console de Erro por qualquer add-on instalado</strong>: isso inclui add-ons instalados usando o Add-on Builder ou usando ferramentas como <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/">Extension Auto-installer</a>.</p>
+
+<p>Veja <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels">"Logging Levels"</a> na documentação de referência para mais informações.</p>
+
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+
+<p>Para a API completa do <code>console</code>, veja sua <a href="/en-US/Add-ons/SDK/Tools/console">referência da API</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html
new file mode 100644
index 0000000000..6b8f02c265
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html
@@ -0,0 +1,137 @@
+---
+title: Modificando a Página Aberta em uma Tab
+slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab
+---
+<div class="note">
+<p>Para seguir este tutorial, você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado add-on SDK</a> e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">básico jpm</a> (Firefox 38 em diante) ou <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico do cfx</a> .</p>
+
+<p>Este tutorial usa a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que está disponível a partir do Firefox 29 em diante.</p>
+</div>
+
+<p>Para modificar uma página armazenada em uma tab em particular, carregue um ou mais <em>scripts de conteúdo</em> dentro dela usando o método attach() do objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tab</a>. A tarefa desses scripts é interagir com o conteúdo web.</p>
+
+<p>Aqui está um exemplo simples:</p>
+
+<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScript: 'document.body.style.border = "5px solid red";'
+    });
+  }
+});</pre>
+
+<p>Execute esse exemplo, salve o ícone chamado "icon-16.png" no diretório "data" do add-on. Você To run this example, save an icon file named "icon-16.png" in add-on's "data" directory. Você pode baixar este ícone: <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="height: 16px; width: 16px;">.</p>
+
+<p>This add-on creates a button with Mozilla favicon as an icon. It has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. The script is specified using the <code>contentScript</code> option, and just draws a red border around the page.</p>
+
+<p>Then open any web page in the browser window, and click the button . You should see a red border appear around the page, like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6531/tabattach-bbc.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Mantendo_o_script_de_conteúdo_em_arquivo_separado">Mantendo o script de conteúdo em arquivo separado</h2>
+
+<p>No exemplo acima, nós passamos o script de conteúdo como uma string.</p>
+
+<p>A menos que o script seja extremamente simples, o melhor é manter o script em um arquivo separado no diretório <code>data</code> do add-on. Isso deixa o código mais fácil para manter, depurar, e revisar. Faça isto, forneça a opção <code>contentScriptFile</code> não <code>contentScript</code>, cujo valor é uma URL apontando para um ou mais arquivos de script de conteúdo.</p>
+
+<p>Por exemplo, se nós salvarmos o script acima no diretório data do add-on em um arquivo chamado my-script.js:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+  }
+});
+</pre>
+
+<p>Você pode carregar mais de um script, e os scripts podem interagir diretamente um com o outro. Então você pode carregar o <a href="http://jquery.com/">jQuery</a>, e então seu script de conteúdo pode usá-lo.</p>
+
+<h2 id="Carregue_vários_arquivos_de_script_de_conteúdo">Carregue vários arquivos de script de conteúdo</h2>
+
+<p>O dado atribuído ao <code>contentScriptFile</code> pode ser um array. Os scripts serão carregados na mesma ordem em que estiverem no array.</p>
+
+<p>No exemplo a seguir, nós carregaremos dois scripts, <code>first.js</code> &amp; <code>second.js</code>. Ambos serão executados no mesmo contexto, então tudo publicamente definido no <code>first.js</code> será acessível do <code>second.js</code>.</p>
+
+<pre class="brush: js">// lib/main.js
+
+var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+require("sdk/ui/button/action").ActionButton({
+  id: "load-several",
+  label: "load several scripts",
+  icon: "./icon-16.png",
+  onClick: function () {
+    tabs.activeTab.attach({
+      contentScriptFile: [self.data.url('first.js'),
+                          self.data.url('second.js')]
+    });
+  }
+});
+</pre>
+
+<h2 id="Comunicando_com_o_script_de_conteúdo">Comunicando com o script de conteúdo</h2>
+
+<p>O script do seu add-on e os scripts de conteúdo não podem acessar diretamente as variáveis ou funções um do outro, mas eles podem trocar mensagens.</p>
+
+<p>Para enviar mensagens de um lado para o outro, são usados o emitente de chamadas <code>port.emit()</code> e o recebendor <code>port.on()</code>.</p>
+
+<ul>
+ <li>No script de conteúdo, <code>port</code> é uma propriedade global do objeto <code>self</code>.</li>
+ <li>No script do add-on, <code>tab.attach()</code> retorna um objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a> contendo a propriedade <code>port</code> que você usa para enviar mensagens ao script de conteúdo.</li>
+</ul>
+
+<p>Vamos reescrever o exemplo acima para passar mensagens de um add-on para o script de conteúdo.</p>
+
+<p>O script de conteúdo agora precisa parecer com isto:</p>
+
+<pre class="brush: js">// "self" é um objeto global no script de conteúdo
+// Espera por um "drawBorder"
+self.port.on("drawBorder", function(color) {
+  document.body.style.border = "5px solid " + color;
+});
+</pre>
+
+<p>No script do add-on, nós enviaremos ao script de conteúdo uma mensagem "drawBorder" usando o objeto retornado de <code>attach()</code>:</p>
+
+<pre class="brush: js">var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    var worker = tabs.activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+    worker.port.emit("drawBorder", "red");
+  }
+});
+</pre>
+
+<p>A mensagem <code>drawBorder</code> não é uma mensagem embutida, é uma que este add-on definiu na chamada de <code>port.emit()</code>.</p>
+
+<h2 id="Injetando_CSS">Injetando CSS</h2>
+
+<p>Diferente da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, <code>tab.attach()</code> não permite a você injetar CSS diretamente na página.</p>
+
+<p>Para modificar o estilo de uma página, você tem que usar JavaScript, como no exemplo acima.</p>
+
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+
+<p>Para aprender mais sobre como trabalhar com tabs no SDK, veja o tutorial <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrindo uma Página da Web</a>, O tutorial <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">Lista de Tabs Abertas</a>, e a referência da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p>
+
+<p>Para aprender mais sobre scripts de conteúdo, veja o guia de <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">scripts de conteúdo</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html
new file mode 100644
index 0000000000..4e846d75c7
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html
@@ -0,0 +1,228 @@
+---
+title: Modificando Página Web Baseado na URL
+slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL
+tags:
+  - Add-on SDK
+  - content scripts
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL
+---
+<div class="note">Para seguir este tutorial, você precisará <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalar o SDK</a> e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">básico de jpm</a> (Firefox 38 em diante) ou <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de cfx</a>.</div>
+
+<p>Para modificar qualquer página que combine com um padrão particular (por exemplo, "http://example.org/") a medida que elas são carregadas, use o módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>.</p>
+
+<p>Para criar um page-mod, você precisa de duas coisas:</p>
+
+<ul>
+ <li>Um ou mais <em>content scripts</em>(script de conteúdo) para executar cuja tarefa é interagir com o conteúdo web.</li>
+ <li>Um ou mais <em>patterns(padrões)</em> para combinar com URLs que você quer modificar.</li>
+</ul>
+
+<p>Um trecho simples de códingo onde o script de conteúdo é fornecido com a opção <code>contentScript</code> e o padrão de busca da URL é dado pela opção <code>include</code> como a seguir:</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScript: 'document.body.innerHTML = ' +
+                 ' "&lt;h1&gt;Page matches ruleset&lt;/h1&gt;";'
+});
+</pre>
+
+<p>Faça o seguinte:</p>
+
+<ul>
+ <li>Crie um novo diretório navegue para ele.</li>
+ <li>Execute <code>jpm init </code>ou <code>cfx init</code></li>
+ <li><code>Abra o arquivo index.js</code> e adicione o código acima (<code>lib/main.js se estiver usando</code> <code>cfx</code>)</li>
+ <li>Execute <code>jpm run </code>ou<code> cfx run</code>.</li>
+ <li>Abra no navegador o site <a href="http://www.ietf.org">ietf.org</a>.</li>
+</ul>
+
+<p>Abaixo é o que você deve ver.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6537/pagemod-ietf.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Especificando_o_Padão_a_Combinar">Especificando o Padão a Combinar</h2>
+
+<p>O padrão de combinação usa a síntaxe <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern"><code>match-pattern</code></a>. Você pode passar uma única string como padrão a combinar ou um array.</p>
+
+<h2 id="Mantendo_o_Conteúdo_do_Script_em_um_Arquivo_Separado">Mantendo o Conteúdo do Script em um Arquivo Separado</h2>
+
+<p>No exemplo acima, nós fornecemos o script de conteúdo como uma string.</p>
+
+<p>A menos que o script seja extremamente simples, é melhor manter o script em um arquivo separado. Isso torna o código mais fácil para manter, depurar, e revisar. Para fazer isso, você precisa:</p>
+
+<ul>
+ <li>Salvar o script no diretório "<code>data</code>" do add-on.</li>
+ <li>Use a opção <code>contentScriptFile</code> ao invés de <code>contentScript</code> e passe para ela a URL do script que pode ser obtida usando <code>self.data.url("my-script.js")</code>. A partir do Firefox 34, você pode usar <code>"./my-script.js"</code>.</li>
+</ul>
+
+<p>Por exemplo, se você salvar o script acima no diretório data do add-on em um arquivo chamado <code>my-script.js</code>:</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+// Importe a API self
+var self = require("sdk/self");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js")
+});</pre>
+
+<p>Ou a partir do Firefox 34:</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: "./my-script.js"
+});</pre>
+
+<h2 id="Carregando_Múltiplos_Scripts_de_Conteúdo">Carregando Múltiplos Scripts de Conteúdo</h2>
+
+<p>Você pode carregar mais do que um script, e eles podem interagir um com o outro.</p>
+
+<p>Por exmeplo, você poderia reescrever o <code>my-script.js</code> para usar o jQuery.</p>
+
+<pre class="brush: js">$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");
+</pre>
+
+<p>Então baixe o jQuery para o diretório <code>data</code> do add-on, e carregue o script e o jQuery juntos (tenha certeza de carregar o jQuery primeiro).</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+// Importe a API self
+var self = require("sdk/self");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")]
+});
+</pre>
+
+<p>Você pode usar ambos <code>contentScript</code> e <code>contentScriptFile</code> no mesmo page-mod. Se você fizer isto, o script carregado usando <code>contentScriptFile</code> são carregados primeiro.</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+// Importe a API self
+var self = require("sdk/self");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("jquery-1.7.min.js"),
+  contentScript: '$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");'
+});
+</pre>
+
+<p>Note, porém, que você não pode carregar um script de um site web. O script deve ser carregado do <code>data</code>.</p>
+
+<h2 id="Comunicando_com_o_Script_de_Conteúdo">Comunicando com o Script de Conteúdo</h2>
+
+<p>Seu script do add-on e o script de conteúdo não podem acessar diretamente a variável de um ou outro ou chamar função dos outros, mas eles podem enviar mensagens um para o outro.</p>
+
+<p>Para enviar mensagens de um lado para o outro, use o emitente de chamadas <code>port.emit()</code> e receba respostas usando <code>port.on()</code>.</p>
+
+<ul>
+ <li>No script de conteúdo, <code>port</code> é uma propriedade do objeto global <code>self</code>.</li>
+ <li>No script do add-on, você precisa capturar evento no <code>onAttach</code> event passando um objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a> que contém a <code>port</code>.</li>
+</ul>
+
+<p>Vamos reescrever o exemplo acima para passar uma mensagem do add-on para o script de conteúdo. A mensagem conterá o novo conteúdo para inserir dentro do documento</p>
+
+<p>O script de conteúdo agora precisa parecer com isto:</p>
+
+<pre class="brush: js">// "self" é um objeto global no script de conteúdo
+// Espera pelas mensagens, e substitui o conteúdo do
+// documento com a mensagem recebida
+self.port.on("replacePage", function(message) {
+  document.body.innerHTML = "&lt;h1&gt;" + message + "&lt;/h1&gt;";
+});
+</pre>
+
+<p>No script do add-on, nós enviaremos ao script de conteúdo uma mensagem dentro do <code>onAttach</code>.</p>
+
+<pre class="brush: js">// Importe a API page-mod
+var pageMod = require("sdk/page-mod");
+// Importe a API self
+var self = require("sdk/self");
+
+// Crie um page-mod
+// Ele executará um script toda vez que uma URL ".org" é carregada
+// O script substitui o conteúdo da página por uma mensagem
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js"),
+  // Envia ao script de conteúdo uma mensagem dentro de onAttach
+  onAttach: function(worker) {
+    worker.port.emit("replacePage", "Page matches ruleset");
+  }
+});
+</pre>
+
+<p>A mensagem <code>replacePage</code> não é uma mensagem embutida: é uma mensagem definida pelo add-on na chamada do <code>port.emit()</code>.</p>
+
+<div>
+<h2 id="Injetando_CSS">Injetando CSS</h2>
+
+<p><strong>Note que a característica descrita nesta seção é experimental no momento. Nós devemos provavelmente continuar suportando essa característica, mas os detalhes da API devem mudar.</strong></p>
+
+<p>Em vez de injetar JavaScript na página, você pode injetar CSS definindo a opção do <code>contentStyle</code> do mod-page.</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyle: "body {" +
+                "  border: 5px solid green;" +
+                "}"
+});
+</pre>
+
+<p>Como com o <code>contentScript</code>, há uma opção correspondente para <code>contentStyleFile</code> que leva uma URL de um arquivo CSS situado no diretório "data"; é uma boa prática usar essa opção ao invés de <code>contentStyle</code> se o CSS é muito complexo.</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: require("sdk/self").data.url("my-style.css")
+});
+</pre>
+
+<p>Ou, a partir do Firefox 34, você pode usar a versão mais simples:</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: "./my-style.css"
+});</pre>
+</div>
+
+<h2 id="Aprendendo_mais">Aprendendo mais</h2>
+
+<p>Para aprender mais sobre o <code>page-mod</code>, veja a referência da API<a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"> page</a>. Em particular, o construtor <code>PageMod</code> leva várias opções adicionais para controlar seu comportamento:</p>
+
+<ul>
+ <li>
+  <p>Por padrão, script de conteúdo não são anexados a qualuqer tab que já esteja aberta quando o page-mod é criado, e são anexados à iframes bem como documentos superiores. Para controlar esse comportamento use a opção <code>attachTo</code>.</p>
+ </li>
+ <li>
+  <p>Defina valores somente leitura acessíveis ao script de conteúdo usando a opção<code> contentScriptOptions</code>.</p>
+ </li>
+ <li>
+  <p>Por padrão, o script de conteúdo são anexados depois de todo o (DOM, JS, CSS, imagens) para a página ter sido carregado, no momento o evento <a href="/en-US/docs/Web/API/GlobalEventHandlers.onload">window.onload</a> dispara. Para controlar esse comportamento, use a opção <code>contentScriptWhen</code>.</p>
+ </li>
+</ul>
+
+<p>Para aprender mais sobre o script de conteúdo,, veja o guia <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/mostrar_um_popup/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/mostrar_um_popup/index.html
new file mode 100644
index 0000000000..b66c9fb06a
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/mostrar_um_popup/index.html
@@ -0,0 +1,165 @@
+---
+title: Mostrar um Popup
+slug: Mozilla/Add-ons/SDK/Tutorials/Mostrar_um_Popup
+tags:
+  - Add-on SDK
+  - Painel
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup
+---
+<div class="note">
+<p>Para seguir este tutorial você precisará ter <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Installation">instalado o SDK</a> e ter conhecimento <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Getting_Started_With_cfx">básico sobre cfx</a>.</p>
+
+<p>Este tutorial usa a API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que está disponível somente do Firefox 29 em diante.</p>
+</div>
+
+<p>Para mostrar um popup de diálogo, use o módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>. Um painel de conteúdo é definido usando HTML. Você pode executar scripts no painel: embora o script em execução no painel não pode acessar diretamente o código de seu add-on, você pode trocar mensagens entre o script do painel e o código do add-on.</p>
+
+<p>Neste tutorial nós criaremos um add-on que adiciona um <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button </a>à barra de ferramentas que mostra um painel quando clicado. O painel contém apenas um elemento <code>&lt;textarea&gt;:</code>quando o usuário aperta a tecla <code>return</code>, o conteúdo da <code>&lt;textarea&gt; </code>é enviado ao código principal do add-on. O código principal do add-on <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Logging">repassa a mensagem ao console</a>. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7647/panel.png" style="display: block; margin-left: auto; margin-right: auto;">O add-on consiste em seis arquivos:</p>
+
+<ul>
+ <li><code>main.js</code>: o código principal do addon, que cria o botão e o painel</li>
+ <li><code>get-text.js</code>: o conteúdo do script que interage com o conteúdo do painel</li>
+ <li><code>text-entry.html</code>: o conteúdo do painel em si, especificado como HTML</li>
+ <li><code>icon-16.png</code>, <code>icon-32.png</code>, and <code>icon-64.png</code>: ícone para o botão em três tamanhos diferentes</li>
+</ul>
+
+<p>O "main.js" se parece com isso:</p>
+
+<pre class="brush: js">var data = require("sdk/self").data;
+// Constrói um painel, carrega seu conteúdo do arquivo
+// "text-entry.html" no diretório "data", e carrega o script "get-text.js"
+// para ele.
+var text_entry = require("sdk/panel").Panel({
+  contentURL: data.url("text-entry.html"),
+  contentScriptFile: data.url("get-text.js")
+});
+
+// Cria um botão
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+//Mostra o painel quando o usuário clica no botão
+function handleClick(state) {
+  text_entry.show();
+}
+
+//Quando o painel é mostrado ele gera um evento chamado
+//"show": nós esperaremos por este evento e quando ele ocorrer
+//enviamos nosso próprio evento "show" para o script do painel,
+//então o script pode preparar o painel para mostrar.
+text_entry.on("show", function() {
+  text_entry.port.emit("show");
+});
+
+//Espera pela mensagem chamada "text-entered" vinda do
+//script do conteúdo. A carga útil da mensagem é o texto
+//digitado pelo usuário.
+//Nesta implementação nós passaremos o texto para o console.
+text_entry.port.on("text-entered", function (text) {
+  console.log(text);
+  text_entry.hide();
+});</pre>
+
+<p>O conteúdo do script "get-text.js" parece com isto:</p>
+
+<div>
+<pre class="brush: js">//Quando o usuário digita return, envia a mensagem "text-entered"
+// para o main.js.
+//A carga útil da mensagem é o conteúdo da caixa de edição.
+var textArea = document.getElementById("edit-box");
+textArea.addEventListener('keyup', function onkeyup(event) {
+  if (event.keyCode == 13) {
+    // Remove a nova linha.
+    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
+    self.port.emit("text-entered", text);
+    textArea.value = '';
+  }
+}, false);
+//Espera pelo evento "show" vim do
+//código principal do add-on. O que significa que o
+//painel sobre será mostrado.
+//
+//Configura o foco para a área de texto então o usuário pode
+//começar a digitar.
+self.port.on("show", function onShow() {
+  textArea.focus();
+});</pre>
+
+<div> </div>
+</div>
+
+<p>Finalmente, o arquivo "text-entry.html" define o elemento <code>&lt;textarea&gt;</code>:</p>
+
+<div>
+<div>
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+    &lt;style type="text/css" media="all"&gt;
+      textarea {
+        margin: 10px;
+      }
+      body {
+        background-color: gray;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+&lt;body&gt;
+    &lt;textarea rows="13" cols="33" id="edit-box"&gt;&lt;/textarea&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div> </div>
+</div>
+</div>
+
+<p>Finalmente, salve estes três ícones no diretório "data":</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Teste: o "main.js" está salveo no diretório <code>lib</code> do add-on, e os outros cinco arquivos vão no diretório data do add-on:</p>
+
+<pre>my-addon/
+         data/
+              get-text.js
+              icon-16.png
+              icon-32.png
+              icon-64.png
+              text-entry.html
+         lib/
+             main.js
+</pre>
+
+<p>Execute o add-on, clique no botão, e você deverá ver o painel. Digite algum texto e pressione "return" e você deverá ver a saída no console.</p>
+
+<p>Do Firefox 30 em diante, se você usar o <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>, você pode <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">anexar o painel ao botão</a>.</p>
+
+<h2 id="Aprendendo_Mais">Aprendendo Mais</h2>
+
+<p>Para aprender mais sobre o módulo <code>panel</code>, veja a referência da API <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.</p>
+
+<p>Para aprender mais sobre buttons, veja referência da API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> e <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p>
diff --git a/files/pt-br/mozilla/add-ons/sdk/tutorials/unit_testing/index.html b/files/pt-br/mozilla/add-ons/sdk/tutorials/unit_testing/index.html
new file mode 100644
index 0000000000..2e65659ed5
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/sdk/tutorials/unit_testing/index.html
@@ -0,0 +1,127 @@
+---
+title: Teste de unidade
+slug: Mozilla/Add-ons/SDK/Tutorials/Unit_testing
+tags:
+  - Add-on SDK
+  - JPM
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Unit_testing
+---
+<div class="note">
+<p><span>Para seguir este tutorial você precisará ter conhecimento básico de<a href="/en-US/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29"> <code>jpm</code></a> e ter seguido o tutorial de <a href="/en-US/Add-ons/SDK/Tutorials/Using_third-party_modules_(jpm)">criação de módulos reutilizáveis</a>.</span></p>
+</div>
+
+<div class="note">
+<p>Se você está migrando código de teste do cfx para o <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a>, veja o guia de migração do cfx, em particular a seção <a href="/en-US/Add-ons/SDK/Tools/cfx_to_jpm#Requiring_modules_from_test_code">loading modules from test code</a>.</p>
+</div>
+
+<p>O SDK fornece um framework para ajudar a criar e executar testes de unidade para seu código. Para demonstrar como ele funciona nós escreveremos um teste de unidade para um módulo simples de codificação <a href="http://en.wikipedia.org/wiki/Base64">Base64</a>.</p>
+
+<h2 id="Um_módulo_simples_Base64">Um módulo simples Base64</h2>
+
+<p>Em uma página web, você pode executar uma codificação Base64 e decodificação usando as funções <code>btoa()</code> e <code>atob()</code>. Infelizmente essas funções pertencem ao objeto <code>window</code>: uma vez que o objeto não está disponível no código principal do add-on, <code>atob()</code> e <code>btoa()</code> não estão disponíveis de qualquer forma. Então nós criaremos um módulo <code>base64</code> para exibir estas funções da plataforma.</p>
+
+<p>Para começar, crie um novo diretório, navegue para ele, e execute o <code>jpm init</code>. Agora crie um novo arquivo chamado "base64.js", e de lhe o seguinte conteúdo:</p>
+
+<pre class="brush: js">const { atob, btoa } = require("chrome").Cu.import("resource://gre/modules/Services.jsm", {});
+
+exports.atob = a =&gt; atob(a);
+exports.btoa = b =&gt; btoa(b);
+</pre>
+
+<p>Este código exporta duas funções, que chamamos <code>btoa()</code> and <code>atob()</code>. Para mostrar o módulo em uso, edit o arquivo "index.js" como segue:</p>
+
+<pre class="brush: js">var base64 = require("./base64");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "base64",
+  label: "base64",
+  icon: "./icon-16.png",
+  onClick: function() {
+    encoded = base64.btoa("hello");
+    console.log(encoded);
+    decoded = base64.atob(encoded);
+    console.log(decoded);
+  }
+});</pre>
+
+<p>Para executar esse exemplo você também terá que ter um ícone chamado "icon-16.png" salvo no diretório data do add-on. Você pode baixar este ícone: <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="height: 16px; width: 16px;">.</p>
+
+<p>Agora o "index.js" importa o módulo base64 e chama suas duas funções exportadas. Se nós executarmos o add-on e clicarmos no botão, nós devemos ver a seguinte saída:</p>
+
+<pre>info: aGVsbG8=
+info: hello
+</pre>
+
+<h2 id="Testando_o_módulo_Base64">Testando o módulo Base64</h2>
+
+<p>Navegue para o diretório <code>test</code> e delete o arquivo <code>test-index.js</code>. Em seu lugar crie um arquivo chamado <code>test-base64.js</code> com o seguinte conteúdo:</p>
+
+<pre class="brush: js">var base64 = require("../base64");
+
+exports["test atob"] = function(assert) {
+      assert.ok(base64.atob("aGVsbG8=") == "hello", "atob works");
+}
+
+exports["test btoa"] = function(assert) {
+  assert.ok(base64.btoa("hello") == "aGVsbG8=", "btoa works");
+}
+
+exports["test empty string"] = function(assert) {
+  assert.throws(function() {
+                  base64.atob();
+                },
+                "empty string check works");
+}
+
+require("sdk/test").run(exports);
+</pre>
+
+<div class="note">
+<p>Note que com o  jpm nós devemos dar o caminho exato do módulo base64.js.</p>
+</div>
+
+<p>Esse arquivo: exporta três funções, cada qual espera receber um único argumento que é o objeto <code>assert</code>. <code>assert</code> é fornecida pelo módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert"><code>test/assert</code></a> e implementa o <a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.1">CommonJS Unit Testing specification</a>.</p>
+
+<ul>
+ <li>
+  <p>As duas primeiras funções chamam <code>atob()</code> e <code>btoa()</code> e usa o <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#ok(guard.2C_message)"><code>assert.ok()</code></a> para checar que a saída é a esperada</p>
+ </li>
+ <li>
+  <p>A segunda função testo código de manipulação de erro do módulo passando uma string vazia para o <code>atob()</code> e usando <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#throws(block.2C_error.2C_message)"><code>assert.throws()</code></a> para checar que a exceção esperada foi lançada.</p>
+ </li>
+</ul>
+
+<p>Neste ponto seu add-on deve parecer com isto:</p>
+
+<pre>  /base64
+      /data
+          icon-16.png
+      package.json
+      README.md
+      index.js
+      base64.js
+      /test
+          test-base64.js
+</pre>
+
+<p>Agora execute o <code>jpm --verbose test</code> da pasta principal do add-on. Você deve ver algo como isto:</p>
+
+<pre>console.info: jpm-utest: executing './test/test-base64.test atob'
+console.info: jpm-utest: pass: atob works
+console.info: jpm-utest: executing './test/test-base64.test btoa'
+console.info: jpm-utest: pass: btoa works
+console.info: jpm-utest: executing './test/test-base64.test empty string'
+console.info: jpm-utest: pass: empty string check works
+
+3 of 3 tests passed.
+All tests passed!</pre>
+
+<p>O que aconteceu aqui é que o <code>jpm test</code>:</p>
+
+<ul>
+ <li>procura no diretório <code>test</code> o seu pacote</li>
+ <li>carrega qualquer módulo cujo nome começa com a palavra <code>test- </code>(Note o hífen depois de<span> "test" no nome do módulo. <code>jpm test</code> incluirá um módulo chamado "test-myCode.js", mas excluirá módulos chamados "test_myCode.js" ou "testMyCode.js".)</span></li>
+ <li>chama cada função exportada cujo nome começa com "test", passando um objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#Assert"><code>assert</code></a> como seu único argumento.</li>
+</ul>
+
+<p>Obviamente, você não tem que passar a opção<code> --verbose</code> para o jpm se você não quiser; fazendo assim torna a saída mais fácil de ler.</p>