Écrire une extension pour Google Chrome

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...

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é !