Le estensioni di Firefox (così di come qualsiasi altra applicazione Mozilla e/o basata su Gecko - il motore di rendering utilizzato da Mozilla stesso) consistono in porzioni di codice sorgente comunemente riconosciuti come add on, veri e propri programmi secondari atti a completare l'esperienza della navigazione attraverso il browser. Tali add on potenziano il software di base introducendo nuove funzionalità che agevolano compiti banali, come la ricerca di un termine in un apposito motore, piuttosto che permettere azioni particolari attraverso software esterni al browser.

Il vantaggio che se ne trae è che ad ogni estensione viene assegnata una specifica funzione (o gruppo di funzioni). L'utente finale deciderà quali installare all'interno del proprio browser "componendo" quest'ultimo a suo piacimento. Il risultato sarà qualcosa di estremamente personalizzato. Le estensioni per Firefox sono sviluppate con codice sorgente aperto e disponibile allo studio o la modifica da parte di terzi. Esistono inoltre svariate comunità italiane e straniere a cui chiedere supporto per sviluppo ed uso.

CREARE L'ESTENSIONE
Vediamo allora com'è possibile realizzare una nostra applicazione, in particolare analizzeremo la struttura di una toolbar di ricerca partendo da BlogBabel Italia (http://it.blogbabel.com), la classifica dei migliori blog italiani e dei contenuti più discussi. BlogBabel propone una ricerca differenziata per contenuti, link nei post e nomi di blog, condizione ideale per la toolbar che automatizzerà le opzioni di ricerca secondo questi tre criteri. L'estensione blogbabelbar.xpi ha una struttura simile a quella in Figura 1.

APRITE LE PORTE!
I pacchetti xpi (che identificano le estensioni) sono in realtà dei file zip offuscati. Potete quindi procedere alla decompressione di blogbabelbar.xpi rinominandolo in *.zip oppure utilizzare 7- Zip (Figura 2), cliccare con il tasto destro del mouse sull'add on e scegliere la voce 7-Zip. Procediamo allora con l'analisi dei singoli file.

 

Figura 2 - I file .xpi sono semplici archivi compressi che possono essere esplorati con un comune programma come 7-zip

install.rdf (Figura 1 - Punto I)
Questo file (Listato 1) è il primo file che viene aperto e interpretato da Firefox per capire come installare l'estensione che gli si sta dando in pasto. Nome, versione, descrizione, creatore e home page di quest'ultimo fanno parte del primo blocco, sono di facile interpretazione e risulta intuitivo modificarli a vostro piacimento. Occorre comunque prestare attenzione al parametro em:id (Listato 1 - Punto A).

 

Tale valore è univoco e identifica l'estensione che stiamo sviluppando. Per generare un ID potete utilizzare lo strumento messo a disposizione da roachfiend.com all'indirizzo http://extensions.roachfiend.com/cgi-bin/guid.pl. Copiate il codice generato e incollatelo all'interno del vostro install.rdf (Figura 3). Due dei parametri del primo blocco richiamano uno pseudo-protocollo chrome:// molto utilizzato nelle estensioni Mozilla per caricare dati dal file *.jar incluso nel pacchetto. Per saperne di più vi rimandiamo a Wikipedia http://en.wikipedia.org/wiki/Chrome_Mozilla. Vedremo in seguito come e cosa modificare. Nell'ultimo blocco (targetApplication) sono dichiarate le compatibilità con il browser. Nel nostro caso BlobBabelBar sarà installabile su Firefox dall'ormai arcaica 1.0 all'ultima 2.0.0.6. L'ID di questo blocco non dovrà essere toccato per nessun motivo in quanto identifica Mozilla Firefox e non c'entra assolutamente nulla con il primo dichiarato (assegnato invece all'estensione).

Figura 3 - Lo strumento on line (roachfiend.com) utilizzato per generare l'ID univoco che identifica un'estensione

 

bbb.jar (Figura 1 - Punto II)
Così come per il file xpi, anche bbb.jar in realtà è un archivio di file. Potete rinominarlo in bbb.zip o procedere con l'esplorazione attraverso 7-Zip. Al suo interno sarà possibile trovare le due cartelle content e skin (Figura 4). Nella prima ci sono i file che permettono all'estensione di funzionare, nella seconda gli elementi grafici utilizzati nell'about, nella toolbar e nel pannello estensioni dei componenti aggiuntivi. Prendiamo in esame la cartella content. Essa contiene due file fondamentali per il funzionamento della barra di ricerca:

• bbb-machine.js: rileva il testo nel campo di ricerca e avvia l'operazione su BlogBabel Italia (Listato 2);
• bbbOverlay.xul: la parte GUI della toolbar, quella che vedete sotto la barra URL del browser.

 

Nel Listato 2, bbb-machine.js, le tre funzioni corrispondono ai tre criteri di ricerca di BlogBabel (per contenuto/link nei post/nomi di blog). In ogni caso si prende il contenuto del campo di ricerca e si varia solo l'url finale da realizzare componendone uno da far aprire (direttamente su BlogBabel). Tre passaggi semplici e fondamentali allo stesso tempo (Figura 5), che potranno essere richiamati dalla GUI scritta in bbOverlay. xul (Listato 3) in cui:

 

 

• script search = "bbb-machine.js": in un certo senso è come un include fatto in php. Il file XUL sa che le funzioni sono contenute in quel file js che sarà richiamato ogni volta che verrà fatta richiesta dalla toolbar (quindi dall'utente) (Listato 3 - Punto A).
• textbox id = "ricercatesto": la casella di testo dove specificare cosa ricercare. Le misure saranno standard se non diversamente dichiarate (Listato 3 - Punto B).
• toolbarbutton: facile capire che le tre "toolbarbutton" dichiarate corrispondono ai pulsanti che avviano la ricerca. Noterete infatti il richiamo a ciascuna funzione (oncommand="...") (Listato 3 - Punto C). 
• toolbar accesskey = "B": il tasto veloce per richiamare la barra (quindi settare il focus nella casella di testo) (Listato 3 - Punto D).

 

Figura 5 - Le tre funzioni del file bbb-machine.js a cui corrispondono i tre criteri di ricerca di BlogBabel

Il codice di about.xul (vedi Listato 4 disponibile nel CD allegato) realizza invece un'interfaccia graf ica molto semplif icata per mostrare le informazioni base dell'estensione. In particolare, hanno una certa rilevanza le righe:

• title: il titolo riportato dalla finestra di about. 
• vbox: al suo interno (tra i tag) occorrerà inserire le informazioni che vogliamo far sapere agli utilizzatori. Sarà chiaramente possibile inserire immagini e link ipertestuali. La finestra potrà essere richiamata cliccando con il tasto destro sull'estensione (dal pannello componenti aggiuntivi) e selezionando "Informazioni su BlogBabelBar".

 

Figura 6 - Il procedimento per installare un'estensione è sempre lo stesso, semplice e veloce: dal menu file, basta cliccare sulla voce Apri file

Il file contents.rdf, nella cartella default (vedi Figura 1) ripropone informazioni riguardanti puntamenti di cartelle, creatore e interfaccia grafica. Vi consigliamo di dare una occhiata al f ile già presente in BlogBabelBar.xpi per farvi una idea.

LA PARTE GRAFICA
Ma, a cosa serve la cartella skin? Al suo interno troverete "default", cartella creata per contenere gli elementi grafici: 

•  icona dell'estensione all'interno del pannello Componenti aggiuntivi (logo. png); 
• logo "BlogBabelBar" (icona e testo) visibile alla sinistra della casella di testo della toolbar (blogbabel.png); 
• avatar personale visibile nella finestra about (about.png). Potete utilizzare MS Paint o Gimp per realizzare i vostri loghi con effetti trasparenza che renderanno più gradevole la toolbar. Potete comunque prendere spunto da quelli già presenti nell'estensione.

 

CHIUDETE LE PORTE!
È arrivato il momento di rimettere a posto tutti i pezzi che compongono il puzzle. Occorre ricomporre l'estensione rispettando lo stesso schema scompattato e rivoluzionato nei precedenti paragrafi. Le strade per ottenere lo stesso risultato sono due:

1. Se fino ad ora avete modificato l'estensione fin qui descritta, utilizzando 7-Zip, potete semplicemente tornare indietro con l'apposita freccia/ icona messa a disposizione del programma e confermare l'aggiornamento del file quando richiesto. Arrivate fino alla radice (al file install.rdf), uscite dal programma e passate al successivo paragrafo.

2. Avete scompattato tutto e dovete ricomporre "la matrioska" per poterla provare? I file about.xul, bbb-machine. js, bbbOverlay.xul e contents.rdf devono trovarsi nella cartella content. Dovete rinominare bbb.zip in bbb.jar, che a sua volta dovrà trovarsi nella cartella chrome. Rinominate in Blog- BabelBar.xpi il file che prima avete salvato come BlogBabelBar.zip.

Se avete seguito uno dei due passaggi sopra proposti, dovreste avere a disposizione un file xpi pronto per essere installato. Aprite Firefox con un "profilo pulito", tenuto rigorosamente come test (affinché anche un danneggiamento da codice sbagliato non possa intaccare i vostri dati), e da File selezionate "Apri file...". Selezionate ora blogbabelbar.xpi e confermate l'installazione, in seguito riavviate Firefox (Figura 6).

 

Figura 7 - L'estensione installata nel browser è visibile come barra di ricerca

Dovreste ottenere qualcosa di simile alla Figura 7. Potete quindi provare il funzionamento della nuova estensione avviando una ricerca. Inserite del testo nell'apposita casella e cliccate su uno dei tre pulsanti a disposizione (Figura 8).

Figura 8 - Termine di ricerca "gioxx" e criterio di ricerca "contenuti dei post", primo tasto della toolbar