Pelajari dasar-dasar pengembangan ekstensi Chrome dengan membuat ekstensi Halo Dunia pertama Anda.
Ringkasan
Anda akan membuat contoh "Hello World", memuat ekstensi secara lokal, menemukan log, dan menjelajahi rekomendasi lainnya.
Halo Dunia
Ekstensi ini akan menampilkan “Hello Extensions” saat pengguna mengklik ikon toolbar ekstensi.
Mulailah dengan membuat direktori baru untuk menyimpan file ekstensi Anda. Jika mau, Anda dapat mendownload kode sumber lengkap dari GitHub.
Selanjutnya, buat file baru dalam direktori ini yang bernama manifest.json
. File JSON ini menjelaskan kemampuan dan konfigurasi ekstensi. Misalnya, sebagian besar file manifes berisi kunci "action"
yang mendeklarasikan gambar yang harus digunakan Chrome sebagai ikon tindakan ekstensi dan halaman HTML yang akan ditampilkan dalam pop-up saat ikon tindakan ekstensi diklik.
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
Download ikon ke direktori Anda, dan pastikan untuk mengubah namanya agar sesuai dengan apa yang ada di kunci "default_icon"
.
Untuk pop-up, buat file bernama hello.html
, dan tambahkan kode berikut:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
Ekstensi sekarang menampilkan pop-up jika ikon tindakan ekstensi (ikon toolbar) diklik. Anda dapat mengujinya di Chrome dengan memuatnya secara lokal. Pastikan semua file tersimpan.
Memuat ekstensi yang belum dibuka
Untuk memuat ekstensi yang belum dibuka dalam mode developer:
- Buka halaman Ekstensi dengan memasukkan
chrome://extensions
di tab baru. (Menurut desain, URLchrome://
tidak dapat ditautkan.)- Atau, klik tombol teka-teki menu Ekstensi dan pilih Kelola Ekstensi di bagian bawah menu.
- Atau, klik menu Chrome, arahkan kursor ke Alat Lainnya, lalu pilih Ekstensi.
- Aktifkan Mode Developer dengan mengklik tombol di samping Mode developer.
- Klik tombol Load unpacked, lalu pilih direktori ekstensi.
Akhirnya! Ekstensi berhasil diinstal. Jika tidak ada ikon ekstensi yang disertakan dalam manifes, ikon generik akan dibuat untuk ekstensi tersebut.
Menyematkan ekstensi
Secara default, saat Anda memuat ekstensi secara lokal, ekstensi tersebut akan muncul di menu ekstensi (). Sematkan ekstensi Anda ke toolbar untuk mengakses ekstensi dengan cepat selama pengembangan.
Klik ikon tindakan ekstensi (ikon toolbar); Anda akan melihat pop-up.
Memuat ulang ekstensi
Kembali ke kode dan ubah nama ekstensi menjadi "Hello Extensions of the world!" di manifes.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
Setelah menyimpan file, Anda juga harus memuat ulang ekstensi untuk melihat perubahan ini di browser. Buka halaman Extensions dan klik ikon muat ulang di samping tombol aktif/nonaktif:
Kapan harus memuat ulang ekstensi
Tabel berikut menunjukkan komponen mana yang perlu dimuat ulang untuk melihat perubahan:
Komponen ekstensi | Memerlukan pemuatan ulang ekstensi |
---|---|
Manifes | Ya |
Pekerja layanan | Ya |
Skrip konten | Ya (plus halaman host) |
Pop-up | Tidak |
Halaman opsi | Tidak |
Halaman HTML ekstensi lainnya | Tidak |
Menemukan log dan error konsol
Log konsol
Selama pengembangan, Anda dapat men-debug kode dengan mengakses log konsol browser. Dalam hal ini, kita akan
menemukan log untuk pop-up. Mulai dengan menambahkan tag skrip ke hello.html
.
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
Buat file popup.js
dan tambahkan kode berikut:
console.log("This is a popup!")
Untuk melihat pesan ini yang dicatat ke dalam konsol:
- Buka pop-up.
- Klik kanan pop-up.
- Pilih Periksa.
- Di DevTools, buka panel Console.
Log error
Sekarang mari kita hentikan ekstensinya. Kita dapat melakukannya dengan menghapus tanda kutip penutup di popup.js
:
console.log("This is a popup!) // ❌ broken code
Buka halaman Ekstensi dan buka pop-up. Tombol Error akan muncul.
Klik tombol Error untuk mempelajari error lebih lanjut:
Untuk mempelajari lebih lanjut cara men-debug pekerja layanan, halaman opsi, dan skrip konten, lihat Men-debug ekstensi.
Membuat struktur project ekstensi
Ada banyak cara untuk membuat struktur project ekstensi. Namun, satu-satunya prasyarat adalah menempatkan file manifest.json di direktori utama ekstensi seperti pada contoh berikut:
Menggunakan TypeScript
Jika melakukan pengembangan menggunakan editor kode seperti VSCode atau Atom, Anda dapat menggunakan paket npm chrome-types untuk memanfaatkan pelengkapan otomatis untuk Chrome API. Paket npm ini diupdate secara otomatis saat kode sumber Chromium berubah.
🚀 Siap untuk mulai membangun?
Pilih salah satu tutorial berikut untuk memulai perjalanan pembelajaran ekstensi Anda.
Perluasan | Yang akan Anda pelajari |
---|---|
Menjalankan skrip di setiap halaman | Untuk menyisipkan elemen di setiap halaman secara otomatis. |
Memasukkan skrip ke tab aktif | Untuk menjalankan kode di halaman saat ini setelah mengklik tindakan ekstensi. |
Mengelola tab | Untuk membuat pop-up yang mengelola tab browser. |
Menangani peristiwa dengan pekerja layanan | Cara pekerja layanan ekstensi menangani peristiwa. |