Créer une WebExtension

Les WebExtensions sont les modules complémentaires (ou add-on) que nous ajoutons à nos différents navigateurs pour leurs ajouter des fonctionnalités. Elles ont l'avantage d'être, de manière générale et avec parfois quelques adaptations, compatibles avec l'API de plusieurs navigateurs comme Chrome, Firefox, Opéra, Edge (oui oui !). Dans cet article, nous allons le créer et le tester en suivant les directives fournies par Mozilla.

Web-ext

Web-ext est un utilitaire récupérable via NPM nous permettant de tester rapidement notre add-on.
Il va, de plus, permettre de le signer afin qu'il soit installable par tous.

Installation

npm install --global web-ext

Test d'un add-on

web-ext run

Cela va lancer un Firefox ayant notre add-on d'installé.
Il est à noter que, par défaut, l'add-on est automatiquement mis à jour lorsque qu'il subit une modification, sans avoir à relancer le navigateur.

Signature d'un add-on

web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET

Cette étape nécessite la création d'un compte développeur sur le site de Mozilla au sein duquel on pourra générer les clé API JWT_ISSUER et JWT_SECRET.
Une fois la signature effectuée, l'add-on sera disponible dans le compte développeur ainsi que dans le dossier courant.
Il est alors possible, de le publier sur le store de Mozilla ou le diffuser par ses propres moyens.

Réalisation de l'add-on

L'objectif de notre add-on sera de modifier la structure de la page du blog Sodifrance Netapsys en supprimant certains éléments.
Une fois cette modification terminée, nous créons une notification.

La structure

Nous avons obligatoirement besoin d'un fichier manifest.json. Ce dernier contient la configuration de l'add-on, les scripts à exécuter, dans quel contexte, les demandes de permissions ...
Dans notre cas, nous aurons aussi besoin :

  • d'un fichier CSS permettant de modifier le style des éléments
  • d'un fichier Javascript, inclus dans la page du blog, permettant de supprimer des éléments, et signalant la fin du traitement
  • d'un fichier Javascript, en arrière plan, réceptionnant le message de fin de traitement et l'affichant dans une notification

Il est à noter que les fichiers Javascripts inclus dans la page ne peuvent par intéragir avec toutes les API de Firefox, d'où la nécessité d'en avoir en arrière plan.

{
    "description": "Custom blog",
	// Permission demandée par l'add-on, nécessaire pour utiliser certaines API
    "permissions": ["notifications"], 
    "manifest_version": 2,
    "name": "CustomBlog",
    "version": "1.0",
    "homepage_url": "https://blog.netapsys.fr/",

    // Scripts qui seront inclus aux pages matchant le pattern
    "content_scripts": [{
        "matches": ["*://blog.netapsys.fr/*"], // URLs d'inclusion
        "js": ["customize.js"], // Fichiers javascript à inclure
        "css": ["customize.css"] // Fichiers CSS à inclure
    }],

    // Scripts qui seront exécutés en arrière plan et qui pourront intéragir avec les API de Firefox
    "background": {
        "scripts": ["background-script.js"]
    }
}
manifest.json
// Suppression des champs
document.querySelector("header").remove();
document.querySelector("#secondary").remove();

// Envoie d'un message
browser.runtime.sendMessage({ "titre": "Terminé", "contenu": "Modification de la page terminée" });
customize.js
/**
* Modification des éléments
*/

#main {
    max-width: none;
}

#primary {
    width: 100%;
}

article {
    float: left;
    width: 30%;
}
customize.css

 

function notify(message) {
    // Créé une notification avec ce qui a été envoyé par le fichier customize.js
    browser.notifications.create({
        "type": "basic",
        "title": message.titre,
        "message": message.contenu
    });
}

// Ecoute des messages envoyés
browser.runtime.onMessage.addListener(notify);
background-script.js

 

Et voilà le résultat ! (notez la notification en bas à droite)

 

Source : https://developer.mozilla.org/fr/Add-ons

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *