Come creare una estensione per Firefox - rudi Verago

Transcript

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.
Powered by Mambo
<?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">
Powered by Mambo
<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
Powered by Mambo
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:
Powered by Mambo
- 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>
Powered by Mambo
<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>
Powered by Mambo
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"?>

<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');"/>
Powered by Mambo
</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"/>
Powered by Mambo
<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
Powered by Mambo
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
Powered by Mambo
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.
Powered by Mambo
<?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">

<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
Powered by Mambo
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..."
Powered by Mambo
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
Powered by Mambo
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.
Powered by Mambo

Come creare una estensione per Firefox - rudi Verago

Transcript

Documenti analoghi

LONGEVITA` E SALUTE I segreti del terreno biologico e nuovi

moulinex - omogeneiz. baby chef

Italian unification and Freemasonry(Unificazione e frammassoni

Calcio Napoli News - Associazione culturale Neoborbonica

Ciao Rosanna, B.O. 53/2016 ARUO: contabilizzato – non riesco ad

Scarica la brochure

brochure

Sviluppo di applicazioni cross-platform con Mozilla

9 febbraio 2016 – RDF - Consorzio Vino Chianti