avril
2010
Même si à première vue la création d’un addin pour Firefox peut paraître simple, certaines choses sont à connaître si on ne veut pas galérer plus que nécessaire. Voilà donc une liste de truc et astuces / tutoriels qui vous aidera à développer plus facilement des plugins pour Firefox.
Tout d’abord, voici un tutoriel sur BornGeek détaillant au pas à pas la création d’un addin pour Firefox. Très bien fait, il suffit à lui seul pour la création d’addins basiques.
En parallèle, le pôle développeur du site des addins de Firefox comprend des tutoriels ainsi que des articles assez intéressants, de même que l’espace développeur de Mozilla contient toute la documentation requise.
Mais certaines choses, même si elles ne sont pas obligatoires, valent mieux pour notre addin quand elles sont respectées. Je pense par exemple à la partie javascript de l’addin, certaines règles sont à respecter pour une meilleure intégration avec Firefox. Mark A. Ziesemer a rédigé un article sur la question, tandis qu’un guide de programmation est présent sur l’espace développeur de mozilla.
Une chose à connaître aussi est le cache de Firefox. Mettons par exemple que notre addin va contacter un fichier XML distant afin de récupérer des informations. Le cache de Firefox va fausser cette récupération, faisant croire à l’addin que le fichier n’a pas été modifié alors qu’en réalité c’est le cas. Il suffit alors d’utiliser la fonction Math.random() en javascript, et d’ajouter le résultat en tant que paramètre de l’url, afin de faire croire à Firefox que l’url n’est jamais la même. Ainsi nous n’aurons pas le contenu du cache mais le vrai fichier XML.
Une autre chose à savoir est que l’utilisation de la méthode Load de XMLDOM sur une fichier distant peut provoquer une erreur de sécurité, ce qui n’est pas le cas avec un XMLHttpRequest. Ce dernier est donc à privilégier.
La méthode setTimeout est dépréciée par Mozilla, il faudra donc utiliser à la place une classe interne. Il s’agit de la classe timer, qui s’instancie de la façon suivante :
Et pour lancer un compte à rebours, on peut utiliser sa méthode initWithCallback :
loadEvent est un objet implémentant la méthode notify, qui sera utilisée par le timer :
notify: function(timer)
{
alert('fin du timer');
}
};
Dans cet exemple, au bout de 2 secondes une fenêtre s’affichera, marquant « fin du timer ».
Un service pratique est celui des observers, permettant entre autre de savoir quand votre addin a été désinstallé.
Il faut tout d’abord instancier ce service :
Il faut ensuite rajouter un observer, en définissant un objet définissant une méthode observe, ainsi que le type de l’observer :
observerService.addObserver(uninstallObserver, "em-action-requested", false);
uninstallObserver est l’objet implémentant la méthode observe, regardons son code :
observe: function(aSubject, aTopic, aData) {
try {
var item = aSubject.QueryInterface(Components.interfaces.nsIUpdateItem);
if (item.id != PLUGIN_ID) {
return;
}
if (aData == "item-uninstalled") {
preferencesService.deleteBranch("extensions.toolbar");
}
} catch (e) {
}
}
};
L’id du plugin ayant levé cet appel est récupéré puis comparé à l’id de notre plugin (PLUGIN_ID est une constante ayant pour valeur l’id du plugin définit dans le fichier install.rdf). Si c’est bien notre plugin qui est à la source de cet appel, et si l’action est la désinstallation de ce plugin, alors les préférences du plugin appartenant à la branche « extensions.toolbar » sont supprimmées.
Pour rester sur les préférences, qui sont déjà vues dans le tutoriel de BornGeek, un autre tutoriel sur rietta.com les décrit plus en détail, ainsi que la documentation officielle sur mozilla.org.
Avec tout ça, plus aucune excuse pour ne pas les utiliser dans votre addin !
Une autre chose à connaître est l’eventListener, qui permet par exemple de lancer une action lors du chargement de Firefox. Combiné aux préférences, ça permet par exemple d’ouvrir un onglet avec une page vers votre site lors du premier lancement de Firefox après avoir installé votre addin.
Il faut tout d’abord ajouter un eventListener :
window.addEventListener("load", eventLoad, false);
Avec le code précédant, on se branche sur l’événement load de Firefox. eventLoad est une méthode qui sera appelée à ce moment là.
{
if(preferencesService.getBoolPref(PREF_FIRSTRUN))
{
preferencesService.setBoolPref(PREF_FIRSTRUN, false);
timer.initWithCallback(loadEvent, 2000, Components.interfaces.nsITimer.TYPE_ONE_SHOT);
}
}
PREF_FIRSTRUN est une constante contenant le nom de la préférence qui va indiquer si c’est le premier lancement de Firefox depuis l’installation de l’addin. Si c’est le cas, la préférence est modifiée, et un compte à rebours est déclenché via le timer. Il suffira alors de mettre le code suivant dans loadEvent afin d’ouvrir un nouvel onglet :
gBrowser.selectedTab = gBrowser.addTab("http://www.google.com");
Passons maintenant au déploiement et aux mises à jours.
Le premier est déjà abordé dans le tutoriel de BornGeek ainsi que sur mozilla.org et n’est pas bien compliqué. A partir de là vous pouvez tester votre addin.
Quand aux mises à jour, il suffit de connaître le process pour que ça passe tout seul. Il est décrit dans un autre article de BornGeek ainsi que sur mozilla.org.
L’ordre à retenir est le suivant :
– Ajout de la clé dans le fichier install.rdf via McCoy
– Création du XPI
– Récupération du hash du XPI
– Ajout du hash dans le fichier update.rdf dans la section correspondante
– Signature du fichier update.rdf via McCoy
Il ne faut pas retoucher le fichier update.rdf sous peine de devoir le resigner.
Pour le hash, il existe une exention shell pour windows, HashTab, qui permet d’avoir le hash d’un fichier à partir d’un simple clic-droit -> propriété.
Update:
Depuis j’ai eu à faire une chose dont je suis pas fier : ouvrir le menu lors du passage de la souris.
C’est pas ergonomique du tout et ça bouleverse les habitudes des utilisateurs, mais quand on décide pas…
Du coup, pour mettre ça en place je me suis d’abord dit que ça allait être simple, il y a sûrement un event onmouseover auquel préciser une méthode javascript et ça roulerait.
Bah en fait non. Bon, bah alors y’a plus qu’à rajouter un eventlistener sur le mouseover de l’élément que j’me suis dit. Oui, mais lors du chargement de la feuile .js, l’élément n’est pas encore défini. Solution : ajouter un eventlistener sur le load de la fenêtre, et dans le load, ajouter un eventlistener sur le mouseover de l’élément ciblé. Et dans le mouseover, on peut enfin ouvrir le menu.
Plus de code pour plus de comprégension :
function PlopTB_Load ()
{
document.getElementById('PlopTB-MainMenu').addEventListener("mouseover", PlopTB_MainMenuMouseOver, false);
},
function PlopTB_MainMenuMouseOver ()
{
var toolbarButton = document.getElementById('PlopTB-MainMenu');
if(!toolbarButton.open)
{
toolbarButton.open = true;
}
}
Et voilà qui termine cette série de liens et trucs et astuces, en vous souhaitant un bon développement d’addin Firefox !