Développer une extension Jetpack


Netbook
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.

Développer extension Mozilla Jetpack

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 commentaire
  •  

    J'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.

    RépondreRépondre
    damdec , le 22 septembre 2009 à 09:20
  •  

    Je viens seulement de voir que tu me citais dans ton article... :p merci !

    RépondreRépondre
    damdec , le 22 septembre 2009 à 15:12
  •  

    @damdec : lol. Sinon merci pour les précision concernant l'installation d'un plugin Jetpack via une pahe Html.

    RépondreRépondre
    pti-seb , le 22 septembre 2009 à 23:11
 

Ajouter un commentaire

actualité android apache apple astuce astuces bash bilboblog blog boot chrome clavier commande commandes conky date debian Desktop développement elementary exploit faille fedora firefox flash gimp gnome google graphique Graphisme hack hacking Hardware humour intel internet iphone jailbreak Jeux Kde kernel libre Linux log logiciels Logiciels Libres lucid lynx maemo mail maquette metasploit microsoft mobile mockup monitoring mozilla multi-touch musique mysql n900 nautilus nokia noyau openoffice open source password photos php Planet publicité redhat red hat rpm réseau screenshot script serveur serveurs shell sql ssh statistiques sysadmin system Sécurité thème tux-planet tv twitter ubuntu unity vidéo vidéos vlc voyage wallpaper windows wordpress yum