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: La tua prima estensione
slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension
tags:
- Guida
- WebExtension
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.</p>
<p>Il codice sorgente di questo esempio è su GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
<p>Per prima cosa hai bisogno di Firefox versione 45 o superiore.</p>
<h2 id="Scrittura_dell'estensione">Scrittura dell'estensione</h2>
<p>Crea una cartella e posizionati al suo interno:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:</p>
<pre class="brush: json">{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}</pre>
<ul>
<li>Le prime tre chiavi: <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>, sono obbligatorie e contengono metadati base per l'estensione.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> è opzionale, ma raccomandata: viene mostrata in Gestione componenti aggiuntivi.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> è opzionale, ma raccomandata: ti permette di specificare un'icona per l'estenzione che verrà mostrata in Gestione componenti aggiuntivi.</li>
</ul>
<p>La chiave più interessante è <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Ulteriori informazioni sugli script di contenuto.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Ulteriori informazioni sugli schemi di corrispondenza</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 alcune situazioni è necessario specificare un ID per la propria estensione</a>. Se devi specificare l'ID dell'estensione, includi la chiave <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> nel file <code>manifest.json</code> e imposta la sua proprietà <code>gecko.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>L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".</p>
<p>Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png". Puoi usare <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">la stessa del nostro esempio</a>, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
<p>Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà <code>96</code> dell'oggetto <code>icons</code> nel file manifest.json:</p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p>In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Ulteriori informazioni per specificare le icone.</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:</p>
<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
<p>Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave <code>content_scripts</code> nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Ulteriori informazioni sugli schemi di corrispondenza.</a></li>
</ul>
<h2 id="Provala">Provala</h2>
<p>Innanzitutto, controlla di avere i file giusti nei posti giusti:</p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="Installazione">Installazione</h3>
<p>Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.</p>
<p>In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
<h3 id="Prova">Prova</h3>
<p>Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.</p>
</div>
<p>Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Ulteriori informazioni sul caricamento delle estensioni</a></li>
</ul>
<h2 id="Impacchettamento_e_pubblicazione">Impacchettamento e pubblicazione</h2>
<p>Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Pubblicazione della tua estensione"</a>.</p>
<h2 id="E_adesso">E adesso?</h2>
<p>Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">l'anatomia di un'estensione</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">scrivere un'estensione più complessa</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/API">API Javascript disponibili per le estensioni.</a></li>
</ul>
|
