Berdasarkan saran Wizek, Anda dapat memasukkan kode Anda ke dalam 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>
Dan simpan semua itu sebagai bookmark. ( Cobalah! Seret kode ke bilah tab Anda)
Sayangnya, ini hanya berfungsi untuk kasus tertentu (selengkapnya di bawah).
Bagaimana itu bekerja:
(Setidaknya di Chrome) Ini mirip dengan bookmarklet menggunakan format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"seperti yang disarankan solusi lain. Dalam hal ini, html dari halaman tempat Anda berada akan diganti dengan html dari bookmarklet, tetapi lokasinya tetap sama dan bookmarklet itu sendiri tetap tidak memiliki lokasi sehingga Chrome tidak dapat menyimpan favicon untuk itu.
Sebaliknya, dengan data-uri bookmark kita menuju ke halaman lain , itu memiliki lokasinya sendiri, dan browser dapat menyimpan favicon untuknya. Anggap saja sebagai "Hosting situs web di browser Anda", yang dapat Anda akses di komputer lain jika Anda menyinkronkan bookmark. Anda juga dapat menggunakan gambar base64 untuk favicon alih-alih url jika Anda ingin menjaga semuanya tetap lokal.
Itu memiliki keterbatasan.
Saat Anda mengkliknya, itu meninggalkan halaman saat ini dan memuat halaman dalam data . Oleh karena itu, Anda tidak akan dapat menggunakannya untuk bukmarlet yang berinteraksi dengan halaman saat ini, hanya untuk kode yang dapat Anda jalankan di halaman berbeda.
Jangan gunakan // untuk komentar. Karena semuanya akan disimpan dalam satu baris, gabungkan dengan / ** / dan jangan lupa titik koma Anda
Di FF itu menyimpan favicon, tetapi saya tidak dapat mengaturnya untuk selalu membuka jendela popup jika saya ingin menggunakan window.open () karena itu tidak memungkinkan saya untuk menyimpan perilaku default untuk url data
Sebagai contoh:
Menggunakan teknik ini saya membuat Bookmarklet kecil Dengan Pembuat Ikon. Anda dapat menyeret kode ini ke bilah URL Anda (atau menyimpannya sebagai bookmark) untuk menggunakannya. Ini adalah halaman sederhana dengan area input untuk kode, dan untuk ikon, dan kemudian menghasilkan bookmarklet dengan ikon
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>
Contoh Lain: Bookmarklet untuk membuka Facebook messenger di jendela kecilnya sendiri (mungkin tidak berfungsi jika browser Anda memblokir popup secara default)
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>
Solusi Chrome lainnya untuk mendapatkan ikon bookmarklet:
Mengekspor bilah bookmark, mengeditnya, dan Mengimpornya lagi, seperti yang dijelaskan dalam jawaban ini /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- google-chrome
Mengubah bookmarklet menjadi ekstensi. Ini tidak akan menjadi bookmarklet lagi, tetapi akan memiliki fungsi yang sama. Berikut adalah situs web sederhana yang melakukannya untuk Anda http://sandbox.self.li/bookmarklet-to-extension/ lalu ubah saja file ikon ke yang Anda inginkan. Kekurangan dari ini adalah bahwa ekstensi menggunakan ram (sekitar 10mb untuk yang sederhana?), Jika Anda memiliki banyak dan sedikit ram mungkin bukan solusi untuk Anda. Selain itu, Anda tidak akan memiliki teks seperti di bookmark, hanya ikonnya.
