[Firefox] Creation d’une barre d’outils

Et quand je dis création, je ne parle pas de la barre personnelle que l’on peut afficher en 2 clics. Non la je vous parle d’une vrai création, avec du code et tout.
Vous avez surement remarqué que les extensions pour firefox finissent par .xpi. Ce n’est en fait qu’un dossier zippé. Pour s’en rendre compte il suffit d’ouvrir un .xpi avec winrar par exemple et vous verrez apparaitre tout le contenu de cette extension.

Toutes les informations dont on pourrait avoir besoin se trouvent au developer center de Mozilla. Voici un tutoriel simple pour commencer.

Arborescence

Un package xpi contient 3 choses :
un fichier chrome.manifest, un fichier install.rdf et un dossier chrome

Creer le manifeste d’installation

C’est le fichier install.rdf.
Voici son contenu :

<?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>absurdsystem@gmail.com</em:id>
  <em:name>Absurdsystem Blog Toolbar</em:name>
  <em:version>0.1</em:version>
  <em:iconURL>chrome://absurdsystemtoolbar/skin/logo.png</em:iconURL>
  <em:targetApplication>
  <Description>
  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
  <em:minVersion>1.5</em:minVersion>
  <em:maxVersion>3.*.*</em:maxVersion>
  </Description>
  </em:targetApplication>

 <em:creator>Absurdsystem</em:creator>
  <em:description>Toolbar</em:description>
  <em:homepageURL>http://www.absurdsystem.com/</em:homepageURL>
  </Description>

</RDF>

Rien de difficile. Reportez vous au tutoriel que j’ai cité avant pour savoir comment remplir ce fichier.
Juste un point sur lequel je vais revenir : l’id de l’application.
Jusqu’ici j’utilisais toujours le même numéro mais d’après mes tests cela peut créer des erreurs.
Le plus simple est de générer un nouveau code pour chaque extension que vous ferrez.
Il y a un générateur à cette adresse GuidGen.com

Creer un fichier chrome.manifest

Son contenu :

content absurdsystemtoolbar jar:chrome/absurdsystemtoolbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://absurdsystemtoolbar/content/absurdsystemtoolbar.xul
skin absurdsystemtoolbar classic/1.0 jar:chrome/absurdsystemtoolbar.jar!/skin/

Les explications sont là.
En simplifiant, ce fichier sert à definir les différents chemins de votre package xpi.
« content » par exemple est pour les fichiers xul ainsi que js.
« skin » sera pour les images et le css

Contenu du dossier chrome

Dans ma barre d’outils ce dossier contient un seul fichier .jar, qui lui même est une archive de 2 dossiers, à savoir content et skin.
Apparemment rien n’oblige à utiliser une archive .jar mais comme je n’ai pas testé sans, on fera avec.

Mon dossier « skin » contient les différentes icônes qui seront dans ma barre d’outils.
Le dossier « content » contient un fichier xul et un js.
Le js est un fichier javascript classique qui contient une simple fonction mais j’y reviendrais plus tard.

Les overlays XUL

Le fichier xul est celui qui va vous permettre de créer votre barre d’outils.
C’est dans celui ci que l’on défini les différents boutons que l’on veut etc.

Voici son contenu :

<?xml version="1.0"?>
<overlay id="absurdsystemtoolbar-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://absurdsystemtoolbar/content/absurdsystemtoolbar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="absurdsystemtoolbar-toolbar" context="toolbar-context-menu"
accesskey="a" class="chromeclass-toolbar"
toolbarname="Absurdsystem Blog Toolbar" hidden="false" persist="hidden">

<!-- Home -->
<toolbarbutton  label="Absurdsystem Blog"
 id="absurdsystemtoolbar-button-home"
image="chrome://absurdsystemtoolbar/skin/logo.png"
onclick="absurdsystem_loadurl('http://www.absurdsystem.com/index.php',event);"
tooltiptext="Absurdsystem.com " />
<!-- <toolbarseparator /> -->

<!-- Twitter -->
<toolbarbutton label="Twitter" id="absurdsystemtoolbar-button-twitter"
accesskey="t" image="chrome://absurdsystemtoolbar/skin/twitter.png"
onclick="absurdsystem_loadurl('http://twitter.com/absurdsystem',event);"
tooltiptext="Suivez moi sur Twitter!" />

</toolbar>
</toolbox>
</overlay>

Pour vous aider : Ici et là.

Ce que moi j’ai fait c’est une toolbar avec 2 boutons (index du site et Twitter).
Il n’y a pas que des boutons standards. On peut aussi faire des listes déroulantes, des champs de recherches…
Par contre il faut fouiller le site de Mozilla pour trouver l’information que l’on recherche.

J’y ai aussi intégrer un fichier js car lors du développement de ma barre, j’ai constaté que les boutons s’ouvraient dans la même fenêtre/onglet (en temps normal j’utilise ma molette pour ouvrir un nouvel onglet). J’ai donc « récupéré » une fonction permettant de gérer le clic molette. Voila pourquoi un fichier js est présent mais on peut s’en passer.

Une dernière chose. Attention lorsque vous créez Le fichier jar ou xpi.
Moi qui utilise winrar je me suis fait avoir plusieurs fois.
Vous devez créer une archive zip. Par défaut winrar fait des extensions rar (normal me direz vous ^^)

Voila j’espère avoir à peu près bien expliqué.
N’hésitez pas à me contacter si vous avez besoin d’aide.
Pour finir voici ma barre d’outils.
Vous pouvez analyser son code facilement, j’y ai laissé quelques commentaires.
Téléchargez d’autres barres d’outils pour comprendre leur fonctionnement et découvrir de nouveaux boutons, fonctions etc.