Comment avoir un favicon / icône défini lorsque le bookmarklet est déplacé vers la barre d'outils?

Je me suis créé un bookmarklet, et il fonctionne très bien, mais lorsqu'il est ajouté à une barre d'outils dans Opera ou Firefox, il prend simplement l'icône de signet par défaut pour le navigateur (un globe et une étoile, respectivement). Mon site a un favicon, et la fenêtre, l'onglet et même le signet [site] utilisent le favicon que j'ai spécifié. Mais pas mon bookmarklet.

Comment puis-je coder mon site ou mon bookmarklet pour que le bookmarklet reçoive également le favicon?

Je connais diverses techniques de piratage manuel que les utilisateurs peuvent utiliser pour définir le favicon après coup, mais ce ne sont pas des solutions souhaitables.

Un bookmarklet utilise le javascript://schéma et n'a donc pas de domaine à partir duquel un favicon peut être chargé.

Donc, actuellement, il n'y a aucun moyen pour vous de fournir un favicon pour un bookmarklet. Pensez-y comme ceci: souvenez-vous de toute la chose du bac à sable Javascript - où Javascript ne peut accéder à rien en dehors du domaine de la page Web sur laquelle il s'exécute? Eh bien, un bookmarklet qui doit être lié à n'importe quel domaine de la page actuelle que vous regardez ne peut pas être également lié à un favicon sur votre propre site Web.

Mise à jour: Selon la réponse de Hans Schmucker, il est possible de créer un bookmarklet qui, lorsqu'il est chargé par le navigateur dans le menu des signets, générera un document HTML contenant un favicon. Le raisonnement semble pouvoir fonctionner mais je n'ai pas encore vu quelque chose comme ça en action et mes tests sont revenus négatifs.

Voici comment procéder:

1. Faites glisser votre bookmarklet vers la barre de favoris.
2. À côté, créez un signet d'un site avec le favicon que vous souhaitez utiliser pour votre bookmarklet.
3. Ouvrez le Gestionnaire de signets, cliquez sur Organiser la liste déroulante et sélectionnez Exporter, enregistrez vos signets sous forme de fichier html.
4. Ouvrez ce fichier html dans l'éditeur de texte.
5. Trouvez le signet que vous venez de créer, disons son signet Gmail, vous devriez avoir un code html pour lui, qui ressemble à ceci:

<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>

6. Copiez la balise ICON entière
7. Dans le même fichier, recherchez le bookmarklet que vous avez créé et insérez la balise ICON que vous avez copiée dans votre balise bookmarklet :

<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

8. Enregistrez ce fichier
9. Revenez à Chrom Bookmarks Manager, cliquez à nouveau sur Organiser et sélectionnez Importer
10. Importez le fichier HTML que vous venez de modifier, votre bookmarklet a maintenant un favicon .

Fondamentalement, la procédure consiste à obtenir l'attribut ICON d'une balise de signet et à l'insérer dans la balise bookmarklet

Ce n'est pas tout à fait vrai: un bookmarklet n'a pas de domaine, mais il a un emplacement (qui est le bookmarklet lui-même) et vous pouvez lui attribuer une icône. Après cela, il s'agit de savoir comment le navigateur enregistre les icônes (Firefox enregistre l'icône d'un signet de manière permanente, vous n'aurez peut-être pas autant de chance avec d'autres navigateurs).

PS Security n'y joue même pas, les icônes peuvent venir de n'importe où. Il n'y a aucune restriction.

Voir http://www.tapper-ware.net/blog/?p=97

Après avoir lu le site tapper [ware] et Restafarian, voici la solution la plus simple que j'ai pu trouver:

<a href="javascript:

var title = window.location.href;

if (title.indexOf('http://yourwebsite/bookmarklet/') == 0) {
    '<head><link rel=\'shortcut icon\' href=\'favicon.ico\'></head>Bookmarklet';
} else {
    (function(){document.body.appendChild(document.createElement('script')).src='http://yourwebsite/bookmarklet.js';})();
}">Click Me!</a>

Fonctionne très bien dans Chrome et FF, mais FF4 est le seul navigateur qui enregistrera l'icône dans la barre de favoris. Voici à quoi cela ressemble: http://cl.ly/5WNR

Voici une belle technique qui fait presque ce que vous voulez.

Fonctionne très bien sur mon Mac✅, mais je n'ai pas pu le faire fonctionner sous Windows 7⃣.❌

Utilisez "Emoji" 🈳. Ce sont des caractères Unicode, qui ressemblent également à des icônes colorées. Vous ne pouvez choisir que dans une liste d'images prédéfinie, mais en fait ce n'est pas mal - si tout ce que vous essayez de faire est de donner à l'utilisateur quelque chose à regarder - pour lui rappeler ce que fait le bookmarklet.

Par exemple, je crée un bookmarklet "clé de sécurité". J'utilise donc 🔑 dans mon nom de bookmarklet! 😃😊

Donc, fondamentalement, vous voyez l'image🎑 dans la barre de favoris 😝

Utilisez ce site pour vous aider à trouver un Emoji qui fonctionne pour votre bookmarklet: http://emojipedia.org/symbols/

Sur la base de la suggestion de Wizek, vous pouvez mettre votre code dans un data-uri.

data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico">
<script type="text/javascript">
    alert('It works!')
</script></html>

Et enregistrez tout cela sous forme de signet. ( Essayez-le! Faites glisser le code dans votre barre d'onglets)

Malheureusement, cela ne fonctionne que dans certains cas (plus ci-dessous).

Comment ça fonctionne:

(Au moins dans Chrome) C'est similaire à un bookmarklet utilisant le format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"suggéré par d'autres solutions. Dans ce cas, le html de la page sur laquelle vous vous trouvez sera remplacé par le html du bookmarklet, mais l'emplacement reste le même et le bookmarklet lui-même n'aura toujours pas d'emplacement, donc Chrome ne peut pas enregistrer de favicon pour lui.

En revanche, avec un signet data-uri, nous allons à l'autre page , elle a son propre emplacement et le navigateur peut enregistrer un favicon pour elle. Considérez-le comme "Héberger un site Web dans votre navigateur", auquel vous pourrez accéder sur d'autres ordinateurs si vous synchronisez vos signets. Vous pouvez également utiliser une image base64 pour le favicon au lieu d'une URL si vous souhaitez que tout reste local.

Il a des limites.

• Lorsque vous cliquez dessus, il quitte la page actuelle et charge la page dans les données . Par conséquent, vous ne pourrez pas l'utiliser pour les bookmarlets qui interagissent avec la page actuelle, uniquement pour le code que vous pouvez exécuter dans une page différente.

• N'utilisez pas // pour les commentaires. Comme tout sera enregistré sur une seule ligne, enveloppez-les dans / ** / et n'oubliez pas vos points-virgules

• Dans FF, il a enregistré le favicon, mais je n'ai pas été en mesure de le configurer pour toujours ouvrir les fenêtres contextuelles si je veux utiliser window.open () car il ne me permet pas d'enregistrer un comportement par défaut pour les URL de données

Par exemple:

En utilisant cette technique, j'ai créé un petit signet avec générateur d'icônes. Vous pouvez faire glisser ce code dans votre barre d'URL (ou l'enregistrer en tant que signet) pour l'utiliser. C'est une page simple avec une zone de saisie pour le code et pour une icône, puis génère un signet avec l'icône

data:text/html;charset=utf-8,<html><head>
    <title>Bookmarklet With Icon Generator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h2>Write your javascript  and specify a favicon, then drag the button to your bookmarks bar</div>
                </h2>
        <a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button"> 
            Drag me to your bookmarks bar! </a><br /><br />
        <div> 
            <label for="fav_href">Favicon:</label>
            <input id="fav_href" value='https://stackoverflow.com/favicon.ico' style='width:100%'></input> </div><br />
        <div>
            <label for='ta'>Write your JavaScript below</label>
            <textarea id="ta" style="width:100%;height:50%">
setTimeout(()=>{            &%2313
    alert('hello world');   /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
    window.history.back();  &%2313
},200);
            </textarea></div>
  </div>
    <script type = "text/javascript">
        fav_href.onchange = ta.onchange = function(){
            bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
                '<link rel="shortcut icon" href="'+ fav_href.value +'">'+
                '<script type="text/javascript"> '+ ta.value +'<\/script>';
            };
        ta.onchange();
    </script>
</body>

Un autre exemple: Bookmarklet pour ouvrir Facebook Messenger dans sa propre petite fenêtre (peut ne pas fonctionner si votre navigateur bloque les fenêtres contextuelles par défaut)

data:text/html;charset=utf-8,
<html>
    <link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico">
    <script type="text/javascript">
        url = 'https://www.messenger.com/';
        w = 740; h = 700;
        x = parseInt( screen.availWidth/2 - w/2 );
        y = parseInt( screen.availHeight/2 - h/2 );
        nw = window.open(url,'', 'width='+ w +',height='+ h +',top='+ y +',left='+ x);
        nw.focus();
        setTimeout(()=>{ 
          window.history.back();
          window.close();  
        },200);
    </script>

Autres solutions de contournement Chrome pour obtenir des icônes de bookmarklet:

• Exporter la barre de favoris, la modifier et la réimporter, comme décrit dans cette réponse /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome

• Transformer le bookmarklet en extension. Ce ne sera plus un bookmarklet, mais il aura la même fonction. Voici un site Web simple qui le fait pour vous http://sandbox.self.li/bookmarklet-to-extension/ puis changez simplement le fichier icône en ce que vous voulez. L'inconvénient est que les extensions utilisent de la RAM (environ 10 Mo pour les simples?), Si vous avez beaucoup et peu de RAM, ce n'est peut-être pas la solution pour vous. De plus, vous n'aurez pas de texte comme dans un signet, seulement l'icône.

Il est possible d'assigner et de modifier le favicon le favicon en utilisant javascript et canvas (voir l'étonnant jeu de favicon Defender of the Favicon ). Le code source du jeu vous aidera à le faire (il repose essentiellement sur l'utilisation de la fonction toDataUrl () sur le canevas comme indiqué à la ligne 554 de la source).

// set favicon
if( !stupidBrowser && useIcon )
{
     var    icon=$('favicon');
     (newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
     icon.parentNode.replaceChild(newIcon,icon);
}

Que se passe-t-il lorsqu'un bookmarlet définissant le favicon de cette manière est cliqué ou enregistré? Je ne sais pas mais ça pourrait être bien d'essayer. Le navigateur peut l'enregistrer?

Je pense qu'un moyen possible consiste à utiliser le caractère unicode dans l'ancre du bookmarklet comme votre icône:

http://unicode-table.com/en/#cyrillic

en parcourant tous les symboles possibles, vous pourriez trouver le personnage qui ressemble le plus à l'icône que vous souhaitez

Donc, ce n'est pas encore une solution complète, mais peut être un pas vers une direction de travail.

data:l'encodage d'une icône dans un data:html encodé en -uri fonctionne, à ma grande surprise.

data:text/html;charset=utf-8, <title>Separator Tab</title><link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIAAoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> Separator Tab

Puisque c'est le cas <html>, nous pouvons également y courir <script type="javascript">.

Pour certains bookmarklets, cela peut déjà être plus que suffisant. Pour d'autres qui aimeraient modifier la page actuelle ou au moins en obtenir des informations avant d'ouvrir un nouvel onglet, pas de chance encore. Je mettrai à jour cette réponse si je trouve un moyen de le faire.