Cara Membuat Bookmarklet Pencarian Teks dengan JavaScript

Bookmarklets adalah Aplikasi JavaScript yang dapat diakses sebagai penanda browser. Mereka digunakan untuk memungkinkan pengguna melakukan tindakan yang berbeda di halaman web. Misalnya, bookmarklet ini oleh FontShop adalah untuk mempratinjau font web FontShop di halaman web mana pun.

Pada artikel ini, kita akan melihat seberapa cepat dan mudahnya membuat bookmarklet dengan menciptakan satu itu melakukan Wikiwand (Wikipedia lebih tampan) pencarian untuk teks yang dipilih pada halaman web apa pun.

Cara kerja bookmarklet

URI bookmarklet menggunakan javascript: protokol itu menunjukkan itu terdiri dari kode JavaScript. Ketika Anda mengklik bookmarklet, Anda bisa jalankan JavaScript pada halaman web, dan melakukan tugas, seperti mengubah tampilan halaman, mengarahkan ke halaman lain, atau menunjukkan informasi baru.

Karena bookmark pada dasarnya set kode JavaScript, mereka mudah dibuat dengan sedikit pengetahuan JavaScript, baik untuk penggunaan pribadi atau untuk menawarkannya kepada pengguna Anda, seperti WordPress dengan Presslet ini..

Mulai dengan kode JavaScript

Itu Struktur URL Kegunaan Wikiwand untuk artikel berbahasa Inggris adalah https://www.wikiwand.com/en/articleTitle. Kita perlu menulis skrip yang melompat ke halaman Wiki dari URL mana diakhiri dengan string yang baru saja dipilih pengguna - teks yang dipilih perlu ditempatkan di tempat judul artikel.

Pertama kita dapatkan teksnya pengguna telah memilih pada halaman dengan kode berikut:

 getSelection (). toString () 

Kita harus melemparkan objek dikembalikan oleh getSelection () sebagai string dengan menggunakan toString () metode, untuk membuatnya output teks yang dipilih.

Selanjutnya, kita perlu melakukan kunjungan ke halaman artikel Wikiwand. Kami akan mencapai ini dengan menggunakan logika berikut, di mana baruURL akan menjadi URL halaman artikel Wikiwand (yang akan berisi string yang dipilih di akhir):

 location.href = newURL 

Saat kami menggabungkan dua cuplikan kode ini, kami berakhir dengan skrip berikut:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Sekarang kita hanya perlu menambahkan javascript: protokol ke depan, dan kami memiliki kode akhir kami akan gunakan di bookmarklet kami:

 // tambahkan dalam satu baris tanpa javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). ganti (/ \ n / g, '% 20' ) 

Opsional ganti (/ \ n / g, '% 20') pada akhirnya mengganti karakter baris baru (\ n) dalam teks dengan karakter spasi tunggal (% 20).

Kode JavaScript sudah siap. Perhatikan bahwa kode harus ditempatkan dalam satu baris tanpa jeda baris, sejak itu akan terjadi ditambahkan ke bidang input teks.

Buat bookmark

Buka jendela bookmark browser Anda, dan tambahkan bookmark baru:

• Firefox: Tekan ctrl + shift + B / cmd + shift + B, klik kanan "Bookmarks Toolbar", dan pilih "Bookmark Baru".
• Chrome: Tekan ctrl + shift + O / cmd + alt + B, klik kanan "Bilah bookmark", dan pilih "Tambahkan Halaman ... & quot.

Di bidang URL salin-tempel kode JavaScript dari sebelumnya. Setelah bookmark dibuat, bookmark siap digunakan; pergi ke halaman web mana saja, pilih satu kata Anda ingin mencari di Wikiwand, dan klik bookmarklet - halaman artikel Wikiwand akan terbuka sekaligus.

Akses Cepat

Daripada meraih menu bookmark setiap kali Anda membutuhkan bookmarklet, Anda dapat memilih untuk melakukannya tampilkan secara langsung di browser Anda untuk akses cepat.

• Firefox: Klik "Lihat> Bilah Alat" di bilah menu atas, dan pilih "Bilah Alat Penanda".
• Chrome: Tekan ctrl + shift + B / cmd + shift + B.

Buat tautan bookmarklet

Anda dapat menambahkan bookmarklet Anda ke situs web sebagai hyperlink juga, pengunjung yang mana bisa bookmark baik dengan drag-and-dropping tautan ke bilah alat bookmark, atau klik kanan tautan dan pilih opsi untuk membookmarknya.

Untuk mengubah bookmarklet Anda menjadi hyperlink, buat a Tag HTML dengan skrip bookmarklet sebagai nilai nya href atribut:

   Wikiwand Cari Bookmarklet  

Cara menyimpan bookmarklet secara terpisah

Anda juga bisa gunakan file JavaScript terpisah untuk menyimpan kode bookmarklet, yang mungkin tidak perlu jika Anda memiliki skrip pendek - seperti yang baru saja kita lihat dalam tutorial ini - tetapi bisa berguna ketika kode JavaScript terlalu panjang untuk menyalin-menempelkannya ke bilah bookmark browser Anda.

Berkas myscript.js akan rumah kode JavaScript utama untuk bookmarklet, dan Anda perlu menambahkan kode berikut sebagai URL bookmark (baik ke bilah bookmark browser, atau sebagai nilai href atribut dalam file HTML):

 // tambahkan satu baris tanpa javascript: (() => with (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Cuplikan kode di atas adalah terbungkus dalam fungsi panah pemohon sendiri, dan menggunakan fitur ECMAScript 6, seperti membiarkan kata kunci, untuk mengurangi panjang kode. Itu menambahkan > tag yang menunjuk ke myscript.js file ke bagian dari dokumen ketika pengguna mengklik bookmarklet (perhatikan bahwa Anda mungkin perlu menggunakan jalur absolut untuk myscript.js mengajukan).