Ekstensi Hello World (Halo Dunia)

Pelajari dasar-dasar pengembangan ekstensi Chrome dengan membuat ekstensi Hello World pertama Anda.

Ringkasan

Anda akan membuat "Hello World" (Halo Dunia) memuat ekstensi secara lokal, menemukan log, dan mempelajari rekomendasi lainnya.

Halo Dunia

Ekstensi ini akan menampilkan “Hello Extensions” saat pengguna mengklik ikon toolbar ekstensi.

Ekstensi Hello
Pop-up Hello Extension

Mulailah dengan membuat direktori baru untuk menyimpan file ekstensi Anda. Jika mau, Anda dapat mendownload kode sumber dari GitHub.

Selanjutnya, buat file baru bernama manifest.json di direktori ini. File JSON ini menjelaskan kemampuan dan konfigurasi Anda. Misalnya, sebagian besar file manifes berisi kunci "action" yang mendeklarasikan gambar yang akan digunakan Chrome sebagai ikon tindakan ekstensi dan halaman HTML agar 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, dan pastikan untuk mengubah namanya agar sesuai dengan yang ada pada kunci "default_icon".

Untuk pop-up, buat file bernama hello.html, dan tambahkan kode berikut:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Ekstensi kini menampilkan pop-up saat ikon tindakan ekstensi (ikon toolbar) diklik. Anda dapat menguji di Chrome dengan memuatnya secara lokal. Pastikan semua file tersimpan.

Memuat ekstensi yang belum dibuka

Untuk memuat ekstensi yang belum dibuka dalam mode developer:

  1. Buka halaman Ekstensi dengan memasukkan chrome://extensions di tab baru. (Menurut desainnya, chrome:// URL 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.
  2. Aktifkan Mode Developer dengan mengklik tombol di samping Mode developer.
  3. Klik tombol Load unpacked, lalu pilih direktori ekstensi.
    Halaman ekstensi
    Halaman ekstensi (chrome://extensions)

Akhirnya! Ekstensi berhasil diinstal. Jika tidak ada ikon ekstensi yang disertakan dalam manifes, ikon generik akan dibuat untuk ekstensi.

Sematkan ekstensi

Secara default, saat Anda memuat ekstensi secara lokal, ekstensi akan muncul di menu ekstensi (Teka-teki). Sematkan ekstensi Anda ke toolbar untuk mengakses ekstensi dengan cepat selama pengembangan.

Menyematkan ekstensi
Menyematkan ekstensi

Klik ikon tindakan ekstensi (ikon toolbar); Anda akan melihat pop-up.

ekstensi hello world
Ekstensi Hello World

Muat ulang ekstensi

Kembali ke kode dan ubah nama ekstensi menjadi "Hello Extensions of the world!" dalam 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. Mulai ke halaman Ekstensi dan klik ikon muat ulang di samping tombol aktif/nonaktif:

Memuat ulang ekstensi

Waktu memuat ulang ekstensi

Tabel berikut menunjukkan komponen 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 kasus ini, akan menemukan log untuk pop-up tersebut. 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 dalam konsol:

  1. Buka pop-up.
  2. Klik kanan pop-up tersebut.
  3. Pilih Periksa.
    Memeriksa pop-up.
    Memeriksa pop-up.
  4. Di DevTools, buka panel Console.
    Panel Kode DevTools
    Memeriksa pop-up

Log error

Sekarang mari kita urai ekstensi. 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.

Halaman ekstensi dengan tombol error

Klik tombol Error untuk mempelajari error lebih lanjut:

Detail error ekstensi

Untuk mempelajari lebih lanjut cara men-debug pekerja layanan, halaman opsi, dan skrip konten, lihat Proses debug ekstensi.

Membuat struktur project ekstensi

Ada banyak cara untuk menyusun project ekstensi; akan tetapi, satu-satunya prasyarat adalah file manifest.json di direktori utama ekstensi seperti pada contoh berikut:

Konten folder ekstensi: manifest.json, background.js, folder skrip, folder pop-up, dan folder gambar.

Menggunakan TypeScript

Jika mengembangkan aplikasi menggunakan editor kode seperti VSCode atau Atom, Anda dapat menggunakan npm paket chrome-types untuk memanfaatkan penyelesaian otomatis bagi solusi Chrome API. Paket npm ini diperbarui secara otomatis saat kode sumber Chromium perubahan.

🚀 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.