Ecrire une extension pour Google Chrome

Un simple plugin pour gagner du temps

20 février 2017

Si vous utilisez Google Chrome vous avez probablement déjà utilisé une extension comme adblock.

Une extension chrome n'est rien de plus qu'une fonction javascript. Chrome fournit une API que cette fonction peut utiliser pour manipuler les données du client, le DOM de la page etc...

Une extension basique se compose de deux parties : un manifeste et un script js.

Le manifeste contient les informations liées au plugin : nom de l'extension, nom du développeur, version, pages sur lesquelles il doit s'appliquer, chemin vers le script JS etc... Vous pourrez trouver d'autres exemples dans la documentation.

Le script JS contient le code javascript de l'extension. Vous pouvez inclure certaines bibliothèques comme jQuery ou rester en JS vanilla (natif). Le code contenu dans ce fichier aura directement accès au DOM de la page.

Prenons l'exemple d'un site qui fait apparaître une modal intempestive, notre extension doit pouvoir la supprimer dès qu'elle apparaît, sachant qu'elle n'est pas forcément présente dans le DOM dès le chargement de la page.

manifest.json

{
      "name" :"Modal blocker",
      "author": "Nicolas GAUTRON",
      "manifest_version" : 2,
      "version" :"1.0",
      "description" :"Block the modal",
      "content_scripts": [
               {
                  "matches": ["*://*.foo.com/*"],
                  "js": ["modal_blocker.js"]
                }
        ]
}

modal_blocker.js

var blockModal = function () {

        /* Cherche le noeud de la modal */
        var modal_to_block= document.getElementById('modal_to_block');

       
        if (!modal_to_block) {
                /* Rien à faire si la modal n'existe pas sur la page */
                return;
        }

        console.log('Modal blocked, just saved you 3 seconds');

        /* Les modals sont souvent contenues dans un conteneur global avec un overlay etc..
         * Il faut rechercher ce noeud parent en parcourant la hiérarchie de la modal.
         */

        var modal_with_overlay = (function (el, selector) {

                var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

                while (el) {
                        if (matchesSelector.call(el, selector)) {
                                break;
                        }
                        el = el.parentElement;
                }

                return el;

        })(modal_to_block, "#modal_parent_node_id");

        modal_with_overlay.parentNode.removeChild(modal_with_overlay);
};

/* La fonction blockModal est lancée à chaque changement du DOM */
BlockerMutationObserver = window.MutationObserver || window.WebKitMutationObserver;

(new BlockerMutationObserver(blockModal)).observe(document.body, {
        childList: true,
        subtree: true,
        attributes: false,
        characterData: false,
});

Maintenant mettez ces deux fichiers dans le même dossier. Allez sur l'URL chrome://extensions, cochez la case "Mode développeur", cliquez sur "Charger l'extension non empaquetée... " et sélectionnez le dossier. Le tour est joué !

A bientôt !

Par
Créateur et administrateur.

Dans la même catégorie

JSONP : envoyer des requêtes cross-domains
Chargement asynchrone d'images en javascript
Le principe de l'AJAX
Mise en place d'un calendrier comprenant date et heure.
Utiliser l'objet Date de javascript pour effectuer des calculs sur les dates
Apparition d'une fenetre de saisie avec jquery.

Commentaire(s)