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

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 multi-langue :

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"?>
<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

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.
En ligne de commande, tapez la commande suivante : firefox -CreateProfile test
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
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 (!)
Faites de même avec un raccourci ou un script FireFoxDefault qui lance "firefox.exe" -P default -no-remote sous windows (adaptez pour linux)
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 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)
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, facultatif
 user_pref("javascript.options.strict", true); // active l'affichage de toutes les erreurs d'exécutions
 user_pref("javascript.options.showInConsole", true); // active l'affichage de toutes les erreurs de syntaxe
 user_pref("browser.dom.window.dump.enabled", true); // active le dump sur la console

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" :

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

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="xml" flex="1">
  <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)

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"

Mots clés:

Attacher fichier ou image

Fichiers (2)