Un guide pratique pour créer facilement votre première extension de navigateur compatible avec Chrome et Firefox.

Note
Ce fichier est au format JSON, ce qui signifie que vous pouvez utiliser n'importe quel outil disponible pour le modifier ou le visualiser.

Seules trois clés sont requises : name, version et manifest_version. Les clés name et version sont spécifiques à votre application et leurs valeurs exactes ne sont pas importantes pour cette explication. Cependant, Chrome refusera de charger votre extension si la version est invalide. Assurez-vous donc qu'il s'agit d'un entier séparé par des points, compris entre 1 et 4, par exemple « 0 » ou « 0.0.1 ».

La version du manifeste est un point délicat : si d’autres navigateurs peuvent prendre en charge les versions 1 et 2, Chrome refusera de charger toute extension sauf si vous utilisez la version 3. L’utilisation de cette version réduit votre contrôle, mais si vous souhaitez que Chrome soit pris en charge, vous devriez l’utiliser.

De plus, le fichier manifeste peut utiliser plusieurs autres clés pour décrire la nature de votre extension. Il s'agit notamment de l'auteur, de la description et des icônes, ce qui peut s'avérer utile pour promouvoir votre extension sur la boutique. La touche Commande permet de définir des raccourcis clavier.

La clé content_scripts est l'une des clés manifestes les plus importantes, car elle permet à votre plugin de charger des fichiers JavaScript ou CSS et de les appliquer à la page web.

"content_scripts": [{
    "matches": ["https://en.wikipedia.org/wiki/*"],
    "js": ["script.js"],
    "css": ["style.css"]
}]

Chaque élément du fichier content_scripts doit contenir une clé matches, qui spécifie les URL sur lesquelles l'extension s'exécute. Les clés `js` et `css` permettent de lister les scripts ou les feuilles de style que l'extension doit charger lors de l'affichage d'une page correspondante.

Écriture du code d'extension

Cet exemple simple simule TampermonkeyTampermonkey est une extension populaire qui permet de personnaliser les pages web. Elle permet notamment de modifier son flux Reddit pour éviter d'afficher uniquement les contenus les plus populaires.

À l'aide d'un fichier manifeste et de quelques lignes de JavaScript, vous pouvez facilement créer une extension web simple. Cet exemple modifiera votre affichage des pages Wikipédia, mais les possibilités sont infinies ; tout ce que vous pouvez faire avec une page web est possible.

{
    "manifest_version": 3,
    "name": "tweakipedia",
    "description": "Tweak Wikipedia pages to our liking",
    "version": "1.0",

    "content_scripts": [{
        "matches": ["https://en.wikipedia.org/wiki/*"],
        "js": ["tweakipedia.js"],
        "css": ["tweakipedia.css"]
    }]
}

Je vais commencer simplement, en utilisant du code CSS pour modifier quelques éléments selon mes préférences. Par exemple, je n'apprécie pas la notification « réviseur et lecture obligatoires » ; elle distrait le lecteur moyen. Je vais donc la masquer en spécifiant la catégorie de l'élément et en définissant sa propriété d'affichage sur « none ».

.box-More_citations_needed { display: none; }

Si vous n'avez pas envie de faire une bonne action, vous pouvez également masquer l'annonce de la collecte de fonds :

.cn-fundraising { display: none; }

Après cela, je trouve les marques de notes de bas de page un peu distrayantes, je vais donc en réduire légèrement l'importance en modifiant leur couleur :

sup a { color: rgb(51, 102, 204, 0.5); }

Notez qu'il s'agit de la couleur par défaut avec un canal alpha de 50 %, ce qui la rend presque transparente. Cela contribue à atténuer la visibilité de ces marques.

En approfondissant ce concept, je souhaite masquer (ou modifier) ​​d'autres éléments, mais uniquement lorsque cela est nécessaire, avec la possibilité d'annuler facilement les modifications. Cela nécessite un peu de JavaScript, mais c'est très simple !

toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");

function toggle_on_key(key, sels) {
    document.addEventListener("keydown", function (ev) {
        if (ev.key === key) {
            document.querySelectorAll(sels).forEach(function (node) {
                node.style.display = node.style.display === "none" ? "" : "none";
            });
        }
    });
}

J'ai créé une fonction pratique pour masquer ou afficher des éléments spécifiques lorsqu'une touche particulière est pressée. Le gestionnaire d'événements recherche simplement la touche correspondante, trouve tous les éléments qui correspondent au sélecteur et les masque ou les affiche en fonction de leur état visuel. Cette fonction utilise la même propriété CSS (display) que la feuille de style, mais elle utilise JavaScript pour une implémentation dynamique.

Installez et utilisez l'extension

Une fois que tout est prêt, il est temps d'installer l'extension et de la tester.

Dans Firefox, accédez à about:debugging, sélectionnez « Ce Firefox » dans la barre latérale, puis cliquez sur le bouton « Charger un module complémentaire temporaire ». Choisissez un fichier (fichier manifeste ou fichier de code) et ouvrez-le.

Dans Chrome, accédez à chrome://extensions/, activez le mode développeur à l'aide du bouton situé en haut à droite, puis cliquez sur le bouton « Charger les fichiers non compressés » en haut à gauche. Sélectionnez ensuite le dossier contenant les fichiers de votre extension.

Vous devriez pouvoir constater le fonctionnement de l'extension sur n'importe quelle page Wikipédia. L'apparence de la page devrait alors ressembler à ceci :

Une fois l'extension installée et activée, la page Wikipédia devrait ressembler à ceci, avec l'avertissement principal masqué et les liens des notes de bas de page dans une couleur plus claire :

Créer une extension de navigateur compatible avec plusieurs navigateurs permet d'élargir l'accès et d'améliorer l'expérience utilisateur sans complexifier le développement. Le respect des normes communes dès le départ réduit les efforts et augmente les chances de succès de l'extension.

Commencez par une petite étape, testez l'extension sur plusieurs navigateurs et développez progressivement ses fonctionnalités pour garantir une haute qualité et une diffusion plus large auprès des utilisateurs.