In base al suggerimento di Wizek puoi inserire il tuo codice in 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>
E salva tutto come un segnalibro. ( Provalo! Trascina il codice nella barra delle schede)
Purtroppo funziona solo per alcuni casi (più sotto).
Come funziona:
(Almeno in Chrome) È simile a un bookmarklet che utilizza il formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"suggerito da altre soluzioni. In tal caso, l'html della pagina in cui ti trovi verrà sostituito dall'html del bookmarklet, ma la posizione rimane la stessa e il bookmarklet stesso non avrà ancora una posizione, quindi Chrome non può salvare una favicon per esso.
Al contrario, con un segnalibro data-uri andiamo all'altra pagina , ha la sua posizione e il browser può salvare una favicon per essa. Consideralo come "Ospitare un sito Web nel tuo browser", a cui potresti accedere da altri computer se sincronizzi i tuoi segnalibri. Puoi anche usare un'immagine base64 per la favicon invece di un URL se vuoi mantenere tutto in locale.
Ha dei limiti.
Quando fai clic su di esso, lascia la pagina corrente e carica la pagina nel file dati . Quindi non potrai usarlo per bookmarlet che interagiscono con la pagina corrente, solo per codice che puoi eseguire in una pagina diversa.
Non utilizzare // per i commenti. Dal momento che verrà salvato tutto in una riga, racchiudili in / ** / e non dimenticare i punti e virgola
In FF ha salvato la favicon, ma non sono stato in grado di impostarlo per aprire sempre le finestre popup se voglio usare window.open () perché non mi permette di salvare un comportamento predefinito per gli URL di dati
Come esempio:
Usando questa tecnica ho creato un piccolo Bookmarklet con Icon Generator. Puoi trascinare questo codice nella barra degli URL (o salvarlo come segnalibro) per usarlo. È una semplice pagina con un'area di input per il codice e per un'icona, quindi genera un bookmarklet con l'icona
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 altro esempio: Bookmarklet per aprire Facebook Messenger nella sua piccola finestra (potrebbe non funzionare se il tuo browser blocca i popup per impostazione predefinita)
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>
Altre soluzioni alternative di Chrome per ottenere le icone dei bookmarklet:
Esportare la barra dei segnalibri, modificarla e importarla di nuovo, come descritto in questa risposta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome
Trasformare il bookmarklet in un'estensione. Non sarà più un bookmarklet, ma avrà la stessa funzione. Ecco un semplice sito Web che lo fa per te http://sandbox.self.li/bookmarklet-to-extension/ quindi cambia semplicemente il file dell'icona in quello che desideri. Lo svantaggio di questo è che le estensioni utilizzano fino a RAM (circa 10 MB per quelle semplici?), Se hai molta e poca RAM potrebbe non essere la soluzione per te. Inoltre, non avrai testo come in un segnalibro, solo l'icona.
