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.
