Ekstensi Hello World (Halo Dunia)

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.

Ekstensi Hello
Pop-up Ekstensi Halo

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:

  1. Buka halaman Ekstensi dengan memasukkan chrome://extensions di tab baru. (Menurut desain, URL chrome:// 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 tersebut.

Menyematkan ekstensi

Secara default, saat Anda memuat ekstensi secara lokal, ekstensi tersebut 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 halo dunia
Ekstensi Hello World

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:

Memuat ulang ekstensi

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:

  1. Buka pop-up.
  2. Klik kanan pop-up.
  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 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.

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 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:

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

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.