Sviluppare un’estensione per Google Chrome

chrome

chrome

Sviluppare un’estensione per il browser Google Chrome è più semplice di quanto si possa pensare.

Bastano un editor di testo e rudimentali conoscenze di JavaScript per iniziare. Ovviamente più l’estensione diventa complessa, più le conoscenze devono essere approfondite ed affiancate magari da sviluppo web (html, css, etc.), ma per iniziare serve davvero poco.

Tipicamente, sono richiesti 3 file:

  1. manifest.json
  2. function.js
  3. icon.png (opzionale)

Il primo file deve avere necessariamente il nome manifest.json e rappresenta la dichiarazione dell’estensione e conterrà tutte le informazioni come il nome, la versione, la descrizione e soprattutto il riferimento al file con il codice (nel nostro caso function.js) e al file immagine che rappresenta l’icona.

Il secondo file può avere il nome che preferite, a condizione che questo nome venga poi richiamato nel manifesto. Questo file contiene il codice vero e proprio, cioè indica come funziona l’estensione.

Il terzo file è solo un’immagine e non è obbligatorio, ma è comunque utile per distinguere l’estensione e abbellirla graficamente.

Il file di manifesto si presenta tipicamente così:

{
// Viene indicato lo script da richiamare. Deve avere estensione .js
"background": {
"scripts": [ "function.js" ]
},
 
//L'icona deve avere associata una dimensione. Tipicamente se ne inserisce una sola, ma possono essere inserite quante se ne desidera, con relativa dimensione indicata e file immagine corrispondente
"icons": {
"128": "icon128.png",
"16": "icon16.png",
"24": "icon24.png",
"48": "icon48.png"
},
//Il manifest deve essere alla versione 2 o non verrà riconosciuto dal Chrome Web Store
"manifest_version": 2,
 
"name": "Nome della mia estensione",
"description": "Descrizione per la mia prima estensione",
"version": "1.0",
//Dichiarazione dei permessi di cui ha bisogno l'estensione
"permissions": [ "tabs", "http://*/*", "https://*/*", "contextMenus" ],
"update_url": "http://clients2.google.com/service/update2/crx"
 
}

Una volta compilato come meglio credete il manifest, potete passare alla stesura dello script vero e proprio, differente a seconda di quello che volete che faccia.

Terminata la stesura del codice, è bene testare il risultato. Per farlo basta andare nel menù estensioni del vostro browser (raggiungibile da chrome://extensions/ ) e mettere la spunta su “Modalità sviluppatore“. Comparirà a questo punto il pulsante “Carica estensione non pacchettizzata…“.

chrome_extension_developer

Si aprirà una finestra dalla quale scegliere la cartella contenete i file sorgente. Selezionatela ed il gioco è fatto. La vostra estensione è pronta all’uso. Se apportate delle modifiche, ricordatevi di ricaricare l’estensione per applicare i cambiamenti.

Alla prossima con la guida per la pubblicazione su Chrome Web Store