Ajouter des favicons aux bookmarklets dans Chrome

A force de vous rebattre les oreilles avec ça, vous devez commencer à savoir qu’à fonction équivalente, je préfère un bookmarklet à une extension. Le truc embêtant, c’est que Chrome ne permet pas de leur attribuer de favicon qui permettrait de les distinguer les uns des autres au premier coup d’œil. Résultat, une bonne partie de ma barre de favoris est constituée d’une succession de pages blanches (l’icone par défaut quand vous ajoutez un favori) entre lesquelles s’intercalent les noms de mes bookmarklets :

Impossible dans ces conditions de virer le nom du bookmarklet pour gagner de la place.

A force de chercher, j’ai fini par trouver une solution inspirée de celle proposée par le site Absolutely No Machete Juggling.

Ajouter des favicons à vos bookmarklets

• Le but étant d’affecter au bookmarklet le favicon du service web correspondant, commencez par ajouter le site et le bookmarklet à vos favoris comme dans l’exemple ci-dessous avec Pinterest et son bookmarklet Pin It. Les deux favoris peuvent tout à fait se trouver dans des dossiers différents si vous le souhaitez.

• Effectuez un clic droit sur la barre des favoris et choisissez Gestionnaire de favoris (vous pouvez aussi utiliser le raccourci clavier [Shift] + [Ctrl] + [O].
• Cliquez ensuite sur Organiser, puis Exporter les favoris vers un fichier HTML.
  
• Ouvrez le fichier exporté dans un éditeur de texte comme le Bloc-notes de Windows ou Notepad++ par exemple. Recherchez le favori du service web par son nom. Pour reprendre l’exemple précédent, chercher Pinterest. Vous devez obtenir quelque chose qui ressemble à ça :

  <A HREF="https://www.pinterest.com/" ADD_DATE="1382279748" ICON="data:image/
  png;base64,iVBOR... ...NQAAAABJRU5ErkJggg==">Pinterest</A>

• Sélectionnez et copiez le texte de :  » ICON=  »  jusque :  » =″  » (la partie en rouge ci-dessus, y compris le guillemet de fin).
• Effectuez une nouvelle recherche dans le fichier exporté pour localiser le bookmarklet. Dans notre exemple, chercher Pin It. Cette fois vous obtenez un texte ressemblant à :

  <A HREF="javascript:... ..." ADD_DATE="1382433111">Pin It</A>

• Collez le texte copié précédemment juste avant « >Pin It », ce qui devrait donner :

  <A HREF="javascript:... ..." ADD_DATE="1382433111" ICON="data:image/
  png;base64,iVBOR... ...NQAAAABJRU5ErkJggg==">Pin It</A>

• Sauvegardez le fichier modifié.
• De retour dans le Gestionnaire de favoris de Chrome, réimportez le fichier modifié :  Organiser, puis Importer les favoris depuis un fichier HTML.

Ne vous inquiétez pas, vos signets originaux ne seront pas écrasés ! Chrome va créer un dossier nommé Importés dans lequel il va placer le contenu du fichier que nous venons de modifier.

Par contre, le navigateur va trouver l’icône que vous avez ajoutée au bookmarklet modifié qui se trouve dans ce dossier Importés et l’appliquer à votre ancien bookmarklet :

Vous pouvez maintenant supprimer le dossier Importés, votre bookmarklet conserve son favicon.

Explication et limitations de la méthode

Une petite explication s’impose avant de conclure. La partie de code que vous avez copié – collé pour obtenir ce résultat (souvenez-vous : ICON= …) constitue l’image du favicon codée en base64, c’est-à-dire transformée en une suite de caractère. Si vous êtes curieux, vous aurez plus d’infos chez Bellami ou sur Wikipédia. En collant ce code à celui du boormarklet, vous fournissez l’image du favicon au navigateur.

Cette méthode comporte toutefois un inconvénient : si vous synchronisez vos favoris entre vos différentes machines, les favicons ne seront pas synchronisés en même temps que les bookmarklets. Il vous faudra répéter cette opération sur chacun des ordinateurs. Vous pouvez cependant vous simplifier la tâche en copiant le fichier modifié sur les machines à synchroniser.

Enjoy !

(Image : I’m George)