Commencer avec jpm

Ce tutoriel est un exemple de création d'une add-on en utilisant le SDK.

Prérequis

Pour créer des add-ons pour Firefox en utilisant le SDK, vous aurez besoin:

• Firefox Version 38 ou plus. Si vous avez besoin de travailler avec les versions antérieures de Firefox, vous aurez besoin d'utiliser l'outil cfx. Voir les instructions pour débuter avec cfx .
• l'outil de ligne de commande jpm. Voir les instructions pour l'installation jpm . Une fois que vous avez fait cela, vous serez à la recherche de l'invite de commande.

Initialisation d'un add-on vide

Dans l'invite de commande, créez un nouveau répertoire. Accédez à, tapez jpm init, et appuyez sur Entrée:

mkdir my-addon
cd my-addon
jpm init

Vous serez alors invité à fournir quelques informations sur votre add-on: elles seront utilisées pour créer votre fichier package.json. Pour l'instant, appuyez sur Entrée pour accepter la valeur par défaut pour chaque propriété. Pour plus d'informations sur jpm init, voir le commande de référence jpm .

Une fois que vous avez fourni une valeur ou accepté la valeur par défaut pour ces propriétés, vous verrez le contenu complet de "package.json" que vous validerez.

Mise en œuvre de l'add-on

Maintenant, vous pouvez écrire le code de l'add-on. Sauf si vous avez changé la valeur du "point d'entrée"("main"dans package.json), allez dans le fichier "index.js" à la racine de votre add-on. Ce fichier a été créé dans l'étape précédente. Ouvrez-le et ajoutez le code suivant:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

Enregistrez le fichier.

Ensuite, créez un répertoire appelé "data" à la racine de votre add-on, et enregistrer ces trois fichiers d'icônes dans "data" :

	icon-16.png
	icon-32.png
	icon-64.png

Retour à l'invite de commande, tapez:

jpm run

Ceci est la commande de jpm pour lancer une nouvelle instance de Firefox avec votre add-on installée.

Si Firefox ne peut pas être localisé, vous devrez peut-être fournir le chemin d'accès (par exemple dans Ubuntu):

jpm run -b /usr/bin/firefox

Lorsque Firefox est lancé, dans le coin en haut à droite du navigateur, vous verrez une icône avec le logo de Firefox. Cliquez sur l'icône, et un nouvel onglet sera ouvert avec https://www.mozilla.org/ chargé.

Voilà ce que fait cette add-on. Elle utilise deux modules: le module SDK button_action, qui vous permet d'ajouter des boutons dans le navigateur, et le module tabs, qui vous permet d'effectuer des opérations de base avec des onglets. Dans ce cas, nous avons créé un bouton dont l'icône est celle de Firefox, et ajouté un gestionnaire de clic qui charge la page d'accueil de Mozilla dans un nouvel onglet.

Essayez d'éditer ce fichier. Par exemple, nous pourrions changer la page qui est chargé:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://developer.mozilla.org/");
}

À l'invite de commande, exécutez à nouveau jpm run. Vous ouvrirez cette fois en cliquant https://developer.mozilla.org/.

Empaquetté l'add-on

Lorsque vous avez terminé l'add-on et êtes prêt à la distribuer, vous aurez besoin de l'emballer dans un fichier XPI. C'est le format de fichier installable pour Firefox Add-ons. Vous pouvez distribuer xpi en les publiant sur https://addons.mozilla.org afin que les autres utilisateurs puissent la télécharger et l'installer.

Pour construire un xpi, exécutez simplement la commande jpm xpi dans le répertoire de l'add-on:

jpm xpi

Vous devriez voir un message du type:

JPM info Successfully created xpi at /path/to/getting-started/@getting-started.xpi

Pour voir si cela a fonctionné, essayez d'installer le fichier xpi dans votre navigateur Firefox. Vous pouvez le faire en appuyant sur la combinaison de touches Ctrl+O (O+Cmd sur Mac) à partir de Firefox, ou en sélectionnant l'option "Ouvrir" dans le menu "Fichier" de Firefox. Cela fera apparaître une boîte de dialogue de sélection de fichier: naviguer vers le fichier "@getting-started.xpi", ouvrez-le et suivez les instructions pour installer l'add-on.

Pour distribuer votre add-on, soumettre le fichier xpi à addons.mozilla.org ou exécuter jpm sign si vous souhaitez distribuer l'add-on sur votre propre serveur.

Résumé

Dans ce tutoriel, nous avons construit et emballé une add-on en utilisant trois commandes:

• jpm init pour initialiser un modèle vide d'add-on
• jpm run pour exécuter une nouvelle instance de Firefox avec l'add-on installé, afin que nous puissions l'essayer
• jpm xpi pour emballer l'add-on dans un fichier xpi pour la distribution

Ce sont les trois principales commandes que vous utiliserez lors de l'élaboration d'add-ons SDK. Il y a une documentation de référence complète couvrant toutes les commandes que vous pouvez utiliser et toutes les options qu'elles prennent.

Le code de add-on lui-même utilise deux modules de SDK, action bouton et tabs. Il ya une documentation de référence pour toute les APIs high-level et low-level dans le SDK.

Et en suite?

Pour avoir une idée de certaines des choses que vous pouvez faire avec les API du SDK, essayer de travailler avec certains tutoriels.