Según la sugerencia de Wizek, puede poner su código en 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>
Y guarde todo eso como marcador. ( Pruébelo, arrastre el código a la barra de pestañas)
Desafortunadamente, solo funciona en ciertos casos (más abajo).
Cómo funciona:
(Al menos en Chrome) Es similar a un bookmarklet que usa el formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"que han sugerido otras soluciones. En ese caso, el html de la página en la que se encuentra será reemplazado por el html del bookmarklet, pero la ubicación seguirá siendo la misma y el bookmarklet en sí no tendrá una ubicación, por lo que Chrome no podrá guardar un favicon para él.
Por el contrario, con un marcador de uri de datos vamos a la otra página , tiene su propia ubicación y el navegador puede guardar un favicon para él. Piense en ello como "Alojar un sitio web en su navegador", al que podría acceder en otras computadoras si sincroniza sus marcadores. También puede usar una imagen base64 para el favicon en lugar de una URL si desea mantener todo local.
Tiene limitaciones.
Cuando hace clic en él, sale de la página actual y carga la página en los datos . Por lo tanto, no podrá usarlo para los marcadores que interactúan con la página actual, solo para el código que puede ejecutar en una página diferente.
No uses // para comentarios. Dado que todo se guardará en una línea, envuélvalos en / ** / y no olvide sus puntos y comas
En FF guardó el favicon, pero no pude configurarlo para que siempre abriera ventanas emergentes si quiero usar window.open () porque no me permite guardar un comportamiento predeterminado para las URL de datos
Como ejemplo:
Usando esta técnica creé un pequeño Bookmarklet con Icon Generator. Puede arrastrar este código a su barra de URL (o guardarlo como marcador) para usarlo. Es una página simple con un área de entrada para el código y para un ícono, y luego genera un marcador con el ícono
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>
Otro ejemplo: Bookmarklet para abrir Facebook Messenger en su propia ventana pequeña (puede que no funcione si su navegador bloquea las ventanas emergentes de forma predeterminada)
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>
Otras soluciones de Chrome para obtener íconos de marcadores:
Exportar la barra de marcadores, editarla e importarla nuevamente, como se describe en esta respuesta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome
Convirtiendo el bookmarklet en una extensión. Ya no será un bookmarklet, pero tendrá la misma función. Aquí hay un sitio web simple que lo hace por usted http://sandbox.self.li/bookmarklet-to-extension/ luego simplemente cambie el archivo de icono a lo que desee. El inconveniente de esto es que las extensiones consumen memoria RAM (¿alrededor de 10 MB para las simples?), Si tiene mucho y poco RAM, puede que no sea la solución para usted. Además, no tendrá texto como en un marcador, solo el ícono.
