TUTORIEL CLIENTS WEB 
XUL et les extensions Firefox
Les extensions du navigateur libre sont composées de fichiers XUL : apprenez à les manipuler en vue d'écrire votre première extension. (19/09/2005)
Une extension Firefox peut prendre toutes les formes et avoir toutes les fonctionnalités imaginables pour une application XUL classique. Pour y parvenir, il n'est pas toujours nécessaire de connaître XUL, mais quelques bases d'XML, de CSS et de JavaScript suffisent à faire des merveilles. Les extensions sont en effet simplement des fichiers XUL qui s'ajoutent à l'interface de Firefox.

Les fichiers
La plus simple des extensions comprend certains fichiers-clefs, regroupés dans un fichier XPI. Ce dernier est tout simplement une archive des fichiers de l'extension, compressée au format zip. Le suffixe ".xpi" indique au navigateur qu'il peut ajouter l'extension à sa banque.

Les données trouvées dans le XPI sont, par défaut :
 - /chrome/nomdelextension.jar : l'extension elle-même,
 - /install.js : le fichier d'installation, en JavaScript pour Firefox pré-0.9 - de fait, n'est plus nécessaire aujourd'hui, selon les cas,
 - /install.rdf : le fichier d'installation, en RDF pour Firefox 0.9  1.x.

Le fichier nomdelextesnion.jar est lui-même un fichier compressé au format zip, pouvant contenir toutes sortes d'éléments, dont :
 - /content/nomdelextension : dossier contenant l'interface même de l'extension - fichiers XUL et JavaScript, description RDF...
 - /skin/classic/nomdelextension : dossier contenant l'habillage de l'extension - fichiers PNG et CSS, description RDF...

Les fichiers RDF d'installation sont cruciaux : ils définissent les chemins d'accès des différents fichiers au sein du .jar (ou, plus précisément, du protocole chrome://). Le fichier équivalent JavaScript laisse plus les coudées franches, mais enregistre néanmoins les noms de l'auteur et de l'extension.

Le contenu du fichier JAR peut être aussi varié que l'extension elle-même. L'un des fichiers standard se nomme content.rdf, que l'on retrouve à la fois dans le dossier /content/nomdelextension et le dossier /skin/classic/nomdelextension. Dans les deux cas, il décrit les principaux fichiers de contenu ou d'habillage utilisés par l'extension.

D'autres types de données existent également, mais ne sont pas obligatoires :
 - chrome.manifest : indique l'emplacement des overlays, des fichiers de localisation et des habillages. Utilisé par Firefox 1.5+, remplace les fichiers content.rdf de Firefox 0.9+.
 - /components : les composants XPCOM fournis par  l'extension,
 - /locale : les fichiers de localisation,
 - /defaults : les fichiers par défaut.

Une simple extension
Le test du "Hello World" vous permettra sans doute de saisir la facilité de création d'une extension. Celle-ci consiste à ajouter une entrée "Hello World" au menu "Outils" de Firefox, et déclencher l'affichage d'une alerte lors de sa sélection.

Il faut commencer par créer la suite de dossier /content, et créer un contents.rdf de cette forme :

<?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 about="urn:mozilla:package:root">
    <RDF:li resource="urn:mozilla:package:hello"/>
  </RDF:Seq>
  <RDF:Description about="urn:mozilla:package:hello"
    chrome:displayName="Hello World"
    chrome:author="JDN Dev"
    chrome:authorURL="http://www.example.com/hello"
    chrome:name="hello"
    chrome:extension="true"
    chrome:description="Bonjour toute la terre! euh, le monde!">
  </RDF:Description>
  <RDF:Seq about="urn:mozilla:overlays">
    <RDF:li resource="chrome://browser/content/browser.xul"/>
  </RDF:Seq>
  <RDF:Seq about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://hello/content/helloOverlay.xul</RDF:li>
  </RDF:Seq>
</RDF:RDF>


Ce fichier décrit le nom de notre package et l'extension elle-même, indique qu'elle étend le navigateur lui-même (browser.xul), avec le fichier helloOverlay.xul, qui se trouve lui aussi dans le dossier /content.

Le fichier helloOverlay.xul décrit ensuite l'interface précise de l'extension :

<?xml version="1.0"?>
  <overlay id="helloOverlay" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="chrome://helloworld/content/helloOverlay.js">
  </script>
  <popup id="contentAreaContextMenu">
    <menuitem id="hello" label="Hello World" insertafter="context-stop" oncommand="hello();"/>
  </popup>
  <menupopup id="menu_ToolsPopup">
    <menuitem insertafter="devToolsSeparator" label="Hello World" oncommand="hello();" />
  </menupopup>
</overlay>


Ce même fichier XUL fait un appel sur helloOverlay.js, le fichier JavaScript qui gère les évènements et actions de notre extension. Celui-ci est assez simple :

function hello() {
  alert("Hello World");
  }


Reste à ajouter le fichier install.rdf :

<?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>{ea979a68-2df8-4f1c-8edd-848cd44a9146}</em:id>
    <em:name>Hello World</em:name>
    <em:version>1.0</em:version>
    <em:description>Bonjour toute la terre! euh, le monde!</em:description>
    <em:creator>JDN Dev</em:creator>
    <em:homepageURL>http://example.com</em:homepageURL>
    <em:file>
      <Description about="urn:mozilla:extension:file:hello.jar">
        <em:package>content/</em:package>
      </Description>
    </em:file>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>0.7</em:minVersion>
        <em:maxVersion>1.9</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>


  Forum

Réagissez dans les forums de JDN Développeurs

L'identifiant peut être créé à partir d'une application en ligne comme GUID Generator. Le second identifiant, au sein de targetApplication, est spécifique à Firefox.
Puis à zipper le tout en utilisant les bons noms de fichier et d'extension.

Voici comment organiser ses dossiers et fichiers :

chrome/
+- hello.jar
   +- content/
  +- contents.rdf
   +- helloOverlay.js
   +- helloOverlay.xul
install.rdf

Il est conseillé de créer un dossier "hello" contenant le dossier "content" et ses fichiers, de compresser ce dossier "hello" en hello.zip, puis le renommer en hello.jar et glisser ce .jar dans le dossier "chrome".
Le tout est compressé dans un fichier Zip, par exemple hello.zip, puis renommé en hello.xpi. En chargeant le XPI, Firefox devrait reconnaître l'extension et l'installer.

 
Xavier Borderie, JDN Développeurs
 
Accueil | Haut de page
 
 





Quand achetez-vous le plus en ligne ?
Du lundi au vendredi
Le samedi
Le dimanche

Tous les sondages