Bookmarklets : du JavaScript dans les favoris

juillet 2, 2024

Les bookmarklets sont des programmes JavaScript, que l’on peut stocker dans les favoris du navigateur. Ils diffèrent des favoris normaux en cela qu’il ne mènent pas sur des sites web, mais qu’ils exécutent du code sur la page où vous vous trouvez. Il existe de nombreux champs d’application, mais souvent, ils serviront à effectuer des actions rébarbatives à votre place sur une page web. En cela, ils sont un peu similaires à une extension, mais sont généralement destinés à des usages plus simples. Dans cet article, je vais vous montrer comment vous servir des bookmarklets, puis comment créer les vôtres facilement.

Enregistrer et se servir des bookmarklets : comment faire ?

Ce n’est pas très compliqué, prenez le « lien » ci-dessous, et cliquez dessus.

HelloWorld!

Voilà, vous vous êtes servi de votre premier bookmarklet. Comme vous le feriez avec un lien classique, vous pouvez l’enregistrer dans votre barre de favoris. Si maintenant vous allez sur un autre site et que vous cliquez dessus, vous obtiendrez exactement le même effet que précédemment.

Installer un bookmarklet que vous avez codé

Pour les bookmarklets que vous allez créer vous-même, par contre, vous allez plutôt procéder comme ceci :

• Clic droit dans la barre de favoris.
• Ajouter une page.
• Indiquer le nom qui vous semble le mieux.
• Coller le code source à la place de l’URL.

Comment programmer un bookmarklet vous-même ?

Se servir des outils de développement du navigateur

Dans l’idéal, vous avez quelques bases en JavaScript. Transformer votre code en bookmarklet est très facile, ce qui l’est sans doute moins est la création du script en lui-même. En effet, il faudrait que vous ayez des connaissances en manipulation du DOM et de l’objet window.

Je vous conseille de procéder comme ceci :

• Ouvrez la console de développement du navigateur. Sur la plupart d’entre eux, vous pouvez utiliser la touche F12.
• Sur un navigateur basé sur Chromium, comme Google Chrome ou Brave, cliquez sur Sources, puis sur Snippets. Il existe quelque chose d’à peu près pareil sur Firefox.
• Créez un New snippet.
• Tapez votre code et testez-le avec CTRL + Entrée.

Ainsi, vous pouvez tranquillement raffiner votre programme et l’enregistrer en tant que bookmarklet, quand vous en serez pleinement satisfait.

Un exemple concret de programme JavaScript

Avec l’exemple qui va suivre, je vais essayer de vous montrer des concepts qui vous serviront dans la plupart des usages. Imaginons que vous vouliez créer un petit bookmarklet pour obtenir et afficher des informations SEO rapidement sur une page :

• Le contenu de la balise <title>,
• Les balises <meta> importantes pour le SEO.
• La hiérarchie <hn> de la page.
• Le nombre de liens.

L’objectif du programme est de récupérer toutes ces choses à l’aide de manipulations basiques du DOM, puis de les afficher dans un nouvel onglet, que vous allez ouvrir avec l’objet window.

En ce qui concerne la manipulation du DOM, je vous conseille de vous intéresser aux méthodes querySelector et querySelectorAll, de l’objet document. Vous en aurez en permanence besoin pour accéder aux balises HTML. Dans le cas présent :

/* Retrieve title content */ 
let title = document.querySelector("title").innerHTML

/* Retrieve all meta tags */
let metas = document.querySelectorAll("meta")

/* Find the relevant meta values */
let metaDescription = ""
let metaRobots = ""

metas.forEach(function(meta){
    if(meta.name){
        switch(meta.name){
            case "description":
                metaDescription = meta.content
                break
            case "robots":
                metaRobots = meta.content
                break
        }
    }
})

/* Count all links */
let nLinks = document.querySelectorAll("a").length

/* Get all header tags */
let hns = document.querySelectorAll("h1,h2,h3,h4,h5,h6")

Souvent, pour afficher les données qui vous intéressent, le plus simple est d’ouvrir un nouvel onglet avec window.open("","_blank"), et d’écrire directement dedans en HTML avec document.write(). Dans notre exemple, ça donne ceci :

/* Open new tab*/
let tab = window.open("","_blank")

/* Write information in new tab */
tab.document.write("<p><b>Title:</b> "+ title +"</p>")
tab.document.write("<p><b>Meta description:</b> "+ metaDescription +"</p>")
tab.document.write("<p><b>Meta robots:</b> "+ metaRobots +"</p>")
tab.document.write("<p><b>Number of links:</b> "+ nLinks +"</p>")

/* Write each header */
hns.forEach(function(hn){
    tab.document.write("<" + hn.tagName + ">")
    tab.document.write(hn.tagName + ": " + hn.innerHTML)
    tab.document.write("</" + hn.tagName + ">")
})

Transformez votre code pour en faire un favoris.

Évidement, vous n’allez pas le faire à la main, pour cela, il existe des outils en ligne spécialisés, comme celui-ci : Bookmarklet Maker.

À quoi servent les bookmarklets dans la pratique ?

Exemples d’utilisation de bookmarklets

Les bookmarklet vous serviront à gagner beaucoup de temps sur des taches rébarbatives. Vous pourrez par exemple les utiliser pour :

• Cliquer à votre place sur des boutons, grâce aux événements JavaScript.
• Afficher des informations du DOM sous forme de tableau HTML pour les copier-coller dans Excel.
• Ouvrir des onglets vers différents outils, en passant des paramètres dans l’URL.
• Etc.

Comme nous avons pu le voir plus haut, les bookmarklets sont pratiques en SEO pour afficher en un éclair des métadonnées. Ils permettent également d’accéder rapidement à des URL en leur passant des paramètres. Par exemple, on peut faire une recherche sur un site avec des opérateurs Google comme site:, on peut également obtenir des infos de PageSpeed Insights… Il y a beaucoup de bookmarklets SEO qui traînent sur la toile.

En-tout-cas, si vous avez des besoins plus spécifiques, vous êtes maintenant en mesure de créer les vôtres sur mesure !