Créer des raccourcis intelligents dans votre navigateur !

Récemment j'ai partagé une astuce de Firefox que j'utilise au quotidien de mon côté : la possibilité de créer des raccourcis dynamiques pour accéder super vite à une URL sans se casser la tête. Et je me suis dit qu'au final on pouvait surement combiner ça avec un autre truc que j'aime bien : les bookmarklets !

Demo time!🔗

Une démo vous parlera beaucoup plus que de longue phrase, alors voilà :

Démo du raccourci @ewi — Démo du raccourci `@ewi`

Là j'ai pris un raccourci que je peux montrer en public pour l'exemple : dans la barre d'adresse de Firefox, on voit donc que je tape "@ewi 14" et ça m'amène sur la page de l'issue 14 sur le projet Easy-Wiremock.

Comment ça marche ?🔗

En fait dans mes marques pages, j'ai créé un marque-page (personnellement, j'aime bien mettre tout ce qui est dynamique dans un dossier "dynamic" de ma barre de favori mais c'est libre à chacun), je l'ai nommé comme j'avais envie (c'est pas important), j'ai mis l'URL avec un "%s" à la place du numéro de l'issue, et j'ai mis dans mot clé "@ewi", on enregistre et c'est parti ça marche.

Pourquoi "@ewi" ? Le "@" c'est par habitude que je le mets, ça fonctionne sans, "ewi" ça aurait parfaitement fonctionné, mais "#ewi" aussi, même "/ewi" ; "ewi" c'est pour "Easy Wiremock Issues" mais là encore : vous mettez ce que vous voulez.

Dans l'URL "%s" sera remplacé par ce que vous allez mettre à la suite du mot clé. Vous ne pouvez avoir qu'un seul "%s", c'est le même mode de fonctionnement que pour ajouter des moteurs de recherche personnalisé.

Vue de création d'un marque-page dynamique

Dans mon quotidien🔗

C'est quelque chose que j'utilise au quotidien, mais pour un autre outil : Jira.

Je passe mon temps à devoir regarder des tickets Jira, j'ai parfois que le numéro, parfois aussi le projet, donc ça me fait gagner du temps : c'est Firefox qui retient pour moi comment y accéder.

Je travaille sur le périmètre de deux équipes (Homere et Berlioz), j'ai parfois besoin d'accéder au ticket d'autres équipes ou des tickets transverses, donc "@jirah 123" me redirige vers "https://jira.interne.com/EQUIPE_HOMERE-123", "@jirab 123" me redirige vers "https://jira.interne.com/EQUIPE_BERLIOZ-123", et "@jira PROJET-123" me redirige vers "https://jira.interne.com/PROJET-123". C'est simple, ça révolutionne pas ma vie, mais ça me fait gagner un peu de temps sans m'avoir coûté d'effort à mettre en place.

J'utilise aussi des raccourcis avec mot clé mais qui n'ont pas d'URL dynamique. Par exemple si j'ai besoin d'accéder très souvent à un outil nommé "Portail Machin Truc", je vais créer un raccourci "@pmt" et tant qu'à faire un "@pmt-dev" (pour accéder à l'env de dev).

Est-ce qu'on peut aller plus loin ?🔗

Et si on reprend l'idée des Bookmarklets (pas mon invention, juste j'en ai déjà parlé sur le blog), on peut totalement déclencher un morceau de JavaScript via un raccourci.

Prenez ce morceau de JavaScript et mettez-le dans le champ URL de votre marque-page, mettez un mot clé (perso j'ai mis @a11y, même si oui je sais c'est le niveau zéro de l'accessibilité, mais c'est un exemple parlant je trouve) :

javascript:(() => {
    const style = document.createElement('style');
    style.innerText = 'img:not([alt]),img[alt=""]{border: 2px dotted red;}';
    document.head.append(style);
})()JavaScript

Ensuite si vous ouvrez cette page : https://kuroidoruido.github.io/toolbox/bookmarklets/ et que vous faite F6 (placer le curseur dans la barre d'URL) puis @a11y + Entrer vous verrez que les images sans alt vous gagner une bordure rouge.

Et évidemment : c'est compatible avec le passage de paramètre. Imaginons que n'importe quand je peux faire @mailto john@doe.com et ça envoie l'URL de la page où je suis à quelqu'un part e-mail ?

Facile avec ce morceau de JavaScript à coller dans l'URL d'un marque-page avec un mot clé @mailto :

javascript:(() => {
    const currentUrl = document.location.href;
    const email = "%s";
    alert(currentUrl);
    alert(email);
    document.location.href = `mailto:${email}?body=${currentUrl}`;
})()JavaScript

Ouvrir un lien mailto: ça ouvre le client mail par défaut (qui peut être un onglet sur votre navigateur avec un webmail) et vous n'avez plus qu'à compléter et envoyer.

Démonstration de l'ouverture d'un nouveau mail avec le bon expéditeur et l'URL dans le corps du mail

Après là c'est basique, mais on pourrait imaginer envoyer le texte sélectionné, reprendre le titre de la page pour le mettre comme titre de mail, avoir des raccourcis pour des listes de diffusion, et que sais-je. En fait à partir du moment où on peut mettre du JavaScript : on peut faire ce qu'on veut.

Attention à une limitation : les Bookmarklets (exécuter du JavaScript depuis marque page) requiert que les CSP ne soient pas activées sur le site courant, et de plus en plus de site ont une configuration CSP qui va bloquer les JavaScript externe. Un bug est ouvert depuis 13 ans pour corriger ça sur Firefox.

Et Chrome/Chromium/etc. ?🔗

Côté navigateurs basés sur Chrome/Chromium, impossible d'attribuer à un marque-page un raccourci… On peut par contre passer par un moteur de recherche personnalisé (ça fonctionne aussi sur Firefox mais comme c'est moins pratique à mon sens, je vois pas l'intérêt de passer par là plutôt que via les marques pages avec mots clés). C'est un peu plus compliqué à trouver par contre…

Configuration d'un moteur de recherche personnalisé dans Chrome

Côté JavaScript : on peut en exécuter, mais on est pas dans le contexte de la page courante, donc impossible de récupérer l'URL ou du contenu dans la page…

Pour le paramètre pour notre @mailto, j'ai dû changer le code comme ça :

javascript:(() => {
    const email = "%s";
    document.location.href = "mailto:" + email;
})()JavaScript

Je pense qu'on ne peut pas utiliser le caractère ` dans ce contexte 🤷

Donc c'est beaucoup plus limité l'utilisation de JavaScript dans Chrome / Chromium…

Conclusion🔗

J'aime bien cette option de Firefox (et Chrome dans une bien plus faible mesure) pour faire des trucs assez simples au quotidien.

En bonus (si vous n'y aviez pas réfléchi) : les marques-pages peuvent se synchroniser d'un ordinateur à l'autre automatiquement via Firefox Sync, sans extension, sans question de compatibilité (ça fonctionne depuis trèèèès longtemps, peut-être bien les débuts de Firefox), c'est exportable et partageable entre plusieurs personnes (dans une équipe par exemple pour accélérer l'onboarding par exemple).

Sources :

Bookmarklets : l'option oubliée !
How to use keywords with bookmarks
Bug ouvert sur Firefox Bookmarklets affected by CSP

Crédit photo : Générée via Mistral AI avec le prompt suivant :

Studio Ghibli style illustration, soft hand-painted anime aesthetic. Close-up of an anthropomorphic red panda (firefox) with round glasses, sitting at a wooden desk lit by a warm desk lamp, one paw hovering over a glowing oversized keyboard. In front of it, a large magical browser address bar floats in mid-air like a signboard, with the glowing text '@jira 123' and a sparkling '%s' symbol transforming into little paper airplanes and envelopes flying out of the bar toward distant floating windows: a Jira ticket, an email, a red-dotted image. Whimsical, warm evening atmosphere, books and a small potted plant on the desk, pastel colors, detailed and cozy.