Bagaimana mengatur favicon / icon saat bookmarklet diseret ke toolbar?

Saya telah membuat bookmarklet sendiri, dan fungsinya baik-baik saja, tetapi ketika ditambahkan ke toolbar di Opera atau Firefox, itu hanya menggunakan ikon bookmark default untuk browser (globe dan bintang, masing-masing). Situs saya memiliki favicon, dan jendela, tab, dan bahkan bookmark [situs] menggunakan favicon yang saya tentukan. Bukan hanya bookmarklet saya.

Bagaimana cara mengkodekan situs atau bookmarklet saya sehingga bookmarklet juga mendapatkan favicon?

Saya mengetahui berbagai teknik peretasan manual yang dapat digunakan pengguna untuk menyetel favicon setelah fakta, tetapi itu adalah solusi yang tidak diinginkan.

Bookmarklet menggunakan javascript://skema dan karenanya tidak memiliki domain tempat favicon dapat dimuat.

Jadi, saat ini tidak ada cara bagi Anda untuk memberikan favicon untuk bookmarklet. Pikirkan seperti ini: ingat semua hal kotak pasir Javascript - di mana Javascript tidak dapat mengakses apa pun di luar domain halaman web tempat Javascript berjalan? Bookmarklet yang perlu diikat ke domain apa pun untuk halaman saat ini yang Anda tonton, tidak bisa juga diikat ke favicon di situs web Anda sendiri.

Update: Menurut jawaban Hans Schmucker, ada kemungkinan untuk membuat bookmarklet yang ketika dimuat oleh browser ke menu bookmark akan menghasilkan dokumen HTML yang memiliki favicon. Alasannya sepertinya itu mungkin berhasil tetapi saya belum melihat sesuatu seperti ini dalam tindakan dan tes saya kembali negatif.

Inilah cara Anda melakukan ini:

1. Seret bookmarklet Anda ke Bilah Bookmark.
2. Di sebelahnya buat bookmark situs yang favicon ingin Anda gunakan untuk bookmarklet Anda.
3. Buka Pengelola Bookmark, klik Atur tarik-turun, lalu pilih Ekspor, simpan bookmark Anda sebagai file html.
4. Buka file html itu di editor teks.
5. Temukan bookmark yang baru saja Anda buat, katakanlah bookmark Gmail-nya, Anda harus memiliki kode html untuknya, yang terlihat seperti ini:

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

6. Salin seluruh tag ICON
7. Di file yang sama temukan bookmarklet yang Anda buat, dan masukkan tag ICON yang Anda salin ke tag bookmarklet Anda :

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

8. Simpan file ini
9. Kembali ke Pengelola Bookmark Chrom, klik lagi Atur, dan pilih Impor
10. Impor file HTML yang baru saja Anda edit, bookmarklet Anda sekarang memiliki favicon .

Pada dasarnya prosedurnya adalah untuk mendapatkan atribut ICON dari sebuah tag bookmark dan memasukkannya ke dalam tag bookmarklet

Kurang tepat: bookmarklet tidak memiliki domain, tetapi memiliki lokasi (yang merupakan bookmarklet itu sendiri) dan Anda dapat menetapkan ikon untuk itu. Setelah itu, tinggal bagaimana browser menyimpan ikon (Firefox menyimpan ikon penanda secara permanen, Anda mungkin tidak seberuntung itu dengan browser lain).

PS Security bahkan tidak memainkannya, ikon bisa datang dari mana saja. Tidak ada batasan.

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

Setelah membaca tapper [ware] dan situs Restafarian, berikut adalah solusi paling sederhana yang bisa saya dapatkan:

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

Bekerja dengan baik di Chrome dan FF, tetapi FF4 adalah satu-satunya browser yang akan menyimpan ikon di bilah bookmark. Berikut tampilannya: http://cl.ly/5WNR

Inilah teknik bagus yang hampir melakukan apa yang Anda inginkan.🙅

Berfungsi dengan baik di Mac✅ saya, tetapi saya tidak dapat membuatnya berfungsi di Windows 7⃣.❌

Gunakan "Emoji" 🈳. Mereka adalah karakter Unicode, yang juga terlihat seperti ikon berwarna. Anda hanya dapat memilih dari daftar gambar yang telah ditentukan, tetapi sebenarnya tidak buruk💩 jika semua yang Anda coba lakukan adalah memberikan sesuatu kepada pengguna untuk dilihat👓 untuk mengingatkan mereka tentang apa yang dilakukan bookmarklet.

Misalnya, saya membuat bookmarklet "kunci keamanan "📖. Jadi saya menggunakan 🔑 dalam nama bookmarklet saya! 😃😊

Jadi pada dasarnya Anda melihat gambar🎑 di bilah bookmark 😝

Gunakan situs ini untuk membantu Anda menemukan Emoji yang berfungsi untuk bookmarklet Anda: http://emojipedia.org/symbols/

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.

Anda dapat menetapkan dan memodifikasi favicon favicon menggunakan javascript dan kanvas (lihat Defender of the Favicon game favicon yang menakjubkan ). Kode sumber permainan akan membantu Anda melakukan itu (pada dasarnya bergantung pada penggunaan fungsi toDataUrl () di kanvas seperti yang terlihat pada baris 554 dari sumber).

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

Apa yang terjadi jika bookmarlet yang menyetel favicon dengan cara ini diklik atau disimpan? Saya tidak tahu tetapi akan menyenangkan untuk mencobanya. Browser dapat menyimpannya?

Saya pikir cara yang mungkin adalah menggunakan unicode char di jangkar bookmarklet seperti ikon Anda:

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

memilah-milah semua kemungkinan simbol, Anda mungkin menemukan karakter yang lebih mirip dengan ikon yang Anda inginkan

Jadi, ini bukan solusi lengkap, tetapi mungkin merupakan langkah menuju arah kerja.

data:pengkodean ikon dalam data:karya html yang dikodekan -uri, saya terkejut.

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

Karena ini <html>, kita juga bisa lari <script type="javascript">ke sana.

Untuk beberapa bookmarklet ini mungkin sudah lebih dari cukup. Bagi orang lain yang ingin mengubah halaman ini atau setidaknya mendapatkan beberapa info darinya sebelum membuka tab baru, semoga beruntung. Saya akan memperbarui jawaban ini jika saya menemukan cara untuk melakukan itu.