Chi utilizza il famoso browser di Google, Chrome, avrà certamente notato e magari utilizzato le estensioni. Simili alle estensioni per Firefox estendono le funzioni di alcune pagine web e permettono automazioni e migliorie.

Ma come creare una di queste estensioni?

Basta un poco di javascript!!

Ma andiamo a vedere come fare, con un esempio pratico. Creeremo un bel auto-login per pierotofy.

Innanzitutto creiamo una bella cartella sul nostro computer che chiameremo "Autologin pierotofy". In questa cartella andremo ad inserire tutti i file per la nostra estensione. I file di cui abbiamo bisogno sono questi:

manifest.json

script.js

[eventualmente]

icon16.png

icon48.png

icon120.png

Andiamo a vedere nel dettaglio tutti questi file. I file .png come potete ben immaginare sono le icone per la nostra estensione, rispettivamente le icone di 16x16,  48x48, 120x120 che verranno utilizzate rispettivamente (solo nel caso in cui si decida di inserirle) come favicon nella pagina di installazione, icona nella scheda estensioni e icona in fase di istallazione.

Il file script.js contiene gli script che verranno eseguiti, che andremo a vedere in seguito.

Ed ora il file più importante: manifest.json.

È il manifesto dell'estensione, e da tutte le informazioni riguardanti essa. andiamo a vedere cosa scrivere all'interno di questo file.

{
"name":"PTAutologin",
"version":"1.0",
"description":"Un autologin per http://www.pierotofy.it",
"icons":{
"16":"icon16.png",
"48":"icon48.png",
"128":"icon128.png",
},
"content_scripts":[{
"matches":["http://www.pierotofy.it/*"],
"script":["script.js"],
}]
}

Andiamo a vedere in dettaglio ogni istruzione.

name: Il nome della nostra estensione.

version: La versione della nostra estensione.

description: La descrizione della nostra estensione.

icons: Tutte le icone della nostra estensione.

content_scripts: Tutti gli script della nostra applicazione. Come vedete è in un array, perchè potrebbero esserci più script da eseguire.

matches: All'interno di content_scripts descrive in quali pagine mandare in esecuzione lo script. Anche questo è un array perchè sarebbe possibile specificare più pagine.

script: All'interno di content_scripts assieme a matches e descrive quale script eseguire. Anche questo è un array.

Perfetto. Ora abbiamo il nostro file manifest.json.

Passiamo a scrivere ora lo script da eseguire. Per fare questo dobbiamo dare prima un'occhiata al codice di questo sito, e cercare di capire come si chiamano i campi per il login e come si chiama la form del login.

Scopriamo quindi che la form si chiama frmlogin, il campo per l'username si chiama user e il campo per la password di chiama pass.

Ora passiamo a scrivere il Javascript:

document.getElementsByName("user").item(0).value="il nostro nick di pt";
document.getElementsByName("pass").item(0).value="la nostra password di pt";
document.getElementsByName("frmlogin").item(0).submit();

Quindi nel primo passo il codice javascript scrive nella barra per il nick il nostro nick, poi scrive nella barra per la password la nostra password ed infine fa il submit (quindi Invia) la form.

Come potete vedere questa estensione non può essere distribuita per tutti in quanto tutti dovrebbero andare a cambiare manualmente nel codice la password e la mail, ma è tranquillamente utilizzabile da noi, ora vedremo come.

Ora nella nostra cartella abbiamo tutti i file che ci servono. Dunque apriamo il nostro Browser (Chrome) e apriamo la pagina delle estensioni. Una volta qui troveremo la "Modalità sviluppatore." qui ci sono tre tasti: quello che interessa a noi è "Carica estensione non pacchettizzata". Premendo su questo tasto si aprirà una finestra che ci invita a scegliere una cartella. Indovinate che cartella dovremo selezionare?? Esatto: proprio la nostra "Autologin pierotofy". In pochi istanti una nuova applicazione sarà visibile e andando sul sito http://www.pierotofy.it/ lo script verrà eseguito ed entrerete automaticamente.

NOTA 1: nel caso in cui ci siano errori di codice e ve ne accorgiate solamente sopo aver caricato l'estensione, basta andare a cambiare il codice e poi premere sotto l'estensione (in Chrome) Ricarica.

NOTA 2: come dicevo la password e il nick sono in chiaro sul file .json per questo non è opportuno caricare l'estensione in rete. Comunque è possibile tramite l'AJAX salvare le credenziali su un database di un proprio sito internet e quindi rendere l'applicazione distribuibile. Ad ogni modo vi invito ad utilizzare la vostra inventiva.

Spero che questa guida vi sia stata utile. A presto! ;)