Générateur de bookmarklets : transformez du JavaScript en bookmarklet

Comment utiliser ce générateur de bookmarklets

1. Donnez un nom au favori et collez votre JavaScript dans la zone de code, ou cliquez sur Charger l’exemple du titre de page pour voir un exemple terminé. Le javascript: initial est facultatif : le générateur le retire et ajoute le sien.
2. Cliquez sur Créer le bookmarklet. L’URL générée apparaît en dessous, avec sa longueur en caractères.
3. Glissez le bouton sombre dans votre barre de favoris. Si la barre est masquée, affichez-la d’abord depuis le menu Affichage ou les réglages de votre navigateur.
4. Ouvrez une page quelconque et cliquez sur le favori. Le script s’exécute une fois, sur cette page.

Cliquer sur le bouton sur cette page ne fait rien, et c’est voulu : un bookmarklet est fait pour s’exécuter sur la page que vous lisez, pas sur le générateur.

Ce qu’est vraiment un bookmarklet

Un bookmarklet est un favori de navigateur ordinaire dont l’adresse commence par javascript:au lieu de https:. Ouvrez une page, cliquez sur le favori, et le navigateur exécute votre script sur cette page au lieu de naviguer ailleurs. Les bookmarklets servent aux actions propres à une page : copier une citation mise en forme, activer un mode lecture, extraire le texte sélectionné ou ouvrir l’URL courante dans un autre service. Ils ne demandent aucune installation d’extension, ne réclament aucune autorisation et vivent dans la barre de favoris comme n’importe quel autre lien.

Comment convertir du JavaScript en bookmarklet

Convertir un script à la main demande trois étapes, et le générateur les effectue toutes pour vous. Voici un script de deux lignes et le bookmarklet qu’il devient :

const n = document.links.length;
alert(n + ' liens sur cette page');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20liens%20sur%20cette%20page')%3B%0A%7D)()

1. Envelopper le code dans une fonction

L’outil place votre code dans une fonction fléchée appelée immédiatement,(() => { … })(). Vos variables n’entrent ainsi pas en collision avec celles que la page définit déjà, et il y a une seconde raison : quand le code d’une URL javascript:se termine par une valeur de type chaîne, le navigateur remplace la page par un nouveau document affichant cette chaîne. Une fonction dont le corps est un bloc ne renvoie rien, donc la page reste en place. À la main, l’autre solution classique consiste à commencer le code par void.

2. L’encoder en pourcentage

Les navigateurs suppriment les tabulations et les sauts de ligne bruts de toute URL avant de l’utiliser : un script sur plusieurs lignes collé tel quel dans un favori est donc écrasé sur une seule ligne. Un seul commentaire // avale alors tout ce qui suit, et les instructions qui comptaient sur les sauts de ligne se retrouvent collées les unes aux autres. L’encodage transforme chaque saut de ligne en%0A, qui survit ; le navigateur décode le code juste avant de l’exécuter. L’encodage protège aussi les espaces, les guillemets doubles, le % et le #.

3. Ajouter le préfixe javascript:

Le schéma javascript: indique au navigateur d’exécuter le reste de l’adresse comme un script. La chaîne obtenue est celle que vous glissez dans la barre ou collez dans un favori.

Comment installer un bookmarklet

Sur ordinateur

Glissez le bouton sombre dans la barre de favoris de Chrome, Edge, Firefox, Safari ou de tout autre navigateur de bureau. Si le glisser-déposer n’est pas pratique, cliquez sur Copier l’URL du favori, créez un nouveau favori et collez l’URL dans son champ d’adresse.

Sur iPhone, iPad et Android

Les navigateurs mobiles n’ont pas de barre de favoris où glisser quoi que ce soit : passez par la modification.

1. Cliquez sur Copier l’URL du favori.
2. Ajoutez n’importe quelle page à vos favoris, cette page convient.
3. Ouvrez vos favoris, modifiez le nouveau favori et remplacez son adresse par l’URL javascript: copiée. Profitez-en pour le renommer.
4. Allez sur la page où vous voulez l’exécuter. Dans Safari sur iPhone ou iPad, ouvrez le favori depuis vos favoris. Dans Chrome sur Android, saisissez le nom du bookmarklet dans la barre d’adresse et touchez la suggestion de favori ; l’ouvrir depuis l’écran des favoris vous fait quitter la page, et il n’a alors rien sur quoi s’exécuter.

Ne le collez pas dans la barre d’adresse

Cela ressemble à un raccourci, mais Chrome retire volontairement le javascript: initial du texte collé dans la barre d’adresse, une protection contre les arnaques qui poussent à coller du code malveillant. Ce qui reste est traité comme une recherche. Enregistrer le code comme favori est la voie fiable.

Exemples de bookmarklets à coller

Chacun n’utilise que des API standard du navigateur. Collez-en un dans la zone de code ci-dessus, cliquez surCréer le bookmarklet et installez-le.

Copier la page sous forme de lien Markdown

Ouvre une boîte de dialogue avec le lien sélectionné, prêt à copier.

prompt('Lien Markdown :', '[' + document.title + '](' + location.href + ')');

Compter les mots sélectionnés

Sélectionnez d’abord du texte, puis cliquez sur le bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' mots sélectionnés');

Rendre la page modifiable

Cliquez à nouveau pour désactiver la modification. Un rechargement restaure l’original.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Ouvrir la page dans la Wayback Machine

Liste les copies archivées de la page où vous vous trouvez.

location.href = 'https://web.archive.org/web/*/' + location.href;

Usages courants des bookmarklets

Pourquoi un bookmarklet ne fonctionne pas

La politique de sécurité du site le bloque

Si un bookmarklet marche sur la plupart des sites mais ne fait rien sur l’un d’eux, regardez la Content-Security-Policy de ce site. La spécification CSP indique que la politique d’une page ne devrait pas gêner les bookmarklets, mais les navigateurs peuvent tout de même bloquer les URL javascript:sur les pages dont les règles script-src sont strictes. Un bookmarklet qui injecte un script venant d’un autre domaine est touché deux fois : même s’il s’exécute, c’est la politique de la page qui décide si ce script externe peut se charger. Rien dans le bookmarklet ne peut contourner cela. Si vous avez besoin du script sur un tel site, une extension de navigateur ou un userscript est la solution.

La page est devenue une page blanche avec du texte

Votre code se terminait par une valeur de type chaîne, que le navigateur a affichée comme une nouvelle page. Supprimez tout return qui renvoie du texte. Si vous avez écrit le bookmarklet à la main, le régénérer ici l’enveloppe dans une fonction, et une expression chaîne en fin de code ne remplace plus la page.

Rien ne se passe et aucune erreur ne s’affiche

Ouvrez la console développeur de votre navigateur, puis cliquez à nouveau sur le bookmarklet. Les erreurs de syntaxe, les éléments introuvables et les scripts bloqués y sont signalés. Une cause fréquente dans les bookmarklets faits à la main est un commentaire // qui s’est retrouvé sur la même ligne que le reste du code ; le régénérer depuis la source d’origine règle le problème.

Comment modifier un bookmarklet existant

Copiez l’adresse du favori, retirez le javascript: initial et décodez le reste avec l’encodeur et décodeur d’URL (en anglais) pour retrouver un code lisible. Faites votre modification, collez le code dans ce générateur de bookmarklets et remplacez l’adresse de l’ancien favori par la nouvelle URL. Conserver la source d’origine dans un fichier texte vous évite cet aller-retour.

La sécurité compte

Un bookmarklet s’exécute avec les mêmes accès que les scripts de la page : il peut lire et modifier tout ce que la page expose. Relisez le code avant de l’installer, évitez les extraits qui chargent des scripts distants (une URL contrôlée par quelqu’un d’autre peut changer après votre installation) et n’exécutez jamais un bookmarklet inconnu sur une page contenant des informations sensibles. Si un site, un message ou une vidéo vous demande de coller du code dans un favori ou dans votre barre d’adresse, considérez que c’est une arnaque.

Bookmarklet, userscript ou extension

Les trois se ressemblent mais répondent à des besoins différents. Un bookmarklet est un script qui s’exécute une fois, sur une page, quand vous cliquez : aucune installation, et il voyage avec vos favoris. Un userscript (géré par un gestionnaire de userscripts) s’attache aux sites correspondants et peut s’exécuter automatiquement à chaque visite, en gardant ses propres réglages d’une page à l’autre. Une extension de navigateur peut faire tout cela et plus encore (travail en arrière-plan, interception du réseau, icônes dans la barre d’outils), au prix d’une étape d’installation et de larges autorisations que le navigateur vous présente d’emblée. Les extensions sont aussi traitées différemment par les politiques de sécurité des pages : la spécification CSP précise que Chrome s’efforce de préserver les injections pilotées par une extension quelle que soit la politique de la page. Commencez par le bookmarklet ; ne passez à autre chose que lorsque vous atteignez ses limites.

Limites : quand ne pas utiliser un bookmarklet

Un bookmarklet ne s’exécute que lorsque vous cliquez dessus, sur une page à la fois. Il ne peut pas conserver d’état entre deux visites, agir en arrière-plan ni modifier automatiquement chaque page. La longueur est rarement le problème (Chrome documente une longueur maximale d’URL de 2 Mo), mais un long script devient une URL de favori illisible, et à cette taille un gestionnaire de userscripts ou une extension est plus facile à maintenir. Les modifications d’un bookmarklet disparaissent aussi au rechargement : si vous voulez des surlignages encore présents la prochaine fois, lisezcomment surligner du texte sur un site et le conserver. Et si le besoin est « enregistrer cette page en un clic » plutôt qu’« exécuter un extrait », une extension de navigateur (en anglais) conçue pour cela le fait sans que vous ayez du code à maintenir.

Confidentialité : où va votre code

Nulle part. Le nom, l’extrait et l’URL générée ne quittent jamais la page : la création d’un bookmarklet ne déclenche aucune requête réseau. Une réserve honnête : le bookmarklet terminé est enregistré comme un favori normal ; si vous synchronisez vos favoris entre plusieurs appareils, le script voyage donc avec vos autres favoris et reste visible de tout ce qui peut lire ce profil synchronisé.

Outils et guides associés

Le bookmarklet de lien Markdown ci-dessus copie un lien à la fois ; pour convertir en Markdown le HTML d’une page entière, utilisez le convertisseur HTML vers Markdown (en anglais). Si les liens que vous copiez sont pleins de paramètres de suivi, lenettoyeur d’URL les retire. Pour enregistrer des pages et travailler avec elles sans écrire de script, découvrez le surligneur web de Marqly, le gestionnaire de favoris pour Chrome et la méthode dusecond cerveau, ou lisez le guidepour organiser ses favoris de navigateur.