Introduction à Jetpack

http://javascript.training.free.fr/jetpack/

par Grégory PAUL - @paulgreg

Valid XHTML 1.0 Strict

Avant Jetpack

helloworld.XPI :
helloworld/
  chrome.manifest
  install.rdf
  content/
    overlay.js
    overlay.xul
    hello.xul
  locale/
    en-US/
      overlay.dtd
      hello.dtd
  skin/
      overlay.css

Jetpack ?

API

Premier contact

Installation de Jetpack depuis jetpack.mozillalabs.com puis "about:jetpack", onglet "Develop" puis :

jetpack.statusBar.append({ html: "Boom!", width: 45, onReady: function(widget){ $(widget).click(function(){ jetpack.notifications.show( "Booming!" ); var tab = jetpack.tabs.open('http://www.google.com/'); tab.focus(); tab.onReady(function() { $(jetpack.tabs.focused.contentDocument) .find("#logo").css({border:"10px solid black"}) .animate({ width: "50%", height: "50%" }); } ); }); }});

"Try it out" ; c'est tout !

Exemples

Exercice

Faites une barre de recherche Google de ce type : barre de recherche google

Le bouton "search" appelle l'url http://www.google.com/search?q= suivi du terme de recherche.

Une solution possible

jetpack.statusBar.append({ html: <> <body><input type="text" id="search" value=""/> <input type="submit" id="submit" value="search"/></body> </>, width: 300, onReady: function(widget){ $("#submit", widget).click(function(){ var search = $("#search", widget).val(); if (search != '') { var tab = jetpack.tabs.open('http://www.google.com/search?q=' + search); tab.focus(); } }); } });

Déploiement de Jetpack

  1. sur jetpackgallery.mozillalabs.com
  2. ou directement dans votre page :
    <link rel="jetpack" href="votre-jetpack.js" />
    ce qui affiche une notification de ce type si Jetpack est présent :

Et lest tests unitaires ?

Ressources