🔧 Web Extension Examples

Kumpulan contoh-contoh Web Extension yang praktis dan mudah dipahami untuk pembelajaran dan referensi pengembangan browser extension.

---

--- ## 📋 Daftar Isi

• Tentang Repository
• Struktur Folder
• Contoh Extension
• Cara Instalasi
• Pengembangan
• Kompatibilitas Browser
• Kontribusi
• Lisensi

🎯 Tentang Repository

Repository ini berisi kumpulan contoh-contoh Web Extension yang dirancang untuk:

• Pembelajaran: Memahami konsep dasar pengembangan browser extension
• Referensi: Template dan pola yang dapat digunakan dalam proyek nyata
• Cross-browser: Contoh yang kompatibel dengan Chrome, Firefox, dan Edge
• Best Practices: Implementasi yang mengikuti standar dan praktik terbaik

📁 Struktur Folder

web-extension-examples/
├── examples/                     # Contoh-contoh extension
│   ├── notify-link-clicks-i18n/  # Extension dengan notifikasi dan i18n
│   ├── simple-popup/             # Extension dengan popup sederhana
│   ├── content-script-demo/      # Demo content script
│   ├── background-script-demo/   # Demo background script
│   └── options-page-demo/        # Demo halaman pengaturan
├── docs/                         # Dokumentasi tambahan
├── assets/                       # Asset gambar dan ikon
└── README.md                     # Dokumentasi utama

🚀 Contoh Extension

1. Notify Link Clicks i18n

Lokasi: examples/notify-link-clicks-i18n/

Extension yang menampilkan notifikasi ketika user mengklik link, dengan dukungan internasionalisasi (i18n).

Fitur:

• ✅ Content script untuk mendeteksi klik link
• ✅ Background script untuk notifikasi
• ✅ Dukungan multi-bahasa (i18n)
• ✅ Manifest V3

2. Simple Popup

Lokasi: examples/simple-popup/

Extension dengan popup interface sederhana untuk interaksi user.

Fitur:

• ✅ Browser action dengan popup
• ✅ Storage API untuk menyimpan preferensi
• ✅ Modern UI dengan HTML/CSS/JS

3. Content Script Demo

Lokasi: examples/content-script-demo/

Demonstrasi penggunaan content script untuk memodifikasi halaman web.

Fitur:

• ✅ Injeksi script ke halaman web
• ✅ Komunikasi dengan background script
• ✅ DOM manipulation

4. Background Script Demo

Lokasi: examples/background-script-demo/

Extension yang berjalan di background dengan service worker.

Fitur:

• ✅ Service worker (Manifest V3)
• ✅ Event handling
• ✅ Browser API integration

5. Options Page Demo

Lokasi: examples/options-page-demo/

Extension dengan halaman pengaturan yang dapat dikustomisasi user.

Fitur:

• ✅ Options page UI
• ✅ Settings storage
• ✅ Form validation

🛠️ Cara Instalasi

Prerequisites

• Browser modern (Chrome 88+, Firefox 89+, Edge 88+)
• Akses ke Developer Mode di browser

Langkah Instalasi

1. Clone repository:

   git clone https://github.com/kongali1720/web-extension-examples.git
   cd web-extension-examples

2. Pilih contoh extension yang ingin dicoba:

   cd examples/notify-link-clicks-i18n

3. Load extension ke browser:

   Chrome/Edge:

   • Buka chrome://extensions/ atau edge://extensions/
   • Aktifkan "Developer mode"
   • Klik "Load unpacked"
   • Pilih folder extension yang diinginkan

   Firefox:

   • Buka about:debugging
   • Klik "This Firefox"
   • Klik "Load Temporary Add-on"
   • Pilih file manifest.json dari folder extension

💻 Pengembangan

Setup Development Environment

1. Install dependencies (jika diperlukan):

   npm install
   # atau
   bun install

2. Development dengan hot reload:

   npm run dev
   # atau
   bun run dev

3. Build untuk production:

   npm run build
   # atau
   bun run build

Struktur Manifest V3

Semua contoh menggunakan Manifest V3 yang merupakan standar terbaru:

{
  "manifest_version": 3,
  "name": "Extension Name",
  "version": "1.0.0",
  "description": "Extension description",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

🌐 Kompatibilitas Browser

Fitur	Chrome	Firefox	Edge	Safari
Manifest V3	✅	✅	✅	✅
Service Worker	✅	✅	✅	✅
Content Scripts	✅	✅	✅	✅
Storage API	✅	✅	✅	✅
i18n API	✅	✅	✅	✅

🤝 Kontribusi

Kontribusi sangat diterima! Silakan ikuti langkah berikut:

1. Fork repository ini
2. Buat branch fitur baru (git checkout -b feature/amazing-feature)
3. Commit perubahan (git commit -m 'Add some amazing feature')
4. Push ke branch (git push origin feature/amazing-feature)
5. Buat Pull Request

Guidelines Kontribusi

• Pastikan kode mengikuti standar Manifest V3
• Tambahkan dokumentasi untuk fitur baru
• Test di minimal 2 browser berbeda
• Ikuti struktur folder yang konsisten

📚 Resource Tambahan

• MDN Web Extensions Documentation
• Chrome Extensions Developer Guide
• Firefox Add-ons Documentation

📄 Lisensi

Proyek ini dilisensikan di bawah MIT License - lihat file LICENSE untuk detail.

👤 Author

Kongali1720

• GitHub: @kongali1720

---

⭐ Jika repository ini membantu, jangan lupa berikan star!

☕ Dukung aku agar tetap waras menulis script tengah malam...

👉 Buy Me a Coffee via PayPal 👈
Support with 💸 so I can buy ☕ and keep being 🔥!

---

📫 Let’s Connect Like Hackers

• 🧙 GitHub: kongali1720
• 💌 Email: kongali1720@gmail.com
• 🕵️‍♂️ Site: Coming soon — stay curious...

---

💻 INITIATING HUMANITY MODE...

🎯 Target Locked: Anak-anak Pejuang Down Syndrome
🩺 Status: Butuh Dukungan
❤️ Response: Buka Hati + Klik Link = Satu Senyum Baru

🧬 Mereka bukan berbeda — mereka dilahirkan untuk mengajarkan dunia tentang cinta yang murni dan kesabaran yang luar biasa.

👣 Setiap langkah kecil mereka = Keajaiban besar.

⚡ Bantu mereka melangkah lebih jauh, dengan caramu sendiri.

"Karena jadi hacker hati bukan cuma soal kode... tapi juga soal peduli." 🖤

"Ngoding boleh sambil senyum, asal jangan inject SQL sambil ngambek!" 😜

---