Jetpack pour Firefox nous permet de créer facilement des plug-ins Firefox en utilisant uniquement les compétences front-end (HTML/CSS/JS) que nous maîtrisons. Ce qui est probablement encore plus excitant : Jetpack intègre également le framework jQuery.
Qu'il s'agisse d'Adobe Air, de Web OS ou de Jetpack, soyons au moins sûrs que la valeur du front-end sera de plus en plus démontrée dans les opportunités.
Voyons comment créer votre première extension Firefox Jetpack étape par étape :
Étape 1 : Installez le plug-in Jetpack
Adresse du plug-in Jetpack : https://jetpack.mozillalabs.com/install.html
Après avoir installé le plug-in Jetpack, vous pouvez accéder à l'interface locale de Jetpack en tapant à propos de : jetpack dans la barre d'adresse.
Étape 2 : Créez le fichier planabc.js.
Le code détaillé de planabc.js est :
jetpack . statusBar ajouter ( {
html : '<img src="http://www.planabc.net/favicon.ico"/>' ,
largeur : 16 ,
onPrêt : fonction ( widget ){
$ ( widget ) .click ( fonction (){
onglets jetpack . focus . emplacement contentWindow = . "http://www.planabc.net/" ;
});
}
}); jetpack . statusBar . append exécutera un objet JavaScript (l'objet JavaScript a quatre propriétés : html, url, width et onReady).
- Attribut html : Définit le code HTML initial qui sera affiché dans la barre d'état. Dans cet exemple, un simple élément IMG est affiché.
- Attribut url : définit l'URL du contenu HTML externe qui sera affiché sur la barre d'état. Dans cet exemple, cette propriété n'est pas utilisée.
- Attribut width : Définit la largeur du contenu sur la barre d'état (unité : pixels). Dans cet exemple, elle est définie sur 16 pixels, ce qui correspond à la largeur de l'élément IMG lui-même.
- Attribut onReady : définit la fonction à appeler (cette fonction sera appelée une fois la barre d'état créée). Puisque Jetpack intègre le framework jQuery, vous pouvez directement utiliser les propriétés et méthodes de jQuery. Dans cet exemple, une fonction est définie lorsque l' on clique sur l'extension Jetpack , nous modifierons la propriété d' emplacement des onglets jetpack en http://www.planabc.net/ . jetpack tabs . L' objet d'emplacement contentWindow est équivalent à l'objet window , auquel vous pouvez accéder via JavaScript pour accéder aux pages Web.
