Come creare una estensione per Firefox - rudi Verago
Transcript
Come creare una estensione per Firefox - rudi Verago
Come creare una estensione per Firefox (domenica 17 aprile 2005) - Vi mostrerò come è possibile realizzare in modo facile e divertente una estensione per Firefox: una toolbar per le ricerche su/di pagine, immagini, news, newsgruop e direcory. Un esempio più completo e molto più significativo rispetto al classico Hello World in modo tale da conoscere gli strumenti di sviluppo sulla piattaforma Mozilla. 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: ...sotto come sarà possibile richiamarla... ...la sua presenza nella lista delle estensioni installate... ...ed infine l'output della finestra http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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. http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 <?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"> http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 <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 http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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: http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 - 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> http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 <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> http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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');"/> http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 </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"/> http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 <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). 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 http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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 http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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. http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 <?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 http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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..." http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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 http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21 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. http://vlain.altervista.org - public void vLAiN [rudi Verago] Powered by Mambo Generated: 16 March, 2017, 19:21