Customisez vos pages web grâce à Greasemonkey et JQuery sur FireFox

greasemonkey

GreaseMonkey est une extension de Firefox qui vous permet de personnaliser la façon dont une page Web s’affiche ou se comporte, en utilisant du JavaScript.

En d’autres termes, GreaseMonkey vous permet d’écrire vos propres scripts, afin de modifier n'importe quelle page internet selon vos désirs: modifier/ajouter/supprimer du code HTML ou JavaScript, changer les couleurs/styles/dispositions, ajouter de nouvelles fonctionnalités, etc.

Installation de Greasemonkey

Pour installer GreaseMonkey rien de plus simple ; rendez-vous sur la page officielle de l’extension sur addons.mozilla.org (https://addons.mozilla.org/fr/firefox/addon/greasemonkey/).

Cliquez sur « Ajouter à Firefox », « Installer », puis « Redémarrer maintenant », comme illustré ci-dessous.

Greasemonkey_01

Greasemonkey_02Greasemonkey_03

Une fois Firefox redémarré, l’icône de GreaseMonkey en forme de tête de singe apparaîtra dans la barre d’outils sur la droite.

Greasemonkey_04

Création d’un script

GreaseMonkey est désormais installé, attaquons la partie la plus intéressante ; à savoir à la création d’un nouveau script, utilisant l’API JQuery.

Pour ce faire, déroulez le menu en cliquant sur la flèche descendante, puis cliquez sur « Gérer les scripts »

Greasemonkey_05

A l’apparition du gestionnaire de modules complémentaires , cliquez sur « Nouveau Script »

Greasemonkey_06

Renseignez les champs Nom, Espace de nom, Description du formulaire. Les sections « Inclus » et « Exclus » permettent de spécifier les règles d’inclusions et d'exclusions qui indiquent les pages où le script s’exécutera ou non.Greasemonkey_07

Les règles sur les URL, peuvent contenir un astérisque (*), qui remplacera n’importe quelle chaîne, y compris la chaîne vide mais aussi des expressions régulières aux normes JavaScript.

Par exemple: http://www.example.com/foo/* correspondra à http://www.example.com/foo/bar et http://www.example.com/foo/ mais pas http://www.example.com/baz/

Dans l' exemple ci-dessous, le script « Mon Nouveau Script GreaseMonkey » s’exécutera uniquement sur la page http://www.greasespot.net/p/welcome.html

Afin de vérifier votre installation, je vous suggère d’ouvrir un pop-up JavaScript quand vous accéderez à la page http://www.greasespot.net/p/welcome.html

Pour cela, saisissez les lignes de code ci-dessous, cliquez sur « Enregistrer », et rendez-vous sur la page : http://www.greasespot.net/p/welcome.html et admirez ce magnifique pop-up.

Remarque :Si le pop-up ne s’ouvre pas, vérifiez que le code ne comporte pas d’erreurs et que GreaseMonkey est correctement activé, via le menu déroulant dans la barre d’outils.

Greasemonkey_08

Intégration de JQuery

L’intégration d'api ou script JavaScript se fait via l’utilisation du mot clé « @require » suivi de l’url du script.

Par exemple:// @require http://code.jquery.com/jquery-1.11.3.min.jsGreasemonkey_09Une fois l’intégration de JQuery terminée, libre à vous et à votre imagination de personnaliser, améliorer ou rajouter des fonctionnalités à vos pages internet préférées.

Remarque :Pour modifier un script, il suffit de cliquer sur « Gérer les scripts », puis « option », puis « Modifier ce Script »

Démo

Voici un exemple très simple de personnalisation de la page http://www.greasespot.net/p/welcome.html en associant GreaseMonkey et les APIs JavaScripts jquery-ui.js, jquery-1.11.3.min.js et la feuille de style jquery-ui.css.

Greasemonkey_10

Source du Script :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.