• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Outils

Création d’une extension chrome simplissime « keyboardClicker »

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.

keyboardclicker

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 

04/12/2013 32 MIN READ BY: Nicolas LABBE 0 COMMENT
SHARE
LIRE LA SUITE

Nicolas LABBE

Si c’est stupide mais que ça marche, ce n’est pas stupide.

Le Second Screen, complément a la télévision?

Flat design

VOUS POURRIEZ AIMER

Outils Créer un package pour Composer avec Github et Packagist – Partie 2

Outils Répéter une tâche, ou automatiser?

Outils GitKraken – libérez vous du terminal

Mobile Outils Inspecter un site sur Android depuis Chrome

Outils Utiliser Grunt

Outils Radar des Technologies ThoughtWorks : Janvier 2014

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect