Buat koneksi antara pengguna dan ekstensi. (Manifes Versi 3)
Saya telah mempelajari ekstensi Chrome di waktu senggang saya dan hal ini memicu banyak ide sekarang karena saya tahu cara membuatnya! Salah satu bagian yang lebih menantang dalam mempelajarinya adalah memahami apa itu naskah latar belakang — dan bagaimana menulis naskah yang efektif.
Apa itu Ekstensi Chrome?
Ekstensi Chrome adalah program perangkat lunak, yang dibuat berdasarkan teknologi web (seperti HTML, CSS, dan JavaScript) yang memungkinkan pengguna menyesuaikan pengalaman penjelajahan Chrome. Anda dapat membuatnya dan memuatnya ke halaman ekstensi (chrome://extensions/) jika Anda mengaktifkan mode pengembang. Namun sebelum kita membahasnya, mari mulai membangun ekstensi kita!
Pertama, buat folder bernama extension-boilerplate. Ini akan menjadi proyek ekstensi Chrome kami. File pertama dalam proyek ini adalah file manifest.json.
{
"name": "Extension Boilerplate",
"description": "Starter code for chrome extension.",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}
Ini adalah dasar untuk perluasan kami.
Selanjutnya, buat file background.js kosong di proyek Anda. Kami akan meninjaunya kembali sebentar lagi.
Untuk saat ini, buka chrome://extensions/ dan pastikan mode pengembang diaktifkan. Anda dapat memeriksa apakah itu ada di kanan atas. Setelah mode pengembang diaktifkan, Anda akan melihat beberapa opsi di sisi kiri.
Salah satu opsi tersebut adalah Muat Dibongkar.
KlikLoad Unpacked,lalu pilih direktori ekstensi Anda saat ini. Ini akan memuat kode untuk ekstensi Anda dan memungkinkan Anda mengujinya. Setelah Anda memuatnya, buka ekstensi Anda di toolbar dan klik potongan puzzle. Gulir ke bawah sampai Anda menemukan ekstensi Anda dan sematkan ke toolbar Anda.
Besar! Sekarang kita sudah menyiapkan semuanya, kita bisa mulai mengerjakan skrip latar belakang kita.
Apa itu Skrip Latar Belakang?
Skrip latar belakang pada dasarnya adalah bagian dari ekstensi Anda yang menghubungkan browser ke ekstensi itu sendiri.
Misalnya, Anda ingin memicu peringatan di jendela saat ini ketika Anda mengeklik ekstensi. Apa yang akan Anda lakukan adalah menulis skrip latar belakang yang mendeteksi ekstensi telah diklik. Setelah terdeteksi, Anda dapat mengirim pesan ke sisi klien yang memintanya melakukan sesuatu dengan menjalankan skrip sisi klien.
Lebih lanjut tentang itu nanti.
Skrip Latar Belakang
Manifes
Di versi manifes sebelumnya, Anda dapat menunjukkan skrip latar belakang Anda dengan sesuatu seperti di bawah ini.
"background": {
"scripts": ["background.js"],
"persistent": false
},
Di versi 3 (versi terbaru saat tulisan ini dibuat), Anda perlu menulis di bawah ini.
"background": {
"service_worker": "background.js"
},
JavaScript (Latar Belakang)
Sekarang mari kita kerjakan background.js.
Dalam file ini, kita dapat mengakses ekstensi dengan memanfaatkan chrome.action API. API ini akan memungkinkan kita untuk mengontrol tombol toolbar yang mewakili ekstensi kita. API memberi kita akses ke beberapa opsi.
Untuk kasus kami, kami hanya akan fokus pada yang onClicked untuk saat ini. Sesuai dengan namanya, ini akan memungkinkan kita untuk mengeksekusi sesuatu di skrip latar belakang ketika kita benar-benar mengklik ikon tersebut (gambar kecil yang saya sertakan di extension-boilerplate/assets/icon.png).
Kita dapat menambahkan fungsi untuk dieksekusi pada tindakan onClick dengan menambahkan event pendengar. Lihat di bawah.
chrome.action.onClicked.addListener(tab => {
const {url} = tab;
console.log(`Loading: ${url}`);
});
Argumen yang diteruskan ke fungsi panggilan balik kita adalah objek tab. Ini mewakili tab saat ini di jendela Chrome kita.
Dapatkan semua konten terbaru saya dengan membuat akun Program Mitra Menengah dan berlangganan email saya. :)
Sebelum kita dapat menguji skrip kita, kita perlu menambahkan properti lain ke file manifest.json kita. Ini akan memungkinkan kita untuk menggunakan chrome.action API dan memberi kita akses ke service worker. Lebih lanjut tentang itu sebentar lagi.
Di bawah ini adalah properti action yang akan kita tambahkan.
"action":{
"default_title": "Extension Boilerplate",
"default_icon": "assets/icon.png"
}
Properti ini mencakup judul default untuk ekstensi kami serta ikon default. Ikon ini (yang saya sebutkan sebelumnya) akan menjadi apa yang kita klik di toolbar untuk menjalankan skrip.
Setelah selesai, kembali ke halaman ekstensi chrome. Temukan ekstensi yang sedang Anda kerjakan dan klik ikon segarkan. Ini akan memuat semua file yang diperbarui. Kemudian klik hyperlink service worker.
Kini setelah Anda memiliki kode ekstensi chrome terbaru, dan konsol pekerja layanan terbuka, klik ekstensi yang dipasangi pin dan lihat apa yang terjadi.
Anda baru saja memicu skrip latar belakang saat diklik! Anda dapat melihat URL yang dicatat di konsol pekerja layanan. Luar biasa! Tapi apa yang kita lihat di konsol chrome halaman web?
Tidak ada apa-apa.
Hal ini karena skrip latar belakang kami, ketika mendeteksi klik pada ekstensi kami, tidak berinteraksi dengan sisi klien kami. Ingat, ini ada di latar belakang.
Untuk melakukan sesuatu di sisi klien, kita perlu menambahkan beberapa hal.
Sisi Klien
Ingat bagaimana kami mengatakan kami ingin memanggil (atau mengeksekusi) sesuatu di sisi klien yang akan memicu peringatan di jendela ketika ekstensi diklik? Anda dapat melakukan ini dengan memanfaatkan executeScript, sebuah metode yang memasukkan skrip ke dalam konteks target (seperti sisi klien browser).
Hal ini berguna karena akan memungkinkan kita untuk menulis skrip sisi klien yang dapat kita panggil (atau masukkan) dari skrip latar belakang kita. Sebelum kita membahasnya, mari perbarui manifes kita untuk mengizinkan apa yang disebut scripting. Tambahkan di bawah ini ke file manifest.json Anda.
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
Tanpa izin tambahan tersebut, kami tidak akan dapat mengakses chrome.scripting API. Setelah Anda selesai melakukannya, mari tambahkan skrip sisi klien. Kami akan menyebutnya, clientside.js. Masukkan kode di bawah ini ke dalam file Anda.
alert('hit clientside!')
Sekarang, kita dapat menambahkan kode injeksi ke fungsi panggilan balik background.js kita. Lihat di bawah.
init = (tab) => {
const {id, url} = tab;
chrome.scripting.executeScript(
{
target: {tabId: id, allFrames: true},
files: ['clientside.js']
}
)
console.log(`Loading: ${url}`);
}
chrome.action.onClicked.addListener(tab => {
init(tab)
});
executeScript menerima beberapa opsi dalam suatu objek sebagai argumen. Argumen pertama adalah target. Kita menentukan target dengan menyertakan objek yang tabId dan allFrames disetel ke true.
Properti berikutnya dalam argumen adalah files. Dengan cara ini, kita dapat memasukkan satu atau lebih file ke sisi klien. Untuk saat ini, kami hanya memiliki satu file tetapi kami masih harus memasukkannya ke dalam array.
Sekarang, segarkan ekstensi Anda di halaman ekstensi chrome. Setelah menyegarkan, klik ekstensi Anda di toolbar. Anda akan melihat sesuatu seperti ini.
Biola! Anda telah membuat ekstensi chrome pertama Anda dengan skrip latar belakang yang sesuai dengan manifes versi 3! Ini baru permulaan. Saya akan menjelajahi lebih banyak fitur ekstensi chrome dan mempostingnya setelah saya menerbitkan milik saya sendiri!
Ekstensi Chrome apa yang sedang Anda kerjakan? Beri tahu saya di komentar! Semua kode sumber dapat ditemukan di GitHub.
Tingkatkan keanggotaan Medium gratis Anda dan dapatkan cerita tanpa batas, bebas iklan, dari ribuan penulis di berbagai publikasi. Ini adalah tautan afiliasi dan sebagian dari keanggotaan Anda membantu saya mendapatkan imbalan atas konten yang saya buat.
Anda juga dapat berlangganan melalui email dan mendapat pemberitahuan setiap kali saya memposting sesuatu yang baru!
