Extension Thunderbird XUL

La réalisation d’une extension thunderbird se fait en XUL (XML-based User interface Language). XUL est un langage de description d'interfaces graphiques fondé sur XML créé dans le cadre du projet Mozilla. C’est un mélange entre du Xml et du Javascript.

La réalisation d’une extension thunderbird se fait en XUL (XML-based User interface Language). XUL est un langage de description d'interfaces graphiques fondé sur XML créé dans le cadre du projet Mozilla. C’est un mélange entre du Xml et du Javascript.

L’extension se présente sous la forme d’un fichier XPI (XPInstall). Un fichier XPI est simplement un fichier ZIP contenant les fichiers de l'extension, avec le fichier install.rdf à la racine du ZIP.

A l’intérieur de l’archive, les éléments suivants sont présents :

Le fichier install.rdf est un fichier Xml de description d’installation avec diverses informations (Les informations de version minimum et maximum, description de l’application, …).

Le fichier « manifest » est le descriptif du contenu de l’archive, c’est dans ce fichier que l’on va définir les redéfinitions d’interface utilisateur. Dans notre cas

chrome://messenger/content/messenger.xul

Il s’agit de la fenêtre principale de thunderbird auquel nous allons ajouter deux boutons. La partie skin permet de définir la css qui va nous permettre d’appliquer le style à nos deux boutons.

Sous le dossier « chrome » on divise en 2 sous dossiers l’un pour le Xul et le Javascript « content » et le dossier « skin » qui contiendra la css.

Le fichier sample.xul va contenir le descriptif des deux boutons à ajouter.

Je définis l’importation de ma feuille de style :

<?xml-stylesheet href="chrome://myextension/skin/sample.css" type="text/css"?>

Il faut mettre un overlay qui permet de redéfinir l’interface en « overridant » des éléments déjà existants. Ici il va s’agir de la toolbarpalette où sont contenus les boutons.

<toolbarpalette id="MailToolbarPalette">
   <toolbarbutton id="myextension-button-up" class="toolbarbutton-1"     label="Bonne Adresse" tooltiptext="Bonne Adresse" oncommand="TestUp();"/>
   <toolbarbutton id="myextension-button-down" class="toolbarbutton-1"     label="Mauvaise Adresse" tooltiptext="Mauvaise Adresse" oncommand="TestDown ();"/>
</toolbarpalette>

On va définir de nouveaux boutons avec le tag <toolbarbutton>.
On associe à chacun un id unique, un label et un tooltiptext différents.
L’élément oncommand sert à gérer l’action de clic sur le bouton, il s’agit d’une fonction Javascript qui recevra l’évènement (TestUp,TestDown).
Pour le déploiement, il suffit de compresser au format ZIP le dossier de développement et de le renommer en .xpi.

Un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.