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
151
152
153
|
---
title: A sua primeira extensão
slug: Mozilla/Add-ons/WebExtensions/A_sua_primeira_extensao
tags:
- Extensões da Web
- Guía
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>Neste artigo, nós iremos abordar a criação de uma extensão para o Firefox, do início até ao fim. A extensão adiciona apenas um contorno vermelho a qualquer página carregada de 'mozilla.org' ou qualquer um dos seus subdomínios.</p>
<p>O código fonte para este exemplo está no GitHub: <em><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></em>.</p>
<p>Primeiro, precisa de ter o Firefox - versão 45 ou superior.</p>
<h2 id="Escrever_a_extensão">Escrever a extensão</h2>
<p>Crie uma nova diretoria e vá para a mesma:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>Now create a new file called "manifest.json" directly under the "borderify" directory. Give it the following contents:</p>
<pre class="brush: json">{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}</pre>
<ul>
<li>The first three keys: <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>, and <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, are mandatory and contain basic metadata for the extension.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> is optional, but recommended: it's displayed in the Add-ons Manager.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> is optional, but recommended: it allows you to specify an icon for the extension, that will be shown in the Add-ons Manager.</li>
</ul>
<p>The most interesting key here is <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, which tells Firefox to load a script into Web pages whose URL matches a specific pattern. In this case, we're asking Firefox to load a script called "borderify.js" into all HTTP or HTTPS pages served from "mozilla.org" or any of its subdomains.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</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">In some situations you need to specify an ID for your extension</a>. If you do need to specify an add-on ID, include the <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> key in <code>manifest.json</code> and set its <code>gecko.id</code> property:</p>
<pre class="brush: json">"applications": {
"gecko": {
"id": "borderify@example.com"
}
}</pre>
</div>
<h3 id="iconsborder-48.png">icons/border-48.png</h3>
<p>The extension should have an icon. This will be shown next to the extension's listing in the Add-ons Manager. Our manifest.json promised that we would have an icon at "icons/border-48.png".</p>
<p>Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png". You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">the one from our example</a>, which is taken from the Google Material Design iconset, and is used under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> license.</p>
<p>If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the <code>96</code> property of the <code>icons</code> object in manifest.json:</p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p>Alternatively, you could supply an SVG file here, and it will be scaled correctly. (Though: if you're using SVG and your icon includes text, you may want to use your SVG editor's "convert to path" tool to flatten the text, so that it scales with a consistent size/position.)</p>
<ul>
<li><a href="/pt-PT/Add-ons/WebExtensions/manifest.json/icones">Saiba mais sobre a especificação de ícones (icons).</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p>
<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li>
</ul>
<h2 id="Testá-la">Testá-la</h2>
<p>Primeiro, reverifique que tem os ficheiros corretos nos locais certos:</p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="Instalar">Instalar</h3>
<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>The extension will now be installed, and will stay until you restart Firefox.</p>
<p>Alternatively, you can run the extension from the command line using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool.</p>
<h3 id="Testar">Testar</h3>
<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.</p>
</div>
<p>Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extensions's files by clicking the "Reload" button in about:debugging. You can see the changes right away:</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading extensions</a></li>
</ul>
<h2 id="Empacotar_e_publicação">Empacotar e publicação</h2>
<p>Para que as outras pessoas utilizem a sua extensão, precisa de empacotá-la e enviá-la para a assinar na Mozilla. Para saber mais sobre isto, consulte <a href="/pt-PT/Add-ons/WebExtensions/Publicar_a_sua_extensao">"Publicar a sua extensão"</a>.</p>
<h2 id="E_a_seguir">E a seguir?</h2>
<p>Agora tem uma idéia do processo de desenvolvimento de uma <strong>Extensão da Web</strong> para o Firefox, tente:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of an extension</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex extension</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available for extensions.</a></li>
</ul>
|
