1 files changed, 150 insertions, 0 deletions
diff --git a/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..9d3045e28a
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,150 @@
+---
+title: Sua primeira extensão
+slug: Mozilla/Add-ons/WebExtensions/sua_primeira_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span id="result_box" lang="pt"><span>Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox.</span> <span>A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios</span></span>.</p>
+
+<p>O código fonte para este exemplo está no GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p><span id="result_box" lang="pt"><span>Para começar, você precisará do Firefox versão 45 ou posterior</span></span>.</p>
+
+<h2 id="Construindo_a_Extensão">Construindo a Extensão</h2>
+
+<p>Crie uma nova pasta dando o nome de "<span id="result_box" lang="pt"><span>borderify</span></span>" e navegue para dentro dela.</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p><span id="result_box" lang="pt"><span>Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e</span> c<span>oloque o seguinte conteúdo no arquivo</span></span>:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "<span id="result_box" lang="pt"><span>Adiciona uma borda vermelha a todas as páginas da Web correspondentes a</span></span> mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>As primeiras tres chaves: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, e <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, são obrigatórias e contém os metadados básicos sobre a extensão.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> é opcional contudo é recomendada pois aparece no gerenciador de complementos.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> é opcional porém recomendada pois define os ícones que aparecem no gerenciador de complementos.</li>
+</ul>
+
+<p><span id="result_box" lang="pt"><span>A chave mais interessante aqui é</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <span id="result_box" lang="pt"><span>que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico.</span> <span>Nesse caso, pedimos ao Firefox para carregar um script chamado "borderify.js" em todas as páginas HTTP ou HTTPS oriundas de "mozilla.org" ou em qualquer um de seus subdomínios.</span></span></p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Saiba mais sobre scripts de conteúdo.</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Saiba mais sobre padrões de correspondência</a>.</li>
+</ul>
+
+<div class="warning">
+<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">Em algumas situações, você precisa especificar uma ID para sua extensão</a>. Se você precisar especificar um ID de extensão, inclua a chave <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> no <code>manifest.json</code> e configure sua propriedade <code>id</code>:</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p><span id="result_box" lang="pt"><span>A extensão deve ter um ícone.</span> Ele<span> será mostrado ao lado da listagem de extensões no Gerenciador de Extensões.</span> <span>Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".</span></span></p>
+
+<p><span id="result_box" lang="pt"><span>Crie o diretório "icons" diretamente sob o diretório "borderify".</span> <span>Salve um ícone chamado "border-48.png"</span></span>. Você pode usar o icone <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">do nosso exemplo</a>, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
+
+<p><span id="result_box" lang="pt"><span>Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e</span><span> também deve criar um ícone de 96x96 pixels também .PNG, para telas de alta resolução, e se você fizer isso será especificado como a propriedade 96 do objeto icons em manifest.json</span></span>:</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p><span id="result_box" lang="pt"><span>Como alternativa, você pode criar um ícone em formato SVG  e ele será dimensionado corretamente</span></span>.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Saiba mais sobre como especificar ícones.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p><span id="result_box" lang="pt"><span>Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte</span><span> conteúdo:</span></span></p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p><span id="result_box" lang="pt"><span>Este script será carregado nas páginas que correspondem ao padrão especificado na chave </span></span> <code>content_scripts</code> do manifest.json. <span id="result_box" lang="pt"><span>O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.</span></span></p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Saiba mais sobre scripts de conteúdo.</a></li>
+</ul>
+
+<h2 id="Testando">Testando</h2>
+
+<p>Primeiro, verifique se você está com os arquivos corretos nos lugares certos:</p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Instalando">Instalando</h3>
+
+<p><span id="result_box" lang="pt"><span>Acesse a área de Debugging do Firefox digitando diretamente na barra de endereço: "about: debugging", em seguida clique em "Load Temporary Add-on" e selecione o "</span></span>borderify.js<span lang="pt"><span>".</span></span></p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p><span id="result_box" lang="pt"><span>A Extensão agora será instalado e ficará assim até que você reinicie o Firefox.</span><br>
+ <br>
+ <span>Como alternativa, você pode executar a Extansão a partir da linha de comando usando a ferramenta </span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
+
+<h3 id="Testando_2">Testando</h3>
+
+<p><span id="result_box" lang="pt"><span>Agora visitar uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:</span></span></p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p><span id="result_box" lang="pt"><span>Não tente acessar addons.mozilla.org!</span> <span>Os scripts de conteúdo são bloqueados nesse domínio</span></span>.</p>
+</div>
+
+<p><span id="result_box" lang="pt"><span>Experimente um pouco.</span> <span>Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página.</span> <span>Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about: debugging.</span> <span>Você poderá ver as mudanças imediatamente:</span></span></p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Saiba mais sobre o carregamento de extensões</a></li>
+</ul>
+
+<h2 id="Empacotando_e_publicando">Empacotando e publicando</h2>
+
+<p><span id="result_box" lang="pt"><span>Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura.</span> <span>Para saber mais sobre isso, consulte</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publicando sua Extensão"</a>.</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<p><span id="result_box" lang="pt"><span>Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:</span></span></p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia de uma Extensão</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Criar uma Extensão mais complexa</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">Saber mais sobre JavaScript APIs disponíveis para Extensões.</a></li>
+</ul>