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


108

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.


Exemple: si vous faites glisser le bookmarklet dans Opera, le bookmarklet prend une icône Diigo: diigo.com/tools/diigolet
Pistos

celui vers lequel vous vous connectez ne le fait pas pour moi dans Firefox.
benlumley

Ouais, pas dans IE non plus. Mais il le fait dans Opera. :)
Pistos

Désolé, je viens d'essayer Opear 9.6 et cela ne fonctionne pas non plus pour moi dans Opera.
Guss

1
Il y a une proposition de solution ici: wiki.whatwg.org/wiki/Link_Icons
lapo

Réponses:


23

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.


17

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>

  1. Copiez la balise ICON entière
  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 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>

  1. Enregistrez 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 la balise bookmarklet

entrez la description de l'image ici


1
(C'est une question très ancienne, mais ...) Je cherchais une solution qui ne nécessitait aucune action de l'utilisateur final (autre que l'ajout du bookmarklet à la barre d'outils). c'est-à-dire que peut faire un propriétaire de site pour spécifier l'icône.
Pistos

1
Pour moi, c'est la meilleure réponse. Cela fonctionne et c'est expliqué de manière exhaustive. Merci beaucoup.
tsuma534

13

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


3
Bien que le raisonnement semble fonctionner, les exemples fournis dans le blog auquel vous avez créé un lien génèrent simplement un document avec une icône que Firefox peut ou non afficher pour le signet, ou sont en fait des bookmarklets qui exécutent Javascript sur des pages arbitraires - mais pas les deux (testé sur Firefox 7). Je ne suis toujours pas convaincu de ce travail.
Guss

13

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


J'essaie d'en savoir plus sur les bookmarklets, pourriez-vous expliquer un peu le code aux débutants? Merci
Andrew Mackenzie

Sûr. Lorsque vous cliquez dessus, il vérifie l'URL de la page actuelle. Si vous êtes sur la page où votre bookmarklet est «hébergé» (ligne 4), il écrit un élément de lien vers la page pointant vers votre favicon souhaitée. Votre navigateur le verra et téléchargera le favicon. Le navigateur le met en cache et l'utilise comme icône dans votre barre de favoris. Si vous êtes sur une autre page, il fera tout ce que votre bookmarklet est censé faire.
Brian McAllister

5
Je ne comprends pas ça. Lorsque vous faites glisser un bookmarklet vers votre barre de favoris (comme on le fait avec le bookmarklet Delicious ici ), qu'est-ce qui exécute ce code? Je ne vois pas pourquoi le bookmarklet serait cliqué (et le code exécuté) jusqu'à ce qu'il soit enregistré dans la barre des favoris, c'est-à-dire après que le navigateur ait réglé son icône?
dumbledad

6

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/


1
J'obtiens juste tout un tas de marques "la police n'a pas de glyphe pour ce point de code". Étant donné que j'utilise Firefox sous Linux, cela signifie que le comportement de secours ne peut même pas les trouver dans aucune police du système. Ai-je raison de supposer que ce sont les glyphes emoji spécifiques à Mac que les blogueurs ont dit aux concepteurs Web d'éviter?
ssokolow

Oui. Cependant, si vous savez que votre client fonctionne sur un ordinateur capable d'afficher des emojis, est-ce si mauvais de les afficher? Pour mon usage personnel, je vais permettre aux utilisateurs de décider s'ils veulent ou non produire des emoji. Sinon, je n'en génère aucun, ils n'obtiennent que du texte brut.
Theo

Hormis cela étant une solution qui pourrait trébucher sur d'innombrables échecs dans le concepteur Web qui l'utilise, je ne risquerais pas la mauvaise impression que je pourrais faire quand (pas si) quelqu'un charge inévitablement quelque chose que je construis sur un système non-mac.
ssokolow

Faire un vote positif en partie à des fins pratiques et en partie à des fins de divertissement. Les emojis sont la réponse à tous les problèmes de la vie!
Sridhar Sarnobat

Astuce: utilisez ce site pour copier et coller les emojis dont vous avez besoin: emojipedia.org/upwards-black-arrow .
Sridhar Sarnobat

4

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.


1
Cela ne fonctionne que pour Chrome et Safari. Pas Mozilla, malheureusement. L'intention d'un bookmarklet est d'être cross browser, IMO.
sijpkes

C'est comme la seule chose qui a fonctionné. Sainte vache, merci beaucoup.
Alex Beals

3

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?


1
(Testé dans Chrome) Aucune solution. Lorsque vous modifiez un favicon à l'aide d'un livret, vous êtes toujours au même endroit. Le navigateur peut changer l'icône d'un signet de la page en cours, mais il n'en attribuera pas une au bookmarlet.
aljgom

1

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


1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.