Cara Mengkonversi Bookmarklet ke Ekstensi Chrome Bookmarklets, atau kemampuan untuk mengeksekusi kode JavaScript Anda sendiri pada halaman manapun, memungkinkan
Bookmarklets, atau kemampuan untuk mengeksekusi kode JavaScript Anda sendiri pada halaman manapun, memungkinkan Anda menyesuaikan pengalaman penjelajahan Anda dengan berbagai cara. Beberapa waktu yang lalu saya menulis beberapa kode JS yang akan menghapus semua konten dari halaman manapun dan hanya menampilkan gambar dengan fungsi zoom on click. Ini bekerja dengan baik sebagai bookmarklet tapi saya ingin melihat betapa mudahnya mengemasnya ke Ekstensi Chrome.Saya melakukan ini untuk bersenang-senang tapi ada beberapa alasan kuat seperti akses ke sumber daya lintas domain, akses ke permintaan jaringan, dan kemampuan untuk berbagi dengan orang lain melalui Toko Chrome.
Berikut adalah beberapa langkah sederhana yang menunjukkan cara mengubah kode JavaScript menjadi Ekstensi Chrome
Persyaratannya sederhana: tekan ikon ekstensi yang mengeksekusi kode JS pada halaman. Jadi, saya memerlukan sebuah ikon, file JavaScript dengan kode, dan file manifest yang menentukan cara mengeksekusi file JS tersebut saat ekstensi diklik dan izin apa untuk memberikannya. Karena saya hanya mengubah halaman web di tab yang aktif, saya hanya memerlukan izin "activeTab". Saya melakukan tindakan browser dan mengeksekusi file JS sebagai latar belakang. Inilah manifestonya.
Karena ekstensi didefinisikan sebagai tindakan browser, file JS saya perlu membungkus kode dengan benar di sekitar acara itu. Jadi, kami memberi tahu Chrome untuk menambahkan pendengar untuk acara klik ( chrome.browserAction.onClicked.addListener) dan saat itu terjadi, kami meminta Chrome untuk menjalankan beberapa kode JavaScript di tab ( chrome.tabs.executeScript ). Berikut adalah file JS lengkap:
Dan inilah ekstensi pada GitHub yang dapat Anda unduh dan tambahkan sendiri dengan membuka ekstensi Chrome (chrome: // extensions /), mengaktifkan mode pengembang, dan memilih folder yang diunduh dengan tombol "load unpacked extension".
Luar:
Ekstensi
Mengembangkan Ekstensi Google Chrome
Aplikasi Chrome di GitHub
Proyek boilerplate untuk ekstensi Chrome DevTools