Développer une extension Jetpack
Mozilla Jetpack est une API qui permet de développer très simplement des extensions pour Firefox. Le système s'installe sous forme de plugin dans votre navigateur, vous permettant ensuite de coder directement de nouvelles fonctionnalités en utilisant le langage Javascript.
Voici un exemple d'extension développée avec Jetpack. Celle-ci permet de réduire l'adresse d'une page Internet en utilisant le service Tux-pla.net. Je me suis largement inspiré d'un tutoriel proposé par Damdec.
Voici comment procéder :
- installez l'extension Jetpack dans votre navigateur Firefox
- saisissez l'adresse suivante : about:jetpack
- consultez l'onglet "Tutorial" et "API Reference", pour obtenir de l'aide sur le développement de plugins
- allez dans l'onglet "Develop", collez le code suivant et validez
jetpack.statusBar.append({ html: '<img src="http://www.tux-planet.fr/public/images/icons/attach.png">', width: 18, onReady: function(widget) { $(widget).click(function() { jetpack.tabs.open('http://tux-pla.net/api.php?longurl='+escape(jetpack.tabs.focused.url)); jetpack.tabs[ jetpack.tabs.length-1 ].focus(); }); $(widget).find("img").css({position:"absolute",top:"4",left:"0"}); } });
Ce bout de programme s'occupe de :
- rajouter une image en forme de trombone dans la barre de statut en bas de votre navigateur
- d'ouvrir la page http://tux-pla.net/api.php?longurl=xxx lorsque vous cliquez sur l'image
- ce qui aura pour effet de déclencher l'API de Tux-pla.net et vous proposera une url réduite
Voilà, votre premier plugin Firefox à base de Jetpack est en place. Libre à vous, ensuite, d'en créer de nouveaux selon vos besoins.
3 Commentaires pour "Développer une extension Jetpack"
Flux des commentaires de cet article Ajouter un commentaireJ'ai fais le même test il y a un quelques temps avec minurl http://damdec.fr/labo/test-mozilla-jetpack.html, c'est plutôt sympa de faire un plugin Firefox en 3 lignes de jQuery
Pour faire une page d'installation de votre plugin il suffit d'ajouter dans le head de votre page html : <link rel="jetpack" href="monplugin.js" name="monplugin" />.
En arrivant sur cette page (en ayant jetpack installé) vous devriez voir un message demandant l'installation du plugin.
Je viens seulement de voir que tu me citais dans ton article... :p merci !
@damdec : lol. Sinon merci pour les précision concernant l'installation d'un plugin Jetpack via une pahe Html.