Depuis le 25 février 2010 Google permet aux développeurs d’ajouter des scripts exécutables dans son navigateur chrome.

L’avantage de pouvoir ajouter des extensions au navigateur est de pouvoir ajouter des fonctionnalités supplémentaires au navigateur le plus utilisé dans le monde. Ainsi il est possible d’interagir sur la plupart des sites web sans avoir à modifier le code source du site et bien plus encore.

Je vais donc vous apprendre à faire une extension chrome simple : Pour vous montrer la force d’une extension nous allons révolutionner la navigation web en moins de 15 minutes et moins de 40 lignes de code ! Bon d’accord ce n’est peut-être pas une révolution mais en tous cas cela change notre manière de surfer sur internet.

Notre navigation avec chrome version ordinateur de bureau est le plus souvent faite grâce à une souris et un clavier. Pour notre extension je me suis dit, puisque le clavier permet de valider, pourquoi ne pas remplacer le clic de la souris par une touche du clavier ! Par exemple la touche « < » que nous utilisons rarement dans chrome.

Tout d’abord pour débuter rapidement je vous mets à disposition un kickstarter qui contient l’architecture d’une extension chrome de base.

Aucune architecture de dossier n’est imposée sauf pour le fichier « manifest.json » qui contient les informations sur les fichiers, l’extension et les autorisations nécessaires.

Pour le tutoriel, renommez le fichier « RENAME.TO.manifest.json » en « manifest.json ». Ce fichier commenté permet de créer votre extension en fonction des besoins de l’application. Ici nous aurons seulement besoin d’insérer un fichier JavaScript sur toutes les pages web que nous visiterons.

{
    "name": "keyboarClicker",
    "version": "1.0",
    "permissions": [
        "http://*/*",
        "https://*/*"
    ],
    "background": {
        "scripts": [
            "js/background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "css": [
                "css/style.css"
            ],
            "js": [
                "js/script.js"
            ]
        }
    ],
    "offline_enabled": true,
    "sandbox": {
       "pages": [
           "index.html"
       ]
    },
    "icons": {
        "16": "icon16.png",
        "16": "icon19.png",
        "16": "icon32.png",
        "48": "icon48.png",
        "48": "icon100.png",
        "128": "icon128.png"
    },
    "browser_action": {
        "default_icon": "icon.png",
        "description": ""
    },
    "manifest_version": 2
}

La variable « matches » nous permet d’insérer notre script.js dans toutes les pages web grâce a http://*/* et https://*/*.

Pour la suite, il est important de définir comment va fonctionner notre JavaScript avant de commencer à coder !

Nous devons écouter l’événement du clavier keydown pour savoir s’il faut cliquer. Ensuite nous devons savoir où se trouve la souris pour cliquer au bon endroit, il nous faut donc aussi écouter l’événement mousemove. Pour finir le keyCode de la touche clavier pour déclencher le clic à la place de la souris.

Voici notre fichier final :

var keyboardClicker = {
    offsetX: 0,
    offsetY: 0,
    target: null,
    keyCode: 0,

    init: function ()
    {
        'use strict';

        if (navigator.userAgent.indexOf('Mac') !== -1) {
            keyboardClicker.keyCode = 188;
        } else {
            keyboardClicker.keyCode = 226;
        }

        keyboardClicker.bindEvent();
    },

    bindEvent: function ()
    {
        'use strict';

        document.body.addEventListener('keydown',function(e)
        {
            if(e.keyCode === keyboardClicker.keyCode && typeof keyboardClicker.target !== 'undefined' && keyboardClicker.target !== null) {
                keyboardClicker.target.click();
            }
        });

        document.body.addEventListener('mousemove',function(e)
        {
            keyboardClicker.offsetX = window.event.clientX;
            keyboardClicker.offsetY = window.event.clientY;

            keyboardClicker.target = e.target;
        });
    }
};

keyboardClicker.init();

Voici l’explication du code ci-dessus !

La partie suivante permet d’avoir le bon keyCode de la touche « < » en fonction du système d’exploitation. Car les constructeurs ne nous facilitent pas la vie :

• Pour Mac Os le code est 188
• Pour Pc 226

if (navigator.userAgent.indexOf('Mac') !== -1) {
    keyboardClicker.keyCode = 188;
} else {
    keyboardClicker.keyCode = 226;
}

Pour l’événement mousemove nous récupérons les coordonnées X et Y et la target

    keyboardClicker.offsetX = window.event.clientX;
    keyboardClicker.offsetY = window.event.clientY;

    keyboardClicker.target = e.target;

Enfin au keydown, nous devons cliquer

if(e.keyCode === keyboardClicker.keyCode && typeof keyboardClicker.target !== 'undefined' && keyboardClicker.target !== null) {
   keyboardClicker.target.click();
}

Maintenant il faut tester notre application.

Allez dans Chrome > Outils > Extensions, puis activez le « Mode développeur » et importez votre extension.

A chaque modification des fichiers contenus dans l’extension, il faut penser à cliquer sur Actualiser.

Vous trouverez l’extension terminée  sur le chrome store  ici