TP5 : extensions firefox, les bases

TP5 : extensions firefox, les bases
1. Introduction
2. Une première application XulRunner
3. Création d'un environnement pour développer des extensions
3.1. Création d'un nouveau profil développeur
3.2. Installation d'extensions pour l'aide au développement dans le profil developpeur
3.3. Test de l'éditeur XUL interactif de l'extension "Extension Developer"
3.4. Etude d'une application XUL-Runner
3.4.1. Menu et toolbarbutton
3.4.2. Insertion d'un browser
3.4.3. Modèle de template XML
3.4.4. Insertion de HTML et SVG
3.5. Approfondissement avec le tutorial XUL !
Introduction
Dans ce TP vous allez faire vos premières armes avec le développement d'extensions firefox en
apprenant tout d'abord le langage XUL à travers les applis XUL-Runner.
Principales ressources pour développer des extensions Firefox : Pour développer des extensions
firefox : ressources
Avant de commencer à développer une extension proprement dite, nous allons créer ce que l'on
appelle une "application XulRunner. Fireefox peut être en effet exécuté dans un mode spécial, un peu
comme une JVM, pour exécuter des applications stand alone utilisant exactement les mêmes
technologies que les extensions. Il est même possible de télécharger un binaire exécutable de
XulRunner, au lieu d'utiliser Firefox.
Une première application XulRunner
• Téléchargez cette archive : tp1helloworld.zip
Une fois l'archive récupérée, vous pouvez l'exécuter en lançant la commande : firefox -app
application.ini -jsconsole
1
On a fourni un run.bat pour ceux qui sont sous windows, attention au chemin de recherche de
firefox.exe !
Regardez maintenant le détail de la structure de l'application :
application.ini : contient une description de l'application. Ce fichier est propre aux applications
XulRunner, il n'est pas pertinent pour les extensions firefox.
Commençons par le réperoire chrome :
chrome.manifest : permet d'associer les chemins des dossiers aux URis de type chrome:// (rappel, les
ressources identifiées par des URIs chrome bénéficient de plus de privilèges que celles en http:// ou
file://)
La première ligne de ce fichier associe l'adresse relative content/ avec chrome://content
Les autres lignes associent des skins à l'application et des fichiers de localisation pour le support multilangue :
content tp1helloworld file:content/
skin
tp1helloworld global
file:skin/global/
skin
tp1helloworld neofuture file:skin/neofuture/
locale tp1helloworld fr-FR
file:locale/fr-FR/
locale tp1helloworld en-EN
file:locale/en-EN/
Vous pouvez maintenant regarder les répertoires locale et skins, en vous référant au cours...Les
"locales" sont des DTDs XML associant des clés à des valeurs, comme dans des HashMaps. Les skins se
composent d'images, de fichiers CSS etc.
Le coeur de l'application se trouve en réalité dans le répertoire content. Dans cette application
extrêmement simple, il n'y a qu'un fichier XUL décrivant l'interface graphique de l'application, pas de
javascript, etc...
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
2
<window id="main" title="hello world" width="300" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<caption label = "hello world !!" />
</window>
La deuxième ligne se réfère à la skin, ensuite on trouve un widget XUL de type window, vous trouverez
toute la documentation dans les pages de référence de XUL : https://developer.mozilla.org/en/
XUL_Reference
Vous pouvez également aller consulter la table périodique des éléments XUL :
http://www.hevanet.com/acorbin/xul/top.xul
L'élément <caption> est un champs de texte qui est compris dans la fenêtre (il est inclu dedans). Son
label fait référence à une des clés figurant dans les fichiers de localisation.
Création d'un environnement pour développer des extensions
Pour développer des extensions firefox il est pratique d'avoir un profil firefox spécial pour le
développement et un autre profil "classique". Dans le profil pour le développement vous activerez
certaines options de debug javascript, pour la console, etc, vous installerez une extension spéciale pour
les développeurs, et vous pourrez aisément tester vos extensions sans avoir besoin de les packager.
Création d'un nouveau profil développeur
1. Sortez de firefox, plus aucune fenêtre ne dois être ouverte, même pas les fenêtre de téléchargement,
rien, nada, plus de processus firefox ne doit tourner.
2. En ligne de commande, tapez la commande suivante : firefox -CreateProfile test
3. Si une fenêtre firefox s'ouvre c'est que vous n'avez pas bien lu le point 1, retournez à l'étape 1, sinon,
passez à l'étape 4
4. Crééz un raccourci FirefoxDev sur le bureau qui lance firefox de la manière suivante sous
windows : dans le champs "cible" du raccourci : "firefox.exe" -no-remote -P test console -jsconsole. Sous Linux, faites un script de lancement FirefoxDev contenant la
commande équivalente. Ceux qui ne savent pas rajouter firefox dans leur PATH, sous Linux ou sous
Windows, faites le savoir à votre enseignant (!)
5. Faites de même avec un raccourci ou un script FireFoxDefault qui lance "firefox.exe" -P
default -no-remote sous windows (adaptez pour linux)
6. Dans le fichier prefs.js du profil test, il faut spécifier quelques options qui facilitent le déboggage.
Elles sont indispensables si on ne veut pas tourner en rond pendant des heures à rechercher la cause
3
d'un dysfonctionnement.
(Les profils sont stockés dans /home/votrecompte/.mozilla/firefox/ pour Linux, et dans
c:\Documents and Settings\votrecompte\Application
Data\Mozilla\Firefox\Profiles pour Windows)
7. Ajoutez au fichier les lignes suivantes :
user_pref("nglayout.debug.disable_xul_cache", true); // désactive le cache XUL
user_pref("nglayout.debug.disable_xul_fastload", true); // lié au précédent, f
user_pref("javascript.options.strict", true); // active l'affichage de toutes
user_pref("javascript.options.showInConsole", true); // active l'affichage de
user_pref("browser.dom.window.dump.enabled", true); // active le dump sur la c
Installation d'extensions pour l'aide au développement dans le profil
developpeur
Nous vous recommandons d'installer les extensions suivantes :
• Extension Developper : https://addons.mozilla.org/fr/<wbr/>firefox/addon/7434?src=api
• DOM Inspector : https://addons.mozilla.org/fr/<wbr/>firefox/addon/6622 (Attention il semble
souffrir de gros bugs sous windows depuis Firefox 3.6)
• Firebug ou LiveHTTPHeaders pour voir les requêtes HTTP, mais cela devrait déjà être fait.
• Vous pouvez aussi utiliser TopStyle Lite (http://topstyle.softonic.fr/) pour éditer les CSS, il inclue
certaines des extensions CSS spécifiques Mozilla.
• XpathChecker vous permet de vérifier les requêtes Xpath. Pour l'utiliser, ouvrez le fichier XML avec
Firefox, puis faites un clic droit, "view Xpath".
Test de l'éditeur XUL interactif de l'extension "Extension Developer"
Dans le menu outil, lancez l'éditeur XUL de l'extension "extension developer" :
4
Une fenetre s'ouvre. Dans la partie haute, vous pouvez editeur le XUL et en temps réel voir dans la
partie basse l'interface graphique qui se construit. Cet outil est très utile pour tester et construire une
GUI. Rajoutez une ligne pour créer un bouton :
En utilisant la documentation de référence de XUL, ajoutez des éléments à cette GUI
(https://developer.mozilla.org/en/XUL_Reference)
Etude d'une application XUL-Runner
Vous allez maintenant étudier un exemple d'application XUL runner. Télécharger et décompresser
l'archive fakeapp.zip
Procéder de même que pour l'appli "tp1helloworld" pour la lancer : firefox -app
application.ini -jsconsole
Menu et toolbarbutton
Le premier élément ajouté est le menu. Observez cet exemple et référez-vous à la référence
(https://developer.mozilla.org/en/XUL_Reference) pour ajouter un menuitem qui affiche à laide d'un
"alert" le nome de l'application (regardez les attributs de "window" qui font appel à des entités.
Observez ensuite comment sont ajoutés les toolbarbutton (nous y reviendrons)
Insertion d'un browser
Deux autres éléments sont insérés dans une "hbox" : un browser web et une listbox listant le contenu
d'un flux RSS delicious.com (cf exercice suivant). Ajoutez un boutton (toolbarbutton) qui modifie la
page affichée par le browser ( voir attribut src).
5
Modèle de template XML
Dans la même hbox que le browser (séparé par un élement "splitter"), nous avons placé une vbox qui
contient une listbox (regardez les références correspondantes). Cette liste est "peuplé" en allant lire
des données dans un fichier xml (un fil RSS tiré de delicious.com) placé dans le même dossier que
main.xul à l'adresse
chrome://fakeapp/content/delicious.xml
Etudiez l'exemple de template XML proposé dans l'appli en vous aidant de la référence correspondente
dans la doc XUL https://developer.mozilla.org/en/XUL/Template_Guide/XML_Templates ou encore de
la section correspondante du tutoriel https://developer.mozilla.org/en/XUL/Template_Guide(sautez la
partie sur les templates RDF pour le moment)
Ajoutez ensuite une variable qui stocke chaque "link" de chaque item du flux RSS. Pour vérifier la
requête Xpath correspondante, aidez vous de l'extension XPathChecker (présentée plus haut). Dans les
templates XUL XML, la requête XPath est "coupée" en deux. Regardez le code de l'appli exemple:
<listbox datasources="chrome://fakeapp/content/delicious.xml" ref="*" querytype
<template>
<query expr="channel/item">
<assign var="?title" expr="title/text()"/>
</query>
<action>
<listitem uri="?" label="?title" />
</action>
</template>
</listbox>
une première partie est située dans l'attribut "expr" qui dans notre cas va chercher tous les "item" du
fichier RSS. Testez cette requête dans l'extension Xpath Checker après avoir ouvert le fichier
delicious.xml dans FF. !! Attention dans les template XUL les "//" du début de la requête Xpath sont
automatiquement ajoutés. Donc pour tester la requete dans l'extension, faites //channel/item au lieu
de channel/item (vous pouvez vous aider du rappel Xpath ici)
6
Ensuite il suffit d'ajouter un élément "assign" en vous inspirant de celui récupérant le "title". Ensuite
utilisez cette variable comme valeur de l'attribut "value" de l'élément "listitem" que vous ajouterez
(même syntaxe que pour l'attribut label).
Ajoutez ensuite une interaction qui affiche la page correspondant au lien ainsi récupéré dans le
"browser" inséré précédemment. Utilisez pour cela l'attribut "ondblclick".
Insertion de HTML et SVG
Observez maintenant comment peuvent être inséré des éléments HTML ou SVG. Le HTML peut être
inséré tel quel, mais n'oubliez pas les déclarations de namespace pour le SVG.
Approfondissement avec le tutorial XUL !
Sur le site de mozilla on trouve un tutorial bien fait sur XUL : https://developer.mozilla.org/fr/
Tutoriel_XUL
Attention, pour une raison inexpliquée les boutons "suivants" et "précédents" ne fonctionnent pas et
ramènent à la page d'accueil du site mozilla. Revenez à chaque fois au menu du tutorial et repartez
dans la section suivante.
Etudiez le tutorial afin de préparer la prochaine séance où nous étudierons une extension qui exploite
les web services de tagging développés lors des séances précédentes.
Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=Intranet_de_Michel_Buffa/Web_2.0_2010/
Seance_5_et_6_:_Developpement_d%27application_XUL/TP5_:_extensions_firefox%2C_les_bases"
7