1 files changed, 153 insertions, 0 deletions
diff --git a/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..fac1b12e36
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,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>