Catégories
Astuces et Design

Créez votre propre outil de développement

Bookmarklets – un outil de développement personnel sympa

Je viens de découvrir quoi marque-pages (alias favelets – un terme inventé par mon ami Tantek au début des années 2000) sont et je les aime! Alors que sont-ils?

Les signets exécutent un script JavaScript (JS) sur le DOM du document en cours chargé dans le navigateur. Ils permettent de modifier le DOM en appuyant sur un bouton. Ils peuvent ne pas offrir tout ce qu'une extension de navigateur ou un module complémentaire peut offrir, mais ils peuvent toujours être très pratiques et ne nécessitent pas de téléchargement ni d'installation de logiciel.

Qu'est-ce qu'un bel exemple de bookmarklet? Voici un joli bookmarklet d'accessibilité appelé Tota11y à essayer! Merci à Jeremy de m'avoir montré celui-ci 👍

Comment utiliser un bookmarklet comme Tota11y? Tout d'abord, le lien du bookmarklet doit être enregistré en tant que signet, glissé dans la barre d'outils des signets du navigateur ou être disponible pour être cliqué sur une page Web (utilisé comme lien normal dans un href attribut dans un élément). Deuxièmement, sur un site Web valide, le signet contenant le lien du bookmarklet doit être cliqué pour exécuter le code du bookmarklet.

Comment fonctionnent les bookmarklets

Tout d'abord, vous devez savoir (ou être rappelé) que dans un navigateur, les signets sont constitués d'URI (identificateurs de ressources uniformes). Chaque URI se compose d'un protocole tel que http:, https:, file:, etc., qui est suivi d'une chaîne. Un exemple est https://cat-bounce.com/. le https: est le protocole et la chaîne est le domaine.

Il y a aussi javascript: protocole. Le navigateur traite ce protocole et sa chaîne suivante comme une application JS. Lors de la visite d'un lien qui utilise ce protocole JS, le code JS qu'il contient est exécuté. Si un tel lien est mis en signet, on l'appelle un bookmarklet!

Il est à noter qu'un lien fonctionne généralement en renvoyant l'utilisateur vers une nouvelle page. Pour empêcher un bookmarklet de déclencher un rechargement de page, le code JS qui compose le bookmarklet doit renvoyer un type non défini. Pour ce faire, une fonction anonyme et auto-exécutable peut être utilisée (c'est-à-dire une fonction qui ne renvoie pas de valeur, n'a pas de nom et s'exécute immédiatement).

L'exemple de bookmarklet Tota11y a un lien qui pointe vers un fichier JS hébergé. En effet, le lien serait assez compliqué si tout le code JS était inclus sous forme d'une seule chaîne. Voici à quoi ressemble le lien du bookmarklet Tota11y (dans un format embelli pour la lisibilité):

javascript:
  (function()
    {
      var tota11y=document.createElement('SCRIPT');
      tota11y.type='text/javascript';
      tota11y.src='https://khan.github.io/tota11y/dist/tota11y.min.js';
      document.getElementsByTagName('head')(0).appendChild(tota11y);
    }
  )();

Pour qu'un bookmarklet pointe vers un fichier JS hébergé, son URI doit contenir quelques éléments. À tout le moins, il devrait créer un nouvel élément de script, faire de la source de cet élément (src) le fichier JS hébergé, puis ajouter ce script à l'en-tête du document.

Créer votre propre bookmarklet

J'ai essayé de créer un bookmarklet et j'ai trouvé que c'était vraiment facile de commencer.

J'ai décidé d'essayer quelque chose de vraiment simple qui n'utilise pas de fichier JS hébergé, mais contient tout le code JS sur une seule ligne. J'ai donc créé un bookmarklet pour mettre une bordure rouge autour de chaque paragraphe d'une page. Voici à quoi cela ressemble:

javascript: 
(function(){
    let paragraphs = document.getElementsByTagName('p');
    for (let i=0; i < paragraphs.length; i++){
      paragraphs(i).style.border = '3px solid red';
    }
  })();

Comme mentionné dans la section précédente, "Fonctionnement des bookmarklets", un bookmarklet peut être mis à disposition pour être utilisé comme lien. Pour ce faire, l'URI du bookmarket est placé à l'intérieur du href attribut d'un élément, qui peut ensuite être glissé dans les signets ou dans la barre d'outils des signets.

Si vous le souhaitez, essayez de cliquer sur le lien suivant ou faites-le glisser dans vos signets et cliquez sur le signet résultant (actualisez la page pour supprimer les effets)!

Créateur de bordure de paragraphe

Voici le code qui compose le lien ci-dessus:

<a href="javascript:(function(){let paragraphs=document.getElementsByTagName('p');for(let i=0;i < paragraphs.length;i++){paragraphs(i).style.border='3px solid red';}})();">
  Paragraph border maker
a>

Quelques points à noter

Un navigateur encodera automatiquement tous les caractères d'un URI qu'il ne comprend pas (comme les guillemets, les espaces, etc.) afin qu'un bookmarklet puisse fonctionner correctement.

Comme les bookmarklets contiennent JS, il y a des problèmes de sécurité à prendre en compte lors de l'utilisation de bookmarklets créés par d'autres. Cependant, créer quelques-uns de vos propres signets pour un usage personnel ou utiliser ceux qui se sont avérés dignes de confiance, c'est bien. Plus que bien – c'est génial!

Pourquoi les bookmarklets sont-ils si géniaux? Vous pouvez créer un dossier distinct pour vos favoris dans votre dossier de favoris. Ensuite, vous pouvez placer ce dossier de bookmarklets dans votre barre d'outils de signets pour votre propre liste d'outils de développement personnels faciles d'accès.

Parfois, les navigateurs peuvent mettre en cache le code du bookmarklet, de sorte que les modifications apportées après son ajout ne s'afficheront pas.

Regardez cette belle vidéo sur les bookmarklets (centrée sur Chrome) qui couvre ce que j'ai écrit dans la section "Créer votre propre bookmarklet".

Je suis complètement nouveau dans les bookmarklets, donc je n'ai peut-être pas couvert toutes les choses essentielles les concernant. Je les ai vraiment trouvés super faciles et agréables à démarrer. Comme d'habitude, j'en apprends plus sur eux en les essayant!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *