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.

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

Scrittura dell'estensione

Crea una cartella e posizionati al suo interno:

mkdir borderify
cd borderify

manifest.json

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

{

  "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"]
    }
  ]

}
  • Le prime tre chiavi: manifest_version, name, and version, sono obbligatorie e contengono metadati base per l'estensione.
  • description è opzionale, ma raccomandata: viene mostrata in Gestione componenti aggiuntivi.
  • icons è opzionale, ma raccomandata: ti permette di specificare un'icona per l'estenzione che verrà mostrata in Gestione componenti aggiuntivi.

La chiave più interessante è content_scripts, 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.

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

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

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

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à 96 dell'oggetto icons nel file manifest.json:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

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

borderify.js

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

document.body.style.border = "5px solid red";

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

Provala

Innanzitutto, controlla di avere i file giusti nei posti giusti:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Installazione

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

Prova

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

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:

Impacchettamento e pubblicazione

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

E adesso?

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: chack1172
Ultima modifica di: chack1172,