Como ter favicon / ícone definido quando o bookmarklet é arrastado para a barra de ferramentas?


108

Eu fiz para mim um bookmarklet e funciona muito bem, mas quando adicionado a uma barra de ferramentas no Opera ou Firefox, ele apenas assume o ícone de marcador padrão para o navegador (um globo e uma estrela, respectivamente). Meu site tem um favicon, e a janela, guia e até mesmo o favorito [site] usam o favicon que eu especifiquei. Só não meu bookmarklet.

Como posso codificar meu site ou bookmarklet para que o bookmarklet também obtenha o favicon?

Estou ciente das várias técnicas manuais de hackeamento que os usuários podem usar para definir o favicon após o fato, mas essas são soluções indesejáveis.


Exemplo: Arrastar o bookmarklet no Opera faz com que o bookmarklet assuma um ícone do Diigo: diigo.com/tools/diigolet
Pistos

aquele que você vincula não faz isso para mim no firefox.
benlumley

Sim, também não no IE. Mas isso acontece no Opera. :)
Pistos

Desculpe, acabei de experimentar o Opear 9.6 e também não funciona para mim no Opera.
Guss de

1
Há uma proposta de solução aqui: wiki.whatwg.org/wiki/Link_Icons
lapo

Respostas:


23

Um bookmarklet usa o javascript://esquema e, portanto, não tem um domínio a partir do qual um favicon possa ser carregado.

Portanto, atualmente não há como fornecer um favicon para um bookmarklet. Pense nisso assim: lembra-se de toda a sandbox do Javascript - onde o Javascript não pode acessar nada fora do domínio da página da web onde está sendo executado? Bem, um bookmarklet que precisa ser vinculado a qualquer domínio da página atual que você está assistindo não pode ser vinculado a um favicon em seu próprio site.

Atualização: De acordo com a resposta de Hans Schmucker, existe a possibilidade de criar um bookmarklet que, quando carregado pelo navegador no menu de favoritos, irá gerar um documento HTML que possui um favicon. O raciocínio pode funcionar, mas ainda não vi algo assim em ação e meus testes deram negativo.


17

Veja como você pode fazer isso:

  1. Arraste seu bookmarklet para a Barra de favoritos.
  2. Ao lado dele, crie um favorito de um site cujo favicon você deseja usar para o seu bookmarklet.
  3. Abra o Gerenciador de favoritos, clique no menu suspenso Organizar e selecione Exportar, salve seus favoritos como um arquivo html.
  4. Abra esse arquivo html no editor de texto.
  5. Encontre o favorito que você acabou de criar, digamos, seu favorito do Gmail, você deve ter um código html para ele, que se parece com este:

<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. Copie toda a tag ICON
  2. No mesmo arquivo, encontre o bookmarklet que você criou e insira a tag ICON que você copiou em sua tag 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. Salve este arquivo
  2. Retorne ao Gerenciador de favoritos do Chrom, clique novamente em Organizar e selecione Importar
  3. Importe o arquivo HTML que você acabou de editar, seu bookmarklet agora tem um favicon .

Basicamente, o procedimento é obter o atributo ICON de uma tag de favorito e inseri-lo na tag de bookmarklet

insira a descrição da imagem aqui


1
(Esta é uma pergunta muito antiga, mas ...) Eu estava procurando por uma solução que não precisasse de nenhuma ação do usuário final (além de adicionar o bookmarklet à barra de ferramentas). ou seja, o que um proprietário de site pode fazer para especificar o ícone.
Pistos 15/11/16

1
Para mim, esta é a melhor resposta. Funciona e é explicado de forma abrangente. Muito obrigado.
tsuma534 01 de

13

Isso não está certo: um bookmarklet não tem domínio, mas tem um local (que é o próprio bookmarklet) e você pode atribuir um ícone a ele. Depois disso, é uma questão de como o navegador salva os ícones (o Firefox salva o ícone de um favorito permanentemente, você pode não ter tanta sorte com outros navegadores).

PS Security nem sequer entra nele, os ícones podem vir de qualquer lugar. Não há restrição.

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


3
Embora o raciocínio pareça funcionar, os exemplos fornecidos no blog ao qual você criou um link apenas geram um documento com um ícone que o Firefox pode ou não mostrar para o favorito ou são, na verdade, bookmarklets que executam Javascript em páginas arbitrárias - mas não ambos (testado no Firefox 7). Ainda não estou convencido desse trabalho.
Guss de

13

Depois de ler o site Tapper [ware] e Restafarian, aqui está a solução mais simples que eu poderia sugerir:

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

Funciona muito bem no Chrome e FF, mas o FF4 é o único navegador que salvará o ícone na barra de favoritos. É assim que se parece: http://cl.ly/5WNR


Estou tentando aprender mais sobre bookmarklets, você poderia explicar um pouco o código para iniciantes? Obrigado
Andrew Mackenzie,

Certo. Quando você clica nele, ele verifica o URL da página atual. Se você estiver na página onde seu bookmarklet está 'hospedado' (linha 4), ele gravará um elemento de link na página apontando para o favicon desejado. Seu navegador verá isso e fará o download do favicon. O navegador armazena isso em cache e o usa como ícone na barra de favoritos. Se você estiver em qualquer outra página, ele fará tudo o que seu bookmarklet deve fazer.
Brian McAllister

5
Eu não entendo isso. Quando você arrasta um bookmarklet para sua barra de favoritos (como faz com o bookmarklet Delicious aqui ), o que executa esse código? Não vejo por que o bookmarklet seria clicado (e o código executado) antes de ser salvo na barra de favoritos, ou seja, após o navegador ter definido seu ícone.
dumbledad

6

Aqui está uma boa técnica que quase faz o que você quer.🙅

Funciona muito bem no meu Mac✅, mas não consegui fazê-lo funcionar no Windows 7⃣.❌

Use "Emoji" 🈳. Eles são caracteres Unicode, que por acaso também se parecem com ícones coloridos. Você só pode escolher de uma lista predefinida de imagens, mas na verdade não é ruim💩 se tudo o que você está tentando fazer é dar ao usuário algo para olhar👓 para lembrá-lo do que o bookmarklet faz.

Por exemplo, estou criando um bookmarklet de "chave de segurança "📖. Então eu uso 🔑 no nome do meu bookmarklet! 😃😊

Basicamente, você vê a imagem🎑 na barra de favoritos 😝

Use este site para ajudá-lo a encontrar um Emoji que funcione para o seu bookmarklet: http://emojipedia.org/symbols/


1
Acabei de receber um monte de marcas de "fonte não tem glifo para este ponto de código". Visto que estou usando o Firefox no Linux, isso significa que o comportamento de fallback não conseguiu nem mesmo encontrá-los em nenhuma fonte do sistema. Estou correto em supor que esses são os glifos de emoji específicos do Mac que os blogueiros têm aconselhado os web designers a evitar?
ssokolow de

Sim. No entanto, se você sabe que seu cliente está sendo executado em um computador capaz de exibir emojis, é tão ruim exibi-los? Para meu uso pessoal, permitirei que os usuários decidam se desejam produzir emoji ou não. Se não, eu não produzo nenhum, eles apenas obtêm texto simples.
Theo

Além de ser uma solução que pode tropeçar em inúmeras falhas do web designer que a usa, eu não arriscaria a má impressão que poderia causar quando (e não se) alguém inevitavelmente carregasse algo que eu construí em um sistema não-mac.
ssokolow de

Votos positivos em parte para fins práticos e em parte para valor de entretenimento. Emojis são a resposta para todos os problemas da vida!
Sridhar Sarnobat

Dica: use este site para copiar e colar os emojis de que você precisa: emojipedia.org/upwards-black-arrow .
Sridhar Sarnobat

4

Com base na sugestão de Wizek, você pode colocar seu código em um 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>

E salve tudo isso como um marcador. ( Experimente! Arraste o código para a barra de guias)

Infelizmente, isso só funciona para alguns casos (mais abaixo).

Como funciona:

(Pelo menos no Chrome) É semelhante a um bookmarklet usando o formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"como outras soluções sugeriram. Nesse caso, o html da página em que você está será substituído pelo html do bookmarklet, mas o local permanece o mesmo e o próprio bookmarklet ainda não terá um local, então o Chrome não pode salvar um favicon para ele.

Em contraste, com um marcador data-uri vamos para a outra página , ela tem seu próprio local e o navegador pode salvar um favicon para ela. Pense nisso como "Hospedar um site no seu navegador", que você poderá acessar em outros computadores se sincronizar seus favoritos. Você também pode usar uma imagem base64 para o favicon em vez de um url se quiser manter tudo local.

Tem limitações.

  • Ao clicar nele, ele sai da página atual e carrega a página nos dados . Portanto, você não poderá usá-lo para bookmarlets que interagem com a página atual, apenas para códigos que podem ser executados em uma página diferente.

  • Não use // para comentários. Uma vez que tudo será salvo em uma linha, coloque-os em / ** / e não se esqueça dos seus pontos e vírgulas

  • No FF, ele salvou o favicon, mas não consegui configurá-lo para sempre abrir janelas pop-up se eu quiser usar window.open () porque não me permite salvar um comportamento padrão para urls de dados


Como um exemplo:

Usando essa técnica, criei um pequeno Bookmarklet com gerador de ícones. Você pode arrastar esse código para a barra de URL (ou salvá-lo como um favorito) para usá-lo. É uma página simples com uma área de entrada para o código e para um ícone e, em seguida, gera um bookmarklet com o ícone

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>

Outro exemplo: Bookmarklet para abrir o Facebook Messenger em sua própria janela pequena (pode não funcionar se o seu navegador bloquear pop-ups por padrão)

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>

Outras soluções alternativas do Chrome para obter ícones de bookmarklet:

  • Exportando a barra de favoritos, editando-a e importando-a novamente, conforme descrito nesta resposta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- google-chrome

  • Transformando o bookmarklet em uma extensão. Não será mais um bookmarklet, mas terá a mesma função. Aqui está um site simples que faz isso para você http://sandbox.self.li/bookmarklet-to-extension/ e, em seguida, basta alterar o arquivo do ícone para o que você deseja. A desvantagem disso é que as extensões usam até memória RAM (em torno de 10 MB para as simples?), Se você tiver muita e pouca memória RAM, pode não ser a solução para você. Além disso, você não terá texto como em um marcador, apenas o ícone.


1
Isso só funciona para Chrome e Safari. Não Mozilla, infelizmente. A intenção de um bookmarklet é ser um navegador cruzado, IMO.
sijpkes

Essa é a única coisa que funcionou. Caramba, muito obrigado.
Alex Beals

3

É possível atribuir e modificar o favicon do favicon usando javascript e canvas (veja o incrível jogo de favicon Defender of the Favicon ). O código-fonte do jogo irá ajudá-lo a fazer isso (ele basicamente depende do uso da função toDataUrl () no canvas, conforme visto na linha 554 do código-fonte).

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

O que acontece quando um bookmarlet que define o favicon dessa forma é clicado ou salvo? Eu não sei, mas poderia ser bom tentar. O navegador pode salvá-lo?


1
(Testado no Chrome) Sem solução. Ao alterar um favicon usando um bookmarlet, você ainda está no mesmo local. O navegador pode alterar o ícone de um marcador da página atual, mas não atribuirá um ao marcador.
aljgom 01 de

1

Eu acho que uma maneira possível é usar Unicode char na âncora de bookmarklet como seu ícone:

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

peneirando todos os símbolos possíveis você poderá encontrar o caractere que se assemelha mais ao ícone que você deseja


1

Portanto, esta não é uma solução completa ainda, mas pode ser um passo em direção a uma direção de trabalho.

data:A codificação de um ícone em um data:html codificado com -uri funciona, para minha surpresa.

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

Sendo assim <html>, podemos correr <script type="javascript">para lá também.

Para alguns bookmarklets, isso já pode ser mais do que suficiente. Para outros que desejam modificar a página atual ou pelo menos obter algumas informações dela antes de abrir uma nova guia, azar ainda. Atualizarei esta resposta se encontrar uma maneira de fazer isso.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.