Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Tutoriel Tampermonkey

Poster un commentaire

Les userscripts sont des scripts que l’on peut ajouter soi-même à son site pour modifier son fonctionnement. Par exemple bloquer les popins, réorganiser une liste affichée par un script, remplir automatiquement un formulaire…

Certains navigateurs comme Chrome les supportent nativement, mais c’est tout de même plus pratique d’ajouter un gestionnaire de userscript comme TamperMonkey.
Comment ça marche?

Pour installer dans Chrome rendez-vous dans le Chrome Web Store, petite recherche sur TamperMonkey et un clic sur Add to Chrome. On doit voir cet icône apparaître dans la boîte à outils:

tm1

Vous cliquez sur l’icône la popin s’affiche

tm2

Choisir Ajouter un nouveau script pour, ben comme l’indique le nom! On devrait voir ceci:

tm3

Intéressons-nous à la zone d’édition en commençant par le script par défaut:

tm4

Dans l’ensemble c’est clair, juste la ligne encadrée qui définit l’expression régulière qui sélectionne les sites sur lesquels le script se déclenche.

On pourrait ajouter des .js nécessaires au script, typiquement Jquery avec la directive @require:

@require http://code.jquery.com/jquery-latest.js

Vous pouvez trouver une liste complète de directives supportées dans la documentation:

http://tampermonkey.net/documentation.php

Une des tâches répétitives lorsque l’on développe un site web est le remplissage d’un formulaire surtout lorsqu’il contient de nombreux champs et bon bref c’est pénible. Laissons un script faire le boulot à notre place.

Voici notre formulaire:

tm5

Commençons le script:

// ==UserScript==

// @name       RemplirFormulaireIdentification

// @version    0.1

// @match http:/*/*

// @copyright  Moi

// @require http://code.jquery.com/jquery-latest.js

// ==/UserScript==

Ce sera à vous de personnaliser la directive @match.

La suite du script:

var values = {

  name: « Amethyste »,

  email: amethyste16@hotmail.com

}

$(‘body’).prepend(‘<input id= »remplir » type= »button » value= »Remplir identification »/>’)

$(« #remplir »).on(« click », function(){

  Object.keys(values).forEach(function(key){

    $(« # » + key).val(values[key]);

  });

});

L’objet values contient les valeurs à saisir. Les id des champs coïncident avec les propriétés de l’objet. Un objet en Javascript c’est pour l’essentiel un conteneur clef/valeur. D’où la suite du code qui parcourt les propriétés de values et renseigne le formulaire.

Il ne reste plus qu’à enregistrer:

tm6

Et tester bien sûr!

Vous pouvez trouver des milliers de scripts d’intérêt divers sur le site dédié Tampermonkey.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s