TP5 : extensions firefox, les bases

Introduction

Dans ce TP vous allez faire vos premières armes avec le développement d'extensions firefox. 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 :

 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

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