Vi spiegherò passo passo come realizzare una toolbar per le ricerche (su pagine, immagini, news...) con google (FireGoogle) in modo facile e divertente.
Un esempio di extension più completo rispetto al classico
Hello World che annoia un po'
tutti in modo tale da conoscere gli strumenti di sviluppo sulla piattaforma Mozilla. Ringrazio innazitutto Eric Hamiter e il suo ottimo
articolo su roachfiend.com
da cui ho preso immensa ispirazione.
Gli
strumenti Useremo pesantemente XML: RDF per l'installazione, XUL per
l'interfaccia grafica (qui
trovate il tutorial ufficiale), inoltre DOM e JavaScript (qui trovate parecchie
risorse in Italiano). Non vi
spaventate procederemo per passi e commenterò il codice.
FireGoogle
L'estensione che creremo sarà una toolbar (quindi
orizzontale e a scomparsa). Avrà una textbox per
l'inserimento del testo da ricercare e 5 tasti: ricerca nelle pagine
web, ricerca nelle immagini, nei newsgroup, nelle directory e nelle
news di Google. Ci saranno inoltre due radio button che permetteranno
di
visualizzare solo i risulati in italiano (o provenienti da siti
italiani) oppure tutti i risultati. Ecco come sarà la
toolbar:
...sotto come sarà possibile richiamarla...
...la sua presenza nella lista delle estensioni installate...
...ed infine l'output della finestra
dell informazioni "About...".
L'estensione completa può essere scaricata
qui. Se l'installazione non s'installa da sola, salvate il file con
nome e poi apritela da Firefox andando su File->
Apri File... -> firegoogle.xpi. Il mio consiglio è
quello di scompattare il file e seguire il resto dell'articolo
osservando attentamente la struttura di questo pacchetto: è
più semplice farlo che dirlo e poi è molto ma molto
divertente.
L'estension è distrubuita sotto Mozilla Public License
Version
1.1. Le informazioni le trovate nel file readme.txt
all'interno.
XPI:
un nuovo formato
I file con estension xpi sono i tipici pacchetti con cui
sono
distribuite le estensioni Firefox/Mozilla, non è altro
però che
un file zippato e rinominato, insomma lo stesso che succede in altri
ambiti come ad esempio in Java con i file jar (ma non solo). Usando ora il
vostro compressore/decompressore preferito
(ad es. unzip per Linux e WinRar per Windows) scompattate il file.
All'interno troverete un file e una cartella (con all'interno un file):
install.rdf
chrome
firegoogle.jar
Concentramoci per ora sul file rdf.
Install.rdf
E' un file XML, il dialetto si chiama RDF ed è usato per
descrivere la semantica di una particolare risorsa (pane per i denti
dei colleghi del semantic web), in questo caso è usato per
descrivere come deve essere gestita l'installazione della extension
FireGoogle. La configurazione mediante RDF è possibile solo a
partire da Firefox 0.9, nelle precendenti versioni si doveva usare un
javascript un po' più incasinato che si doveva chiamare
install.js (non l'ho fornito nella estensione ma se
qualcuno lo vuole mi può mailmare qui vlain[at]libero(dot)it). Nel form
sottostante è mostrato il contenuto del
file.
<em:id>{516bc36c-49a1-4fbf-867d-966aa97d2eed}</em:id>
<em:name>FireGoogle</em:name>
<em:version>1.0</em:version>
<em:description>Mostra una barra
orizzontale per le ricerche su Google.</em:description>
<em:creator>Rudi
Verago</em:creator>
<em:homepageURL>http://vlain.altervista.org</em:homepageURL>
<em:iconURL>chrome://firegoogle/skin/icon.png</em:iconURL>
<em:aboutURL>chrome://firegoogle/content/about.xul</em:aboutURL>
<em:updateURL>http://vlain.altervista.org/update.rdf</em:updateURL>
Le prime righe servono a definire il tipo di file e i namespace.
L'elemento <em:id> identifica univocamente
l'estensione in tutto il mondo, per ottenere un nuovo id potete usare
lo script in perl che trovate qui oppure
uno dei tanti programmi che trovate in giro come ad esempio GuidGen.
Gli elementi successivi sono piuttosto auto-esplicativi, ossia definite
rispettivamente il nome dell'estensione, la versione, la sua
descrizione, il creatore, la homepage, le icone, il dialog dell'about,
il sito per l'aggiornamento...insomma è XML mica greco antico:
forza tosi. I più attenti si saranno accorti però della
stringa chrome://, che indica? esiste un protocollo come
http con quel nome? La risposta è più no che si. Chrome
indica la piattaforma di sviluppo per le applicazioni in Mozilla, ed
è usata sempre come root per la ricerca dei file all'interno di
un applicazione.
Il macroelemento fondamentale è però <em:file>
: qui dovete indicare il file archivio e le directory che contengono il codice e la grafica
dell'estensione. Il discorso non è chiarissimo? Non importa lo
riprenderemo nella sezione successiva.
L'ultimo blocco potete ricopiarlo pari-pari poiché è
equivalente
per ogni estensione, si chiama <em:targetApplication> ed
indica appunto l'applicazione dove useremo il nostro software ossia
Firefox dalla versione 0.8 alla versione 1.5. Mi raccomando a non
generare per questo elemento un nuovo id perché esso identifica
Firefox.
Firegoogle.jar
Oltre al file rdf d'installazione troviamo nel nostro package iniziale
una directory chrome, essa contiene un unico file: firegoogle.jar.
Anche questo file è un archivio zip. Non ci credete?
Scompattelo. Otterrete due cartelle, esattamente quelle indicate
nell'elemento <em:file>:
content/: contiene il codice della estensione, file
XML-XUL-RDF e javascript
skin/classic/: contiene le immagini, i fogli di
stile ecc.
Partiamo dalla seconda. Firegoogle è semplice quindi non ho
ritenuto necessario inserire un foglio di stile, ho solo pochi
elementi; nella directory troverete due immagini png: quella piccola
viene mostrata nel manager delle estensioni mentre quella grande nel
dialog dell'about. Dieci minuti e potete crearne di simili con Gimp.
C'è anche all'interno un file chiamato contents.rdf
che descrive il contenuto della directory corrente: è molto
semplice e non è così importante quindi non lo
descriverò.
La directory chrome/content/
La directory dove ci sono i file più interessanti è content/,
ivi trovate:
about.xul: crea la finestra di dialogo About;
contents.rdf: descrizione del contenuto della
directory;
firegoogle-machine.js: script per l'esecuzione della
ricerca;
readme.txt: il codice di Object.java (nessun
commento please);
Contents.rdf contiene quindi i riferimenti ai contenuti
di questa directory ed in particolar modo alle informazioni
sull'interfaccia dell'estensione contenuta nel file XUL firegoogleOverlay.xul.
Ecco il contenuto, è molto semplice ed intuitivo:
<RDF:Description
RDF:about="urn:mozilla:package:firegoogle"
chrome:displayName="FireGoogle
0.1"
chrome:author="Rudi Verago"
chrome:authorURL="mailto:vlain@libero.it"
chrome:name="firegoogle"
chrome:extension="true"
chrome:description="Una semplice
barra orizzontale per le ricerche su Google">
</RDF:Description>
</RDF:RDF>
Ora è il momento di un
caffè, fate cinque minuti di pausa e poi continuate la lettura.
FiregoogleOverlay.xul Come era il caffè? Se
ve lo siete fatti offrire sicuramente era ottimo. Bene...andiamo. XUL è un dialetto XML per la descrizione di interfacce
cross-platform, non è usato solo in Mozilla ma esistono anche
wrapper per Python, Java ecc. La filosofia è la stessa che sta
alla base della nuova interfaccia Avalon di Microsoft: insomma il
futuro è XML anche per quanto riguarda la grafica, eccovi la homepage ufficiale del progetto; firegoogleOverlay.xul
contiene quindi gli elementi grafici della extension, eccovi il suo
codice:
Ora seguite il codice osservando l'output in Firefox dell'extension
(qui sotto).
Ecco la descrizione
prime righe: definizione file XML di tipo XUL (con annesso
namespace), se siete a corto XML leggetevi una qualsiasi guida sul web
ma è talmente semplice che mi sembra quasi offensivo il
suggerimento
<overlay> : permette di inserire un nuovo
elemento XUL nella finestra corrente
<script src="firegoogle-machine.js"/> :
riferimento al file javascript dove verrà eseguito il core
dell'estensione ossia la creazione delle strighe URL per le ricerche su
google
<keyset>: definisce un shorcut
da tastiera [shift+F1] per il richiamo della toolbar dell'estensione
<commandset>: esegue il
richiamo e la scomparsa della toolbar, il shortcut precedente fa
riferimento a questo elemento
<label> <textbox>:
creazione label e textbox per l'inserimento della stringa da ricerca
<toolbarseparator> :
inserisce un separatore
<toolbarbutton id="websearch" label="Web"
oncommand="websearch();"/> : inserisce un
bottone per la ricerca, alla pressione del button verrà eseguito
il codice della funzione specificata dalla voce oncommand;
la funzione è definita e realizzata nel file javascript
specificato all'inizio
<radiogroup>: inserisce due
radio button per la scelta della ricerca delle pagine in italiano o su
tutto il web
<toolbarpalette> <toolbaritem>
: all'interno vengono definiti gli elementi
della toolbar
<toolbox> : crea propriamente la toolbar
L'interfaccia è chiara, avete visto quanto è semplice e
divertente? Non sottovalutatene però la potenza, è
possibile infatti creare applicazioni stand-alone molto complesse che
usano XUL.
Un piccolo Javascript
Lo script firegoogle-machine.js contiene cinque funzioni
una per ogni tipo di ricerca. Sotto è mostrata quella relativa
alla ricerca nella pagine classica nella pagine web; le altre sono
analoghe (le trovate ovviamente all'interno del file jar che sta
all'interno del file xpi...spero sia chiaro questo punto...se non
è chiaro ricomciate dall'inizio la lettura con più
attenzione).
//ricerca pagine web
function websearch()
{
var fgtext = document.getElementById("searchtext").value;
var itasearch;
document.getElementById("italiano").selected ?
itasearch="lr%3Dlang_it" : itasearch="";
var strsearch =
"http://www.google.it/search?hl=it&q="+fgtext+"&btnG=Cerca+con+Google&meta="+itasearch;
window.content.document.location.href = strsearch;
}
Qui si usa pesantemente DOM:
seleziono l'elemento XML-XUL in base al suo attributo id (searchtext),
prendo il valore che sarà ovviamente la stringa da ricercare.
Successivamente controllo se è ceccato il radio button associato
all'italiano (come nel caso precedente uso l'id): in caso
positivo aggiungo una stringa all'URL (lr%3Dlang_i). Ora
ho finito e posso avviare nella finestra (e nella tab) corrente
l'indirizzo indicato in strsearch...e magia vi siete
interfacciati a Google.
About.xul
E per finire eccovi il codice per la finestra di dialogo che mostra le
informazioni sull'estensione: ormai avete capito come funziona e non
avrete problemi a leggerlo.
Suggerimenti e scorciatoie La procedura di creazione del pacchetto è piuttosto
noiosa e fonte di mille errori, ho creato quindi un semplice bash
script che vi semplifica la vita: è scritto per Linux, potete
fare lo stesso con Windows con un file bat (ne trovate ad esempio uno
sul sito di Eric
Hamiter).
#!/bin/sh
echo "Creo archivio jar..."
cd chrome
zip -r firegoogle.jar content skin
cd ..
echo "Creo package xpi..."
zip -r firegoogle.xpi install.rdf chrome/firegoogle.jar
La struttura dei vostri file riassumendo deve essere la seguente:
install.rdf
chrome/
content/
about.xul
contents.rdf
firegoogle-machine.js
firegoogleOverlay.xul
readme.txt
skin/
classic/
contents.rdf
icon.png
icon_grande.png
Vi ricordo inoltre è necessario disinstallare l'estensione e
riavviare Firefox prima di procedere ad un altra sessione
d'installazione. La procedura purtroppo rimane macchinosa (e questo
è il neo più grande)...preparatevi ad una lunga serie di
installazioni, disinstallazioni, riavvi, creazioni di nuovi profili ecc.
Conclusioni Aprite quindi firegoogle.xpi
e mettetevi a modificare il codice per creare la vostra personale
estensione per Firefox. Essendo appassionato di XML & Co. trovo
molto divertente scrivere estensioni...spero lo sia anche per voi.
Saluti e grazie per l'attenzione...
...e ovviamente W Firefox:
il miglior browser del mondo.
