Les overlays de XUL, des extensions ultimes ?

Je ne me suis pas intéressé au XUL pour faire des extensions Firefox, mais avant qu'il y ait le XulRunner, on lancait les XUL sur Firefox. Comment marchent ces extensions ? Il faut pouvoir installer et désinstaller sans problème, et aussi manipuler toute l'interface. On remarque même des extensions qui s'occupent uniquement de la localisation.

Tout ça est possible facilement grâce aux overlays.

Un problème

C'est gentil de faire des écrans XUL, mais on est rapidement confronté à un problème très connu lorsque l'on a un projet plus grand. C'est que plusieurs pages peuvent avoir une partie commune, l'exemple le plus simple est un menu. C'est justement le rôle des overlays.

Une solution

On a vu dans le billet précédent le XBL, on aurait pu utiliser ces fameux composants pour inclure des morceaux de XUL. Mais pour utiliser des overlays, on n'est pas obligé de l'écrire dans le XUL !

Et oui, d'où le titre de ce billet il est possible de définir des fichiers qui doivent être inclus dans les fichiers XUL, ca se passe autre part, dans le chrome.manifest, un fichier qui sert de déclaration à l'application ou aux extensions.

Comment ca marche ?

Je ne vais pas expliquer comment déclarer tout ca, je vais juste montrer l'idée générale d'ajouter où l'on veut des éléments XUL.

Par exemple, une barre de menu, voici le contenu du XUL :

<toolbox id="toolbox">
	<menubar id="menu">
		<menu id="menu-fichier" label="Fichier">
			<menupopup>
	        		<menuitem id="menu-fichier-nouveau" label="Nouveau"/>
	        		<menuitem id="menu-fichier-ouvrir" label="Ouvrir"/>
	        	</menupopup>
		</menu>
	</menubar>
</toolbox>

On aimerait ajouter un bouton Aide après le bouton Fichier. Et bien c'est très simple, voilà le contenu du fichier overlay lié au fichier XUL au dessus :

<menubar id="menu">
	<menu id="menu-aide" label="Aide">
		<menupopup>
	        	<menuitem id="menu-aide-apropos" label="A propos"/>
	        </menupopup>
	</menu>
</menubar>

En fait, c'est grâce aux id qu'on sait où placer les éléments. Comme ce sont des identifiants uniques, on ne peut pas se tromper de cible. Le bouton Aide est ajouté juste après le bouton Fichier. C'est le comportement par défaut, mais on peut bien sûr le mettre avant, je ne rentrerai pas dans les détails.

C'est de cette façon qu'une extension de Firefox peut ajouter une nouvelle barre d'outils, une barre latérale et tous les menus qu'ils faut un peu partout. Un seul fichier overlay pourrait suffire.

Conclusion

C'est un moyen simple d'étendre une application avec un système où on ne fait qu'ajouter des fichiers et donc de pouvoir les retirer sans risque s'il y a un problème ou un conflit, pas comme des patches qui vont modifier des sources, supprimer des fichiers, remplacer des dossiers etc.

Pour ajouter un thème ou une traduction, ca marche de la même façon. Si quelqu'un fait une extension en anglais, je pourrais fournir une traduction en français avec une autre extension (s'il a écrit tous ses textes comme il faut bien sûr, on verra ca dans un autre billet :) ).

Ca veut dire qu'il faut créer des applications en mettant des id un peu partout même si on ne les utilise pas, pour permettre un ajout d'overlay plus facilement et pour un meilleur contrôle. J'imagine que c'est de toute facon possible d'utiliser le Javascript pour cibler aussi. Pour en savoir plus, il y a xulfr.org et aussi developer.mozilla.org que je viens de découvrir.

Commentaires

2. Le mardi, février 14 2006, 00:59 par neolao

En fait, en lisant simplement la doc, j'avais mon blog à coté, et j'ai pris des notes sur des billets hors ligne. J'en ai encore d'autres en réserve.

C'est vraiment pas dur de comprendre je trouve, j'ai commencé à lire samedi, mais j'ai pas fait du non-stop non plus hein :)

4. Le mardi, février 14 2006, 01:07 par neolao

Plus que ca lol
Samedi, il y a eu un 24, un Lost, un Battlestar galactica, un Stargate Atlantis, un Surface et 2 Full House pour dimanche, sans compter l'épisode de naruto et les scans de mangas :)