Home
Cerca
Come creare una estensione per Firefox PDF Stampa E-mail
Valutazione utente: / 50 (5.6)
PeggioreMigliore 
domenica 17 aprile 2005

di Rudi Verago vlain[at]libero(dot)it

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:

tootbar

...sotto come sarà possibile richiamarla...

Visualizza Toolbar

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

<?xml version="1.0"?>
 
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
   <Description about="urn:mozilla:install-manifest">
 
      <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>
 
      <em:file>
         <Description about="urn:mozilla:extension:file:firegoogle.jar">
            <em:package>content/</em:package>
            <em:skin>skin/classic/</em:skin>
         </Description>
      </em:file>
 
      <em:targetApplication>
         <Description>
            <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
            <em:minVersion>0.8</em:minVersion>
            <em:maxVersion>1.5</em:maxVersion>
         </Description>
      </em:targetApplication>
 
   </Description>
</RDF>

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;
  • firegoogleOverlay.xul: interfaccia grafica dell'extension;
  • 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:

<?xml version="1.0"?>
 
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
              xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
 
    <RDF:Seq RDF:about="urn:mozilla:package:root">
        <RDF:li RDF:resource="urn:mozilla:package:firegoogle"/>
    </RDF:Seq>
 
    <RDF:Seq RDF:about="urn:mozilla:overlays">
        <RDF:li RDF:resource="chrome://browser/content/browser.xul"/>
        <RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>
    </RDF:Seq>
 
    <RDF:Seq RDF:about="chrome://browser/content/browser.xul">
        <RDF:li>chrome://firegoogle/content/firegoogleOverlay.xul</RDF:li>
    </RDF:Seq>
 
    <RDF:Seq about="chrome://navigator/content/navigator.xul">
        <RDF:li>chrome://firegoogle/content/firegoogleOverlay.xul</RDF:li>
    </RDF:Seq>
 
    <RDF:Description RDF:about="urn:mozilla:package:firegoogle"
        chrome:displayName="FireGoogle 0.1"
        chrome:author="Rudi Verago"
        chrome:authorURL="mailto:[email protected]"
        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:

<?xml version="1.0"?>
 
<!-- Rudi Verago [[email protected]] http://vlain.altervista.org-->
 
<overlay id="firegoogleToolbarOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script src="firegoogle-machine.js"/>

   <keyset id="mainKeyset">
       <key id="key_fgtoggle" keycode="VK_F1" modifiers="shift" command="cmd_toggleToolbar"/>
   </keyset>

   <commandset id="mainCommandSet">
       <command id="cmd_toggleToolbar" oncommand="goToggleToolbar('firegoogletoolbar','cmd_toogleToolbar');"/>
   </commandset>

   <toolbarpalette id="BrowserToolbarPalette">
      <toolbaritem id="fgbar">
 
         <label style="FONT-FAMILY: Verdana,Helvetica; font-size: 11pt;
                 font-style: italic;" value="FireGoogle: " control="searchtext"/>
         <toolbarseparator/>
         <textbox id="searchtext"/>
 
         <toolbarbutton id="websearch" label="Web" oncommand="websearch();"/>
         <toolbarbutton id="immsearch" label="Immagini" oncommand="imagesearch();"/>
         <toolbarbutton id="grusearch" label="Gruppi" oncommand="groupsearch();"/>
         <toolbarbutton id="dirsearch" label="Directory" oncommand="directorysearch();"/>
         <toolbarbutton id="newsearch" label="News" oncommand="newssearch();"/>
         <toolbarseparator/>
 
         <radiogroup orient="horizontal">
            <radio id="italiano" selected="true" label="Ita"/>
            <radio id="international" label="Web"/>
         </radiogroup>

      </toolbaritem>
   </toolbarpalette>
 
   <toolbox id="navigator-toolbox">
     <toolbar accesskey="R" hidden="false" chromeclass="toolbar"
     class="chromeclass-toolbar"  customizable="false" id="firegoogletoolbar"
     mode="full" toolbarname="FireGoogle Toolbar [shift+F1]" 
     inherits="collapsed,hidden" persist="collapsed,hidden" defaultset="fgbar"/>
   </toolbox>
 
</overlay>

Ora seguite il codice osservando l'output in Firefox dell'extension (qui sotto).

FireGoogle Toolabar

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.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window class="dialog"
   title="Firegoogle 0.1 - About" orient="vertical"
   autostretch="always" onload="sizeToContent()"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Il template originale è di Jed Brown -->
   <groupbox align="center" orient="horizontal">
      <vbox>
         <text value="FireGoogle" style="font-weight: bold; font-size: x-large;"/>
         <text value="ver. 1.0"/>
         <separator class="thin"/>
         <text value="Created By:" style="font-weight: bold;"/>
         <text value="Rudi Verago" class="url"
            onclick="window.open('http://vlain.altervista.org'); window.close();"/>
         <separator class="thin"/>
         <text value="Home Page:" style="font-weight: bold;"/>
         <text value="http://vlain.altervista.org" class="url"
            onclick="window.open('http://vlain.altervista.org'); window.close();"/>
         <separator class="thin"/>
      </vbox>
      <spring flex="1"/>
      <image src="chrome://firegoogle/skin/icon_grande.png"/>
   </groupbox>
   <hbox>
      <spacer flex="1"/>
      <button label="Chiudi" oncommand="window.close();"/>
   </hbox>
</window>

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

echo "Rimuovo file jar..."
rm 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.
 

ideas and words by Rudi Verago
powered my Mambo