Cara Mencipta Bookmarklet Carian Teks dengan JavaScript

Buku kecil adalah Aplikasi JavaScript yang boleh diakses sebagai penanda buku pelayar. Ia digunakan untuk membolehkan pengguna melakukan tindakan yang berbeza di laman web. Sebagai contoh, bookmarklet ini oleh FontShop adalah untuk melihat fon web FontShop pada mana-mana halaman web.

Dalam artikel ini, kita akan melihat bagaimana cepat dan mudahnya mencipta penanda buku dengan mewujudkan satu itu menjalankan sebuah Wikiwand (Wikipedia yang lebih baik) carian untuk teks yang dipilih di mana-mana halaman web.

Bagaimana buku kerja berfungsi

The URI of a bookmarklet menggunakan javascript: protokol yang menunjukkan ia terdiri daripada kod JavaScript. Apabila anda mengklik pada bookmarklet, anda boleh jalankan JavaScript pada halaman web, dan melaksanakan tugas, seperti menukar rupa halaman, mengalihkan halaman lain, atau menunjukkan maklumat baru di dalamnya.

Kerana penanda buku pada asasnya set kod JavaScript, mereka mudah untuk membuat dengan pengetahuan JavaScript yang sedikit, sama ada untuk kegunaan peribadi atau untuk menawarkannya kepada pengguna anda, seperti WordPress tidak dengan Press.

Bermula dengan kod JavaScript

The Struktur URL Kegunaan Wikiwand untuk artikel bahasa Inggeris adalah https://www.wikiwand.com/en/articleTitle. Kita perlu menulis skrip yang melompat ke halaman Wikiwand di mana URL berakhir dengan rentetan yang baru dipilih pengguna - teks yang dipilih perlu diletakkan di tempat artikelTitle.

Pertama, kita dapatkan teks pengguna telah memilih pada halaman dengan kod berikut:

 getSelection (). toString () 

Kita perlu pelakon objek yang dikembalikan oleh getSelection () sebagai rentetan dengan menggunakan menjalin() kaedah, untuk menjadikannya output teks yang dipilih.

Seterusnya, kita perlu buat lawatan ke laman artikel Wikiwand. Kami akan mencapai ini dengan menggunakan logik berikut, di mana newURL akan menjadi URL laman artikel Wikiwand (yang akan mengandungi rentetan yang dipilih pada akhir):

 location.href = newURL 

Apabila kami meletakkan coretan kod dua ini bersama-sama, kami mempunyai skrip berikut:

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

Sekarang kita hanya perlu menambah javascript: protokol ke hadapan, dan kami ada kod akhir kami akan gunakan di bookmarklet kami:

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

Pilihannya menggantikan (/ \ n / g, '% 20') pada akhirnya menggantikan mana-mana watak baris baru (\ n) dalam teks dengan watak ruang tunggal (% 20).

Kod JavaScript sudah siap. Perhatikan bahawa kod perlu diletakkan dalam satu baris tanpa sebarang rehat garis, sejak nanti ia akan menjadi ditambah ke medan input teks.

Buat penanda buku

Buka tetingkap penanda halaman pelayar anda, dan tambah penanda buku baharu:

• Firefox: Tekan ctrl + shift + B / cmd + shift + B, klik kanan "Toolbar Penanda Halaman" dan pilih "Bookmark Baru".
• Chrome: Tekan ctrl + shift + O / cmd + alt + B, klik kanan "Bar penanda halaman", dan pilih "Tambah Halaman ... & quot.

Dalam medan URL salin-tampal kod JavaScript dari sebelumnya. Sebaik sahaja penanda buku dibuat, ia sedia untuk digunakan; pergi ke mana-mana halaman web, pilih perkataan anda ingin mencari di Wikiwand, dan klik pada bookmarklet - halaman artikel Wikiwand akan dibuka sekaligus.

Akses Cepat

Daripada mencapai menu penanda buku setiap kali anda memerlukan bookmarklet, anda boleh memilih memaparkannya secara langsung dalam penyemak imbas anda untuk akses pantas.

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

Buat pautan bookmarklet

Anda boleh menambah bookmarklet anda ke tapak web sebagai hiperpautan juga, yang pelawat boleh bookmark dengan sama ada hanya drag-and-drop pautan ke bar alat penanda buku, atau klik kanan pautan dan memilih pilihan untuk bookmarknya.

Untuk menjadikan bookmarklet anda menjadi hyperlink, buat Tag HTML dengan skrip bookmarklet sebagai nilai nya href atribut:

   Wikiwand Search Bookmarklet  

Cara menyimpan penanda buku secara berasingan

Anda juga boleh gunakan fail JavaScript yang berasingan untuk menyimpan kod bookmarklet, yang mungkin tidak perlu jika anda mempunyai skrip pendek - seperti yang baru saja kita lihat dalam tutorial ini - tetapi boleh berguna apabila kod JavaScript terlalu panjang untuk menyalin-paste ke bar penanda halaman penyemak imbas anda.

Fail myscript.js akan rumah kod JavaScript utama untuk penanda buku, dan anda perlu menambah kod berikut sebagai URL penanda buku (sama ada ke bar penanda halaman pelayar, atau sebagai nilai dari href atribut dalam fail HTML):

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

Coretan kod di atas adalah dibungkus dengan fungsi anak panah sendiri, dan menggunakan ciri-ciri ECMAScript 6, seperti biarlah kata kunci, untuk mengurangkan panjang kod. Ia menambah a > tag menunjuk kepada myscript.js fail ke seksyen dokumen apabila pengguna mengklik penanda buku (ambil perhatian bahawa anda mungkin perlu menggunakan jalan mutlak untuk myscript.js fail).