---
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>