Dans cet article, nous allons créer une WebExtension pour Firefox, de A à Z. Ce module ne fait qu'ajouter une bordure de couleur rouge sur toutes les pages chargées depuis le site "mozilla.org" et tous ses sous-domaines.

Le code source de cet exemple est disponible sur GitHub : https://github.com/mdn/webextensions-examples/tree/master/borderify.

Dans un premier temps, il vous faut Firefox version 45 ou supérieure.

Ecriture de la WebExtension

Créez un nouveau répertoire et positionnez-vous dedans :

mkdir borderify
cd borderify

manifest.json

Créez un nouveau fichier nommé "manifest.json" directement dans le répertoire "borderfy" et tapez-y le contenu suivant :

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a solid red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • Les trois première clés : manifest_version, name, et version sont obligatoires et contiennent des métadonnées élémentaires qui sont nécessaires au module.
  • description est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module.
  • icons est optionnelle, mais recommandée : elle permet de spécifier l'icône du module qui s'affichera dans le gestionnaire de module.

La clé la plus intéressante ici est content_scripts, qui demande à Firefox de charger un script dans toutes les pages dont l'URL correspond à un motif spécifique. Dans notre cas, nous demandons à Firefox de charger un script appelé "borderify.js" dans toutes les pages HTTP ou HTTPS du domaine "mozilla.org" et tous ses sous-domaines.

Si vous utilisez une version de Firefox inférieure à 48, il vous faut une clé supplémentaire nommée applications :

"applications": {
  "gecko": {
    "id": "borderify@example.com",
    "strict_min_version": "42.0",
    "strict_max_version": "50.*",
    "update_url": "https://example.com/updates.json"
  }
}

icons/border-48.png

Le module doit posséder une icône qui sera affichée à côté de la liste des modules du gestionnaire de module. Le fichier "manifest.json" a déclaré une icône "icons/border-48.png".

Créons le répertoire "icons" directement sous le répertoire "borderify". Enregistez une icône nommée "border-48.png".  Vous pouvez utiliser celle de notre exemple, qui est tirée du jeu d'icônes Google Material Design, et est utilisable selon les termes de la license Creative Commons Attribution-ShareAlike.

Si vous décidez de fournir votre propre icône, sa taille devra être de 48x48 pixels. Il est aussi possible de fournir une icône de 96x96 pixels, adaptée à l'affichage en haute résolution et, dans ce cas, elle devra être spécifiée par la propriété 96 de l'objet icon dans le fichier "manifest.json" :

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

Une alternative est de fournir un fichier SVG qui sera automatiquement mis à la bonne échelle.

borderify.js

Enfin, créez un fichier nommé "borderify.js" directement dans le répertoire "borderify" et insérez-y ceci :

document.body.style.border = "5px solid red";

Ce script sera chargé dans chaque page dont le motif correspond au motif définit par la clé content_scripts du manifest.json. Ce script a un accès direct au document à l'instar des scripts chargés par la page elle-même.

Essai

D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit :

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Installation

Ouvrez "about:debugging" dans Firefox, cliquez sur "Load Temporary Add-on" et sélectionnez n'importe quel fichier du répertoire de votre module :

Le module est dorénavant installé et résidera jusqu’à ce que vous redémarriez Firefox.

Une autre alternative est d’exécuter la WebExtension depuis la ligne de commande à l'aide de l'outil web-ext.

Test

Rendez-vous sur une page web du domaine "mozilla.org". Vous devriez y voir une bordure rouge qui entoure la page :

Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les content scripts sont bloqués sur ce domaine.

Expérimentez un peu en modifiant le contenu du script, en changeant par exemple la couleur de la bordure ou en altérant le contenu de la page. Puis sauvegardez le content script, rechargez les fichiers du module en cliquant sur le bouton "Reload" dans about:debugging. Les changements sont immédiats :

Empaqueter et publier

Afin que d'autres personnes puissent utiliser votre module, il vous faut l'empaqueter et le soumettre à la signature de Mozilla. Pour en apprendre plus, voir "Publier votre extension".

Et ensuite ?

Maintenant que vous avez une idée du processus de développement d'une WebExtension pour Firefox, vous pouvez :

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : hellosct1, Enche, DeflatedBimbo
 Dernière mise à jour par : hellosct1,