Un script dans la barre de favoris

Un bookmarklet est un petit script JavaScript enregistré comme favori. Je le lance depuis la barre de favoris pour exécuter une action sur la page ouverte, sans installer d'extension.

Ce format me convient pour les opérations courtes et répétitives. J'en ai aussi partagé certains avec mes collègues, en fonction de leurs besoins. Pour faciliter leur prise en main, je les ai réunis dans une documentation commune, avec leur fonction et le résultat attendu.

Retrouver les informations utiles au contrôle

Sur un site e-commerce, le nom affiché d'un produit ne suffit pas toujours pour l'identifier. Pour vérifier un problème ou transmettre une référence, le code produit est souvent plus utile. Un bookmarklet peut le lire dans les données exposées par la page et l'afficher immédiatement.

J'utilise aussi cette approche à l'échelle d'une liste : récupérer les références des produits affichés et les filtres appliqués, ou réunir des références et leurs libellés dans un tableau copiable. Cela évite de refaire la même recherche produit par produit. Le nom technique d'une page dans le CMS est un autre bon candidat, lorsqu'il est disponible côté navigateur.

Pour préparer une capture d'écran, un autre raccourci masque les éléments qui gênent la zone à montrer : fenêtres de chat, bandeaux ou éléments flottants.

Un audit SEO et le contexte de la page en un clic

L'un de ces bookmarklets ouvre un panneau de contrôle SEO directement dans la page. Il rassemble les informations que je vérifie régulièrement, avec des valeurs copiables pour les reprendre dans un diagnostic ou un échange :

  • l'URL courante et l'URL canonique ;
  • le titre SEO et la meta description, avec leur longueur en caractères ;
  • les directives de la balise meta robots ;
  • les balises Open Graph : titre, description, image et URL de partage ;
  • les titres h1 et h2, ainsi que le nombre de h1 ;
  • le nombre de mots dans le contenu principal ;
  • les images dont l'attribut alt est absent ou vide ;
  • les données structurées au format JSON-LD.

Le panneau signale aussi certains points à vérifier, comme un titre absent, une directive noindex ou une canonique différente de l'URL ouverte. Toutes les valeurs restent sous les yeux, sans aller les chercher une à une dans l'inspecteur.

J'y fais également remonter un identifiant de contexte provenant du data layer. Selon l'implémentation, on peut aussi y retrouver le nom technique de la page ou un identifiant de rubrique. Ces repères complètent les informations SEO et permettent de faire le lien entre la page affichée et son organisation dans le CMS.

Réduire les manipulations répétitives

Les contrôles multilingues multiplient vite les opérations identiques. Un raccourci peut passer d'une version linguistique à la suivante en adaptant l'URL. C'est utile lorsque les pages suivent une structure prévisible. Si les chemins sont traduits, il faut utiliser les correspondances réelles entre les pages : remplacer un code de langue ne suffit plus.

La préparation des traductions est un autre cas concret. Un outil peut extraire les chaînes de texte d'un bloc de contenu, les réunir dans un CSV et faciliter leur transmission pour traduction. Les textes peuvent ensuite être regroupés par langue dans le composant, plutôt que dispersés dans plusieurs copies du même code.

J'utilise également des raccourcis pour préremplir des formulaires de test et éviter de ressaisir les mêmes données à chaque vérification d'un parcours.

Maintenir des raccourcis ciblés

Un petit script peut tenir entièrement dans le favori. Pour un outil plus développé, le bookmarklet peut charger un fichier JavaScript hébergé à une adresse connue. Une version commune facilite alors sa distribution, mais son fonctionnement dépend aussi de la disponibilité du fichier, du cache et des règles de sécurité du site.

La maintenance porte surtout sur les sélecteurs CSS, les attributs et les données propres au site. Une évolution de cette structure peut demander une adaptation du raccourci.