Image de couverture - Créer un Script Bookmarklet en JS

Créer un Script Bookmarklet en JS

Exploitez les fonctions « marque-page » des navigateurs pour exécuter des scripts JS dans votre navigateur web avec les bookmarklets.

Icône de calendrier
Icône de chronomètre 2 min

Qu’est ce qu’un bookmarklet ?

Un bookmarklet (ou « marque-page scripté ») est un petit script JavaScript enregistré en tant que favori / marque-page de votre navigateur web. Le contenu du script est enregistré dans le champ URL du bookmark.

On peut ainsi les exécuter sur n’importe quelle page web en 1 clic !

Très appréciés des développeurs, on peut par exemple utiliser ces petits scripts utilitaires pour :

  • Récupérer les informations de la page (texte, hyperliens, images…)
  • Traduire une page web
  • Supprimer les publicités d’une page web
  • Modifier le rendu graphique d’une page web (couleurs, polices, tailles…)
  • Interroger un moteur de recherche en précisant l’objet de la recherche dans une boîte de dialogue prompt() ou en le sélectionnant directement dans la page
  • Télécharger une page web au format PDF
  • Envoyer des données du site à une autre adresse (un service web tiers)
  • Etc.

Ils permettent ainsi de se créer très simplement des outils web basiques, sans passer par la complexité de l’écosystème des extensions navigateur.

Créer un bookmarklet

#1 Écriture du script

Il est recommandé de maîtriser les bases de JavaScript avant d’entamer l’écriture de votre premier bookmarklet.

Un bookmarklet est un script JavaScript standard commençant toujours par javascript:.

En voici un exemple :

copié !
javascript: (function () {
	console.log("Hello World!");
})();

Au sein de la fonction anonyme, écrivez la logique que vous souhaitez pour votre utilitaire.

#2 Création du bookmarklet

Une fois votre script codé, il ne reste plus qu’à l’intégrer dans un bookmark.

  1. Copiez (CTRL+C) le script JS dans votre presse-papier
  2. Créez un nouveau marque-page / favori dans votre navigateur
  3. Nommez explicitement votre marque-page selon ce qu’il fait. Exemple : Remove Ads
  4. Collez (CTRL+V) le script JS copié dans le champ URL ou lien
  5. Enregistrez le marque-page

#3 Utilisation du bookmarklet

Pour utiliser le script, rendez-vous sur la page web sur laquelle vous souhaitez exécuter le script, puis cliquez sur le marque-page dans la barre de favoris de votre navigateur.

Lire aussi