1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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>
|
