Beranda / CSS / Html / Javascript

Cara Membuat Ekstensi Chrome: Panduan Lengkap untuk Pemula

Posting Komentar

Panduan lengkap dan mudah dipahami untuk membuat ekstensi Chrome pertama anda, lengkap dengan contoh, struktur file, dan tips praktis.

Ekstensi Chrome adalah program kecil berbasis web (HTML, CSS, dan JavaScript) yang bisa memperluas fungsionalitas browser Google Chrome. Ekstensi bisa melakukan banyak hal, seperti:

  • Memodifikasi tampilan halaman

  • Mengambil dan menyimpan data dari web

  • Memberikan shortcut atau tombol cepat

  • Menghubungkan API eksternal

  • Dan masih banyak lagi

Alat yang Dibutuhkan

Untuk membuat ekstensi Chrome, anda cukup punya:

  • Teks editor (misalnya: VS Code, Sublime Text, Notepad++)

  • Google Chrome

  • Sedikit pengetahuan HTML, CSS, dan JavaScript

  • Semangat belajar!

Struktur Dasar File Ekstensi

Setiap ekstensi Chrome wajib memiliki file utama yang disebut manifest.json. Berikut adalah struktur folder dasar:

my-extension/
├── manifest.json
├── popup.html
├── popup.js
├── style.css

Penjelasan:

  • manifest.json → otak dari ekstensi, berisi informasi konfigurasi

  • popup.html → tampilan popup saat ikon diklik

  • popup.js → logika JavaScript di balik popup

  • style.css → mempercantik tampilan popupContoh Ekstensi Sederhana

Mari kita buat ekstensi yang menampilkan waktu saat ini di popup.

1. Buat Folder Baru

Buat folder bernama waktu-sekarang.

2. Buat File manifest.json

{
  "manifest_version": 3,
  "name": "Waktu Sekarang",
  "version": "1.0",
  "description": "Menampilkan waktu saat ini",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "128": "icon.png"
  }
}

Catatan: manifest_version 3 adalah versi terbaru yang didukung oleh Chrome.

3. Buat File popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Waktu Sekarang</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="time">--:--:--</h1>
  <script src="popup.js"></script>
</body>
</html>

4. Buat File popup.js

function updateTime() {
  const now = new Date();
  document.getElementById("time").textContent = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
updateTime();

5. Buat File style.css

body {
  width: 200px;
  height: 100px;
  font-family: sans-serif;
  text-align: center;
  padding-top: 30px;
}

6. Tambahkan Ikon (Optional)

Tambahkan file gambar icon.png berukuran 128x128 pixel ke folder anda. Jika tidak ada, bisa dihapus dari manifest.json.

Cara Memasang Ekstensi di Chrome

  1. Buka Chrome dan ketik chrome://extensions di address bar.

  2. Aktifkan Developer Mode (pojok kanan atas).

  3. Klik Load unpacked dan pilih folder waktu-sekarang.

  4. Ekstensi akan langsung muncul dan bisa dicoba.

Tips Lanjutan

Setelah anda sukses membuat ekstensi dasar, berikut beberapa fitur lanjutan yang bisa anda eksplor:

  • Permissions: Untuk mengambil data dari tab atau halaman tertentu

  • Background scripts: Menjalankan kode tanpa popup

  • Content scripts: Menyisipkan kode ke dalam halaman web

  • Storage API: Menyimpan data pengguna secara lokal

  • Message Passing: Komunikasi antar bagian ekstensi (popup ↔ background ↔ content)

Contoh Ekstensi Lain

  1. NotePad Sederhana – Ekstensi untuk menyimpan catatan

  2. Auto Kliker – Klik otomatis pada elemen tertentu

  3. Dark Mode Injector – Ubah tampilan halaman jadi gelap

  4. Translator Otomatis – Deteksi dan terjemahkan teks langsung di halaman

Cara Upload ke Chrome Web Store

Jika anda ingin membagikan ekstensi anda ke banyak orang, berikut langkah-langkahnya:

  1. Zip seluruh folder ekstensi anda (tanpa ekstensi .zip di dalam folder lagi).

  2. Buat akun developer di https://chromewebstore.google.com/ (biaya satu kali USD $5).

  3. Upload file zip dan isi detail deskripsi, ikon, dan screenshot.

  4. Submit dan tunggu review dari Google (1–3 hari kerja).Penutup

Membuat ekstensi Chrome ternyata tidak sesulit yang dibayangkan, bukan? Dengan sedikit logika HTML, CSS, dan JavaScript, anda sudah bisa membangun alat kecil namun sangat bermanfaat di browser anda sendiri.

Langkah awal memang sederhana, tapi potensi dari sebuah ekstensi sangat luas. Anda bisa membuat produk, menyalurkan ide, bahkan mendapatkan penghasilan dari Chrome Web Store.

Jika anda ingin versi tutorial ini dalam bentuk video atau ekstensi dengan fitur tertentu (seperti drag logo, upload gambar, atau integrasi API), saya juga bisa bantu. Cukup beri tahu ide anda di kolom komentar atau lewat email.

Posting Komentar untuk "Cara Membuat Ekstensi Chrome: Panduan Lengkap untuk Pemula"

Posting Komentar