web-dev-qa-db-fra.com

Comment définir un favicon / icône lorsque le bookmarklet est glissé dans la barre d'outils?

Je me suis fait un bookmarklet, et cela 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 un 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 sont des solutions indésirables.

browsericonsbookmarkletfavicon
107
Pistos

Un bookmarklet utilise le javascript:// schéma et n'ont 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: rappelez-vous tout le bac à sable Javascript - où Javascript ne peut accéder à rien en dehors du domaine de la page Web où il s'exécute? Eh bien, un bookmarklet qui doit être lié à n'importe quel domaine pour la page actuelle que vous regardez, ne peut pas également être 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 sera chargé par le navigateur dans le menu des signets, générera un document HTML qui a un favicon. Le raisonnement semble fonctionner, mais je n'ai pas encore vu quelque chose comme ça en action et mes tests sont revenus négatifs.

22
Guss

Voici comment procéder:

  1. Faites glisser votre bookmarklet vers la barre des signets.
  2. À côté de lui, créez un signet d'un site qui 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 en tant que 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 cela, 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>

  1. Copiez l'intégralité de la balise ICON
  2. 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 bookmarklet balise:

<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>

  1. Sauvegardez ce fichier
  2. Revenez à Chrom Bookmarks Manager, cliquez à nouveau sur Organiser et sélectionnez Importer
  3. 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 le bookmarklet tag

enter image description here

15
monstro

Après avoir lu le tapper [ware] et le site 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

13
Brian McAllister

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 attribuer une icône à cela. 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 ne serez peut-être pas aussi chanceux avec les autres navigateurs).

P.S. La sécurité 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

13
Hans Schmucker

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 sur Windows 7⃣.⃣

Utilisez "Emoji" ????. Ce sont des personnages Unicode qui ressemblent également à des icônes colorées. Vous ne pouvez choisir que parmi 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 ???? à leur rappeler ce que fait le bookmarklet.

Par exemple, je fais un bookmarklet "clé de sécurité" ????. Donc j'utilise ???? au nom de mon 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/

5
Theo

Il est possible d'attribuer et de modifier le favicon le favicon en utilisant javascript et canvas (voir l'incroyable 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 vu à 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 quand un bookmarlet définissant le favicon de cette façon est cliqué ou enregistré? Je ne sais pas, mais ça pourrait être sympa d'essayer. Le navigateur peut-il l'enregistrer?

3
Arnaud Rinquin

Basé sur suggestion de Wizek vous pouvez mettre votre code dans un uri de données.

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 comme un signet. ( Essayez-le! faites glisser le code dans votre barre d'onglets)

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

Comment ça marche:

(Au moins dans Chrome) Il est similaire à un bookmarklet utilisant le format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>" comme d'autres solutions l'ont suggéré. Dans ce cas, le code HTML de la page sur laquelle vous vous trouvez sera remplacé par le code 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 celui-ci.

En revanche, avec un signet data-uri nous allons à l'autre page, il a son propre emplacement, et le navigateur peut enregistrer un favicon pour cela. Considérez-le comme "l'hébergement d'un site Web dans votre navigateur", auquel vous pourriez 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 ses 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 autre page.

  • 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 pu le définir pour toujours ouvrir des 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

À titre d'exemple:

En utilisant cette technique, j'ai créé un petit Bookmarklet avec générateur d'icônes. Vous pouvez le copier dans votre barre d'URL (ou l'enregistrer en tant que signet) pour l'utiliser

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 style='background: -webkit-linear-gradient(top, #f4f8f9 0%, #e0f8ff 95%);'>
    <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! </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(()=>{            &#13
    alert('hello world');   /*Use this format for comments*/ &#13
    window.history.back();  &#13
},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 popups 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>

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

3
aljgom

Je pense qu'une façon possible est d'utiliser le caractère unicode dans l'ancre de bookmarklet comme votre icône:

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

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

1
StefanoCudini

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

data: encodage d'une icône dans un data:- uri encodé html 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 <html>, nous pouvons exécuter <script type="javascript"> là aussi.

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

1
Wizek