Cara Membuat Extension Browser Sederhana (Chrome/Firefox) untuk Tugas Kuliah 2025

Panduan lengkap membuat extension browser sederhana Chrome/Firefox untuk tugas kuliah 2025. Bahas manifest.json, popup, background script Dll.

(Ilustrasi 3D realistis pengembang membuat extension browser Chrome dan Firefox di laptop untuk tugas kuliah 2025)

PortalJatim24.com - Pendidikan - Di era digital 2025, keterampilan mengembangkan menjadi nilai tambah besar bagi mahasiswa informatika, sistem informasi, maupun bidang teknologi lainnya. Extension bukan hanya alat bantu pengguna, tetapi juga media belajar untuk memahami , , dan interaksi web lintas tab.

Menurut Addy Osmani (Google Chrome Engineering Lead):

“Membangun browser extension adalah latihan praktis terbaik untuk memahami bagaimana aplikasi front-end dapat berintegrasi langsung dengan lingkungan browser pengguna.”

Browser extension telah digunakan untuk berbagai tujuan, mulai dari meningkatkan produktivitas, memperkuat keamanan, hingga mendukung penelitian akademik. Melalui tugas kuliah, mahasiswa dapat mempelajari logika pemrograman dan konsep API dengan konteks nyata.

Baca Artikel Lainnya: Memahami Git & GitHub untuk Pemula: Workflow Branch, Merge, dan Pull Request. Lengkap (2025)

✅Sejarah Singkat dan Konsep Dasar Browser Extension

Browser extension pertama kali populer pada awal 2000-an melalui Mozilla Firefox. Google kemudian memperkenalkan Chrome Extension API pada tahun 2009 yang membuat pembuatan ekstensi menjadi lebih mudah dan terstandarisasi. Kini, hampir semua browser besar termasuk Edge dan Opera mengadopsi sistem yang sama melalui WebExtension API.

✔Apa Itu WebExtension API?

WebExtension API adalah kumpulan standar JavaScript API yang memungkinkan developer membuat ekstensi lintas browser (Chrome, Firefox, Edge, Opera).

Artinya, satu kode dapat digunakan di berbagai browser hanya dengan sedikit penyesuaian pada file manifest.

✅Mengapa Tugas Kuliah Membuat Extension Itu Penting

Membuat extension browser adalah proyek kolaboratif yang menggabungkan teori dan praktik pemrograman.

✔Melatih Pemikiran Logis dan Modular

Setiap ekstensi terdiri dari beberapa modul terpisah (HTML, CSS, JS, dan manifest.json). Hal ini melatih mahasiswa berpikir sistematis.

✔Menerapkan Konsep API dan Event

Browser extension memanfaatkan API seperti:

-chrome.tabs untuk berinteraksi dengan tab aktif,

-chrome.storage untuk menyimpan data lokal,

-chrome.runtime untuk komunikasi antar komponen.

✔Pengalaman Nyata ala Dunia Industri

Menurut Kent C. Dodds (instruktur EpicReact.dev):

“Proyek seperti extension browser adalah jembatan antara teori kampus dan praktik industri. Ia memaksa mahasiswa berpikir seperti pengembang profesional.”

✅Struktur Dasar Extension Browser

Struktur file dasar untuk ekstensi browser sederhana biasanya terdiri atas:

manifest.json → metadata dan izin ekstensi

background.js → menangani event utama di belakang layar

popup.html → tampilan antarmuka pengguna

popup.js → logika untuk interaksi UI

icons/ → berisi ikon ekstensi

Struktur folder sederhana:

my-extension/

│

├── manifest.json

├── popup.html

├── popup.js

├── background.js

└── icons/

✅Membuat Extension Chrome Sederhana

Mari kita buat ekstensi Chrome sederhana untuk tugas kuliah yang menampilkan pesan sambutan saat tombol diklik.

✔Langkah 1 - Buat Folder Proyek

Buat folder bernama my-first-extension.

✔Langkah 2 - Tambahkan File Manifest

Buat file manifest.json berikut di dalam folder:

{

"manifest_version": 3,

"name": "My First Extension",

"version": "1.0",

"description": "Extension sederhana untuk tugas kuliah",

"action": {

"default_popup": "popup.html",

"default_icon": "icons/icon.png"

"permissions": ["storage", "tabs"]

}

Penjelasan:

manifest_version: wajib 3 untuk Chrome terbaru.

permissions: menentukan hak akses seperti storage dan tabs.

action: mendefinisikan tampilan popup default.

✔Langkah 3 - Buat Tampilan Popup

File popup.html:

<!DOCTYPE html>

<html>

<head><title>My Extension</title></head>

<body>

<h3>Halo Dunia!</h3>

<button id="klik">Klik Saya</button>

<script src="popup.js"></script>

</body>

</html>

✔Langkah 4 - Tambahkan Logika JavaScript

File popup.js:

document.getElementById("klik").addEventListener("click", () => {

alert("Extension Anda Berhasil Berjalan!");

});

✔Langkah 5 - Uji di Chrome

-Buka chrome://extensions/

-Aktifkan Developer Mode

-Klik Load unpacked

-Pilih folder my-first-extension/

Jika berhasil, ikon ekstensi akan muncul di toolbar Chrome.

✅Membuat Versi Firefox (WebExtension)

Untuk Firefox, struktur file hampir sama, hanya ada sedikit perubahan pada manifest.

{

"manifest_version": 2,

"name": "My Firefox Extension",

"version": "1.0",

"description": "Contoh extension untuk Firefox",

"browser_action": {

"default_popup": "popup.html"

"permissions": ["tabs"]

}

Langkah uji:

-Buka about:debugging

-Klik “This Firefox”

-Pilih Load Temporary Add-on

-Pilih manifest.json

-Firefox akan langsung menampilkan popup di toolbar.

✅Implementasi Nyata - Extension Penghitung Klik

Tujuan

Membuat extension sederhana yang menghitung jumlah klik tombol di popup.

Implementasi

popup.js:

let count = 0;

const button = document.getElementById("klik");

button.addEventListener("click", () => {

count++;

button.innerText = `Diklik ${count} kali`;

chrome.storage.local.set({clicks: count});

});

Penjelasan

chrome.storage.local digunakan untuk menyimpan data klik meskipun browser ditutup.

Variabel count menampilkan jumlah klik terkini.

Menurut Remy Sharp (MDN):

“Storage API memberi pengembang kemampuan untuk mempertahankan status tanpa database eksternal.”

✅API Modern dan Keamanan Manifest V3

Mulai 2025, Manifest V3 menjadi standar resmi untuk semua extension Chrome.

Perubahan utama:

-Penggunaan Service Worker menggantikan background scripts.

-Akses jaringan lebih terbatas (untuk keamanan).

-Event berbasis deklaratif (declarativeNetRequest) menggantikan listener dinamis.

Tips:

Gunakan perintah chrome.runtime.onInstalled di service worker untuk memantau status instalasi extension.

chrome.runtime.onInstalled.addListener(() => {

console.log("Extension terpasang dengan sukses!");

});

Menurut Chris Heilmann (Mozilla):

“Manifest V3 membawa keamanan yang lebih baik dan kontrol sumber daya lebih efisien bagi pengguna.”

✅Debugging dan Pengujian Extension

✔Debugging di Chrome

-Gunakan Developer Tools (Ctrl + Shift + I) di popup.

-Periksa error di tab Console.

-Gunakan console.log() untuk melihat alur eksekusi.

✔Debugging di Firefox

-Buka about:debugging → “Inspect” pada extension.

-Gunakan tab “Console” untuk melihat output JavaScript.

✔Tips Umum

-Pastikan semua file terhubung dengan benar di manifest.

-Cek syntax JSON menggunakan validator online.

-Simpan ikon minimal 128x128 piksel agar lolos publikasi.

✅Cara Publish ke Chrome Web Store dan Firefox Add-ons

✔Publish ke Chrome Web Store

-Buat akun Developer Google.

-Kompres folder proyek ke .zip.

-Upload ke Chrome Web Store Developer Dashboard

-Isi deskripsi, kategori, dan screenshot

-Tunggu proses review (1-3 hari).

✔Publish ke Firefox Add-ons (AMO)

-Daftar di addons.mozilla.org

-Upload file .zip berisi ekstensi.

-Ikuti proses validasi otomatis.

-Setelah lolos, ekstensi akan tersedia publik.

Menurut Mozilla Add-on Team (2024):

“Ekstensi edukatif dari mahasiswa adalah salah satu kategori yang paling sering diterima karena fokusnya pada pembelajaran dan inovasi.”

✅Kesalahan Umum Saat Membuat Extension

-Manifest tidak valid atau versi salah.

-File popup tidak ditemukan (path salah).

-Tidak menambahkan ikon default.

-Menggunakan API lama (Manifest v2).

-Tidak menambahkan izin (permissions) yang dibutuhkan.

Solusinya: gunakan linting tools seperti web-ext atau chrome-extension-linter.

✅Tips Profesional dan Best Practice

-Gunakan Git & GitHub untuk version control proyek kuliah.

-Tambahkan komentar pada setiap fungsi.

-Pisahkan logic dan UI agar mudah dikembangkan.

-Gunakan Manifest v3 sejak awal agar kompatibel jangka panjang

-Coba lintas browser untuk memastikan kompatibilitas.

Menurut Addy Osmani:

“Struktur kode yang modular dan terdokumentasi akan mempercepat kolaborasi dan pemeliharaan jangka panjang.”

Kesimpulan

Membuat extension browser sederhana untuk Chrome dan Firefox adalah langkah awal yang sangat efektif untuk memahami pemrograman web modern.

Proyek ini melatih mahasiswa berpikir logis, bekerja modular, dan memahami integrasi API.

Dengan memahami struktur dasar, debugging, dan praktik publikasi, mahasiswa dapat menghasilkan karya nyata yang bisa dimasukkan ke portofolio profesional.

Publisher/Penulis:

[Tim Redaksi portaljatim24.com (AZAA/KK)]