JadiHebat
Computer Science

Membangun Ekstensi Browser untuk Merapikan Tab dan Menyimpan Sesi dengan JavaScript

Bangun ekstensi browser berbasis JavaScript untuk mengelompokkan tab, menutup duplikat, dan menyimpan sesi kerja secara lokal.

Diperbarui 28 Agu 2026id5 bagian · 20 pelajaran4 jam 30 menit
Belum ada ulasan
Level Beginner
Kategori Computer Science
Perkiraan Durasi 4 jam 30 menit

Skill yang dibangun

Apa yang akan Anda pelajari

Membuat dan memuat ekstensi Manifest V3 dengan struktur file yang tepat, lalu memeriksa error melalui halaman Extensions dan DevTools.

Mengambil, menampilkan, mengelompokkan, dan menutup tab menggunakan API browser dengan permission yang sesuai.

Menghubungkan popup, service worker, dan komponen ekstensi melalui message passing tanpa mengandalkan state global yang tidak tersedia lintas konteks.

Menyimpan, membaca, memperbarui, dan menghapus sesi tab menggunakan penyimpanan lokal, termasuk menangani data kosong, URL terbatas, dan perubahan state.

Siapa Target Audiens Kursus Ini

Pemula yang telah memahami dasar HTML, CSS, dan JavaScript seperti variabel, fungsi, array, event, serta manipulasi DOM. Kursus ini ditujukan bagi peserta yang ingin beralih dari latihan halaman web sederhana ke pembuatan alat produktivitas nyata di browser, tetapi belum memahami manifest ekstensi, permission, komunikasi antarkomponen, dan penyimpanan data lokal.

Project outcomes

Apa yang Akan Anda Buat

Peserta membangun ekstensi browser Manifest V3 dengan antarmuka popup untuk melihat tab yang sedang terbuka, mengelompokkan tab berdasarkan domain, mendeteksi serta menutup tab duplikat, lalu menyimpan daftar sesi agar dapat dipulihkan kemudian. Proyek mencakup validasi input, penanganan kegagalan permission atau URL khusus browser, dan pengujian melalui beberapa skenario tab yang berbeda.

Konten Kursus

Dari Halaman Web ke Ekstensi Browser

4 pelajaran | 125 menit
Mengapa Ekstensi Membutuhkan Arsitektur Berbeda
25 menit
Manifest V3 sebagai Kontrak Ekstensi
35 menit
Popup, Service Worker, dan Halaman Aktif
35 menit
Memuat Ekstensi dan Membaca Kegagalan Awal
30 menit

Mengendalikan Tab dengan API Browser

4 pelajaran | 160 menit
Permission, Privilege, dan Batas Akses
35 menit
Membaca Tab Aktif dan Daftar Tab
40 menit
Aturan Pengelompokan untuk Tab yang Berantakan
40 menit
Menutup Duplikat Tanpa Merusak Pekerjaan
45 menit

Komunikasi Komponen dan Antarmuka Popup

4 pelajaran | 165 menit
Pesan sebagai Batas Antar-Konteks
40 menit
Membuat Popup yang Menampilkan State
45 menit
Asynchronous API, Callback, dan Race Condition
45 menit
Validasi Alur Rapikan Tab
35 menit

Persistensi Sesi dan Pemulihan Data

4 pelajaran | 170 menit
State Sementara versus Data yang Bertahan
35 menit
Menyimpan Sesi dengan browser.storage.local
45 menit
Daftar Sesi, Skema Data, dan Validasi
45 menit
Memulihkan Sesi Tanpa Menggandakan Kekacauan
45 menit

Proyek Akhir: Membangun TabSaku

4 pelajaran | 300 menit
Perancangan & Setup TabSaku
60 menit
Implementasi Fitur Inti Rapikan dan Simpan
75 menit
Integrasi Pemulihan Sesi dan Penyempurnaan UI
75 menit
Pengujian, Debugging, dan Distribusi Ekstensi
90 menit

Deskripsi Kursus

Tab yang terlalu banyak membuat konteks kerja sulit dipertahankan: informasi tersebar, tab duplikat menumpuk, dan sesi riset mudah hilang ketika browser ditutup. Kursus ini mengajak kita menyelesaikan masalah tersebut melalui ekstensi browser sederhana berbasis JavaScript, bukan sekadar halaman web yang berjalan di satu tab.

Peserta mempelajari peran manifest ekstensi Manifest V3, permission, popup, service worker, serta content script. Setiap komponen ditempatkan berdasarkan batas aksesnya, kemudian dihubungkan dengan message passing dan state yang dapat diamati. Kita juga membahas alasan di balik pemilihan API, batasan akses pada halaman tertentu, serta cara membaca error ketika ekstensi tidak dapat memuat, mengakses tab, atau menyimpan data.

Di akhir kursus, peserta menghasilkan alat produktivitas yang dapat menampilkan tab terbuka, menutup tab duplikat dengan aturan yang jelas, mengelompokkan tab, dan menyimpan sesi ke penyimpanan lokal browser. Validasi dilakukan melalui skenario penggunaan dan pemeriksaan perilaku, sehingga hasilnya tidak berhenti pada kode yang sekadar berhasil dipasang.

Rating & Ulasan

0 ratings

Kursus Terkait