Kata Pengantar

Ada satu perkakas ajaib yang mungkin sudah terpasang di komputermu sekarang, tapi jarang kamu sadari kekuatannya: browser. Setiap hari kita membuka puluhan situs — email, marketplace, dashboard kerja, media sosial, spreadsheet daring — dan mengerjakan hal yang itu-itu saja: menyalin, menempel, mengklik, menunggu, mengulang. Bayangkan jika ada asisten kecil yang tinggal di dalam browser, mengenal setiap halaman yang kamu buka, dan bisa disuruh mengerjakan pekerjaan membosankan itu untukmu. Asisten itu bernama Chrome Extension.

Buku ini lahir dari sebuah keyakinan sederhana: kamu tidak perlu menjadi insinyur di perusahaan raksasa untuk membuat perangkat lunak yang berguna. Kamu tidak perlu menyewa server, tidak perlu menguasai kerangka kerja (framework) yang rumit, tidak perlu membangun website dari nol. Dengan Chrome Extension, kamu bisa menambah fungsi ke website apa pun — bahkan website yang bukan milikmu — dan mengotomasi tugas yang menyita waktu. Sebuah extension bisa menjadi crawler yang memanen data, robot yang mengisi formulir, atau alat mungil yang menyelesaikan satu masalah spesifik dengan sangat baik.

Yang membuat cerita ini makin menarik: karya seperti itu bisa dijual. Dengan biaya pendaftaran developer sekali bayar sekitar lima dolar Amerika, siapa pun bisa menaruh extension buatannya di Chrome Web Store, tempat yang setiap hari dikunjungi jutaan orang mencari solusi. Banyak bisnis kecil satu orang bermula dari sebuah extension sederhana yang menyelesaikan keluhan sehari-hari.

Saya menulis buku ini agar ramah untuk semua orang — bukan hanya programmer. Jika kamu seorang admin yang lelah menyalin data, seorang pemasar yang ingin memanen prospek, seorang guru yang ingin merapikan nilai, atau sekadar orang penasaran yang suka mengulik — kamu berada di tempat yang tepat. Konsep dijelaskan dengan bahasa sehari-hari lebih dulu, baru kemudian kode yang bisa langsung kamu salin dan coba. Kamu boleh membaca sambil praktik, atau membaca dulu sampai paham gambaran besarnya.

Alat sederhana yang dipakai mengalahkan alat canggih yang teronggok. Mulailah dari masalah yang benar-benar mengganggumu.

— Prinsip perekayasa pragmatis

Selamat datang di bengkel otomasi yang selama ini sudah ada di ujung jarimu. Mari kita nyalakan.

Cara Membaca Buku Ini

Buku ini disusun agar bisa dibaca dua cara: berurutan seperti kursus, atau dilompati sesuai kebutuhan seperti manual. Berikut peta ringkasnya.

• Bab 1–4 membangun pemahaman: apa itu extension, bagaimana bagian-bagiannya bekerja, dan mengapa ia sanggup menggantikan banyak proyek website/framework.
• Bab 5–6 masuk ke dua kemampuan bintang: crawling/scraping (memanen data) dan RPA (mengotomasi tugas berulang).
• Bab 7 adalah katalog ide: lebih dari 27 use case konkret untuk berbagai bidang, dilengkapi Penjelajah Interaktif yang bisa kamu klik.
• Bab 8 adalah bengkel praktik: membangun extension pertamamu langkah demi langkah, dengan kode siap salin.
• Bab 9 membahas uang: cara publish dan menjual karyamu.
• Bab 10–12 menutup dengan etika, integrasi AI, FAQ, glosarium, dan checklist rilis.

Apa Itu Chrome Extension

Chrome Extension adalah program kecil yang dipasang di dalam browser dan bisa mengubah cara browser serta halaman web bekerja untukmu. Ia bukan aplikasi terpisah yang punya jendela sendiri, bukan pula website yang kamu kunjungi. Ia hidup menempel pada browser — seperti alat tambahan yang dipasang pada bor listrik: mata bor berbeda untuk pekerjaan berbeda, tapi mesinnya sama.

Secara teknis, extension hanyalah sekumpulan berkas biasa: berkas HTML, CSS, JavaScript, gambar, dan satu berkas "kartu identitas" bernama manifest.json. Kamu menaruhnya dalam satu folder, memuatnya ke Chrome, dan jadilah. Tidak ada kompilasi rumit, tidak ada server yang harus dinyalakan. Itulah kenapa extension begitu ramah pemula: teknologinya sama persis dengan teknologi yang membangun halaman web biasa.

Yang membedakan extension dari halaman web biasa adalah izin istimewa (permissions) yang bisa dimintanya kepada browser. Dengan izin, ia bisa membaca dan mengubah isi halaman yang sedang kamu buka, menyimpan data secara permanen, berjalan di latar belakang, memantau tab, dan berkomunikasi dengan server luar. Kekuatan inilah yang menjadikannya lebih dari sekadar dekorasi.

Extension bukan website, bukan aplikasi biasa

Penting menaruh extension pada tempatnya yang tepat di kepala. Sebuah website hidup di server; orang harus mengunjungi alamatnya. Sebuah aplikasi desktop diinstal ke sistem operasi dan berjalan sendiri. Extension berada di antaranya: ia diinstal seperti aplikasi, tetapi berjalan di dalam browser dan bisa menempel pada website mana pun yang kamu izinkan. Karena itu ia bisa melakukan hal yang tak bisa dilakukan website biasa: memodifikasi situs orang lain di layarmu.

Manifest V3: aturan main terbaru

Sepanjang buku ini kita memakai Manifest V3 (disingkat MV3), standar terbaru yang wajib dipakai extension modern di Chrome dan browser sekerabat (Edge, Brave, Opera). MV3 menekankan keamanan dan hemat sumber daya. Perbedaan besarnya dengan versi lama: latar belakang extension kini berupa service worker yang bangun-tidur sesuai kebutuhan, bukan halaman yang menyala terus. Kita bahas tuntas di Bab 2.

Kenapa Ia Senjata Rahasia

Kalau extension "cuma" berkas HTML dan JavaScript, kenapa saya menyebutnya senjata rahasia? Karena posisinya yang unik memberi tiga kekuatan yang sulit ditandingi cara lain.

1. Menumpang di atas website orang tanpa izin membangun apa pun

Ini yang paling revolusioner. Misalkan kamu memakai sebuah aplikasi CRM di kantor yang tidak punya tombol "ekspor cepat". Untuk menambah tombol itu lewat cara normal, kamu harus jadi karyawan vendor CRM tersebut. Dengan extension, kamu cukup menulis content script yang menyuntikkan tombol ke halaman CRM saat terbuka di browsermu. Website-nya tetap milik mereka, tapi di layarmu ia punya kemampuan baru. Kamu menambah fitur ke perangkat lunak yang bukan milikmu.

2. Distribusi instan lewat toko dengan jutaan pengunjung

Membuat website berarti kamu harus memikirkan pemasaran dari nol. Chrome Web Store sudah ramai: orang datang mengetik "ekstrak email dari halaman" atau "auto isi form" dan menemukan karyamu. Toko ini adalah kanal distribusi yang jarang dimiliki proyek indie.

3. Otomasi yang berjalan di konteks pengguna

Robot browser di dalam extension bekerja seolah-olah kamu sendiri yang mengetik dan mengklik, memakai sesi login-mu. Itu berarti ia bisa mengotomasi situs yang butuh login tanpa kamu harus membocorkan kata sandi ke server pihak ketiga. Data tetap di komputermu.

Cara terbaik memprediksi masa depan adalah menciptakannya. Dan menciptakan tak selalu berarti membangun dari nol — kadang cukup menambah satu lapisan cerdas di atas yang sudah ada.

— Alan Kay, ilmuwan komputer (parafrasa)

Untuk Siapa Buku Ini

Jawaban singkat: siapa pun yang punya pekerjaan berulang di browser, atau ide alat yang belum ada. Mari perinci.

Kalau kamu sama sekali baru, jangan cemas soal istilah. Setiap kata teknis dijelaskan saat pertama muncul, dan ada glosarium lengkap di Bab 12. Bacalah santai. Kita mulai dari anatominya.

manifest.json — Kartu Identitas

Setiap extension wajib punya satu berkas bernama persis manifest.json di folder utamanya. Berkas ini adalah daftar deklarasi: memberi tahu Chrome nama extension, versinya, ikonnya, izin apa yang diminta, berkas mana yang menjadi service worker, di situs mana content script disuntik, dan seterusnya. Formatnya JSON — sekumpulan pasangan "kunci: nilai" di dalam kurung kurawal.

{
  "manifest_version": 3,
  "name": "Pemanen Data Cepat",
  "version": "1.0.0",
  "description": "Ambil tabel dari halaman jadi CSV sekali klik.",
  "icons": { "16": "ikon16.png", "48": "ikon48.png", "128": "ikon128.png" },

  // Otak latar belakang: satu berkas service worker
  "background": { "service_worker": "background.js" },

  // Wajah yang muncul saat ikon di toolbar diklik
  "action": { "default_popup": "popup.html", "default_title": "Pemanen Data" },

  // Halaman pengaturan
  "options_page": "options.html",

  // Skrip yang disuntik ke halaman yang cocok
  "content_scripts": [{
    "matches": ["https://*/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }],

  // Izin yang diminta — minta seminimal mungkin!
  "permissions": ["storage", "activeTab", "scripting"],
  "host_permissions": ["https://contoh.com/*"]
}

Perhatikan kunci demi kunci. manifest_version: 3 menandai kita memakai MV3. name, version, dan description muncul di halaman extension dan di toko. icons menyediakan ikon berbagai ukuran. Sisanya mendaftarkan para "pemain" yang akan kita bahas berikut ini. Tidak semua kunci wajib — extension paling sederhana bahkan bisa hanya punya manifest_version, name, version, dan satu content script.

Service Worker — Otak di Latar Belakang

Di MV3, "background" extension adalah sebuah service worker: berkas JavaScript yang dijalankan browser saat dibutuhkan lalu ditidurkan saat menganggur untuk menghemat memori. Ia tidak punya tampilan. Tugasnya: mengoordinasi, mendengarkan peristiwa (klik ikon, alarm terjadwal, pesan masuk), memanggil API luar, dan menyimpan/mengambil data.

Karena bisa tertidur kapan saja, service worker tidak boleh mengandalkan variabel yang disimpan di memori untuk jangka panjang. Kalau butuh mengingat sesuatu, simpan ke chrome.storage. Anggap ia karyawan pelupa yang rajin: begitu selesai satu tugas ia "lupa" segalanya, jadi catat semua hal penting.

// Dijalankan sekali saat extension dipasang / diperbarui
chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension siap bekerja.");
  chrome.storage.local.set({ jumlahJalan: 0 });
});

// Mendengar pesan dari content script atau popup
chrome.runtime.onMessage.addListener((pesan, pengirim, balas) => {
  if (pesan.tipe === "halo") {
    balas({ jawab: "Halo juga dari worker!" });
  }
  return true; // wajib jika membalas secara async
});

Content Script — Tangan di Dalam Halaman

Inilah pemain paling "sakti" untuk urusan crawling dan RPA. Content script adalah JavaScript yang disuntikkan ke dalam halaman web yang cocok dengan pola matches di manifest. Begitu disuntik, ia bisa membaca dan mengubah DOM — struktur elemen halaman — persis seperti skrip milik situs itu sendiri. Ia bisa menemukan tombol, mengklik, membaca teks, mengisi kotak, menambah elemen baru.

Yang perlu dipahami: content script hidup di "dunia" halaman, tapi terisolasi sebagian. Ia berbagi DOM dengan halaman, tetapi variabel JavaScript-nya terpisah dari variabel situs (ini demi keamanan). Untuk berbicara dengan service worker, ia memakai message passing.

// Membaca semua judul (h1..h3) di halaman
const judul = [...document.querySelectorAll("h1, h2, h3")]
  .map(el => el.textContent.trim());

// Menambah tombol baru ke pojok halaman
const tombol = document.createElement("button");
tombol.textContent = "⚡ Panen";
tombol.style.cssText = "position:fixed;bottom:20px;right:20px;z-index:99999;padding:10px 16px;";
tombol.addEventListener("click", () => {
  chrome.runtime.sendMessage({ tipe: "panen", data: judul });
});
document.body.appendChild(tombol);

Popup & Options — Wajah dan Pengaturan

Popup adalah jendela kecil yang muncul saat kamu mengklik ikon extension di toolbar. Ia sebenarnya halaman HTML mungil (popup.html) dengan CSS dan JavaScript sendiri. Di sinilah kamu menaruh tombol-tombol perintah: "Jalankan", "Ekspor", "Berhenti". Popup menutup begitu kamu klik di luarnya, jadi jangan simpan proses panjang di sini — serahkan ke service worker.

Options page (options.html) adalah halaman pengaturan yang lebih lapang, dibuka lewat menu extension. Cocok untuk menaruh kunci API, preferensi, atau daftar aturan. Keduanya halaman HTML biasa — kalau kamu pernah membuat satu halaman web, kamu sudah bisa membuatnya.

<!doctype html>
<html><head><meta charset="utf-8">
<style> body{width:240px;font-family:sans-serif;padding:12px} button{width:100%;padding:10px} </style>
</head><body>
  <h3>Pemanen Data</h3>
  <button id="jalan">⚡ Panen Halaman Ini</button>
  <p id="status"></p>
  <script src="popup.js"></script>
</body></html>

Permissions & Storage — Izin dan Ingatan

Permissions: minta seperlunya

Izin adalah daftar kemampuan yang diminta extension. Beberapa yang sering dipakai:

Aturan emasnya: semakin sedikit izin, semakin cepat disetujui pengguna dan peninjau toko, dan semakin aman. Extension yang meminta akses ke "semua situs" tanpa alasan jelas akan dicurigai.

Storage: ingatan yang bertahan

chrome.storage adalah kotak penyimpanan permanen extension. Ada dua laci: local (di komputer ini saja, kapasitas besar) dan sync (ikut tersinkron ke akun Google pengguna, kapasitas kecil). Data disimpan sebagai pasangan kunci-nilai dan bertahan meski browser ditutup.

// Menyimpan
await chrome.storage.local.set({ apiKey: "rahasia-123", mode: "cepat" });

// Mengambil
const { apiKey, mode } = await chrome.storage.local.get(["apiKey", "mode"]);

// Mendengar perubahan
chrome.storage.onChanged.addListener((perubahan) => {
  console.log("Ada yang berubah:", perubahan);
});

Message Passing — Cara Para Pemain Bicara

Para pemain extension hidup di dunia terpisah: content script di dalam halaman, service worker di latar, popup di jendelanya. Mereka tidak bisa memanggil fungsi satu sama lain langsung. Jembatannya adalah message passing — saling berkirim pesan.

Polanya sederhana: satu pihak memanggil sendMessage dengan sebuah objek pesan, pihak lain mendengarkan lewat onMessage dan boleh membalas. Anggap ini seperti berkirim memo antar-ruangan.

const jawaban = await chrome.runtime.sendMessage({
  tipe: "hitungKata",
  teks: document.body.innerText
});
console.log("Jumlah kata:", jawaban.jumlah);

chrome.runtime.onMessage.addListener((msg, sender, balas) => {
  if (msg.tipe === "hitungKata") {
    const jumlah = msg.teks.split(/\s+/).length;
    balas({ jumlah });
  }
  return true;
});

Dengan enam pemain ini — manifest, service worker, content script, popup, options, storage — plus message passing sebagai jembatannya, kamu sudah memegang seluruh kosakata untuk membangun apa pun di bab-bab berikutnya. Sisanya adalah soal menyusun mereka secara kreatif.

Kesederhanaan adalah kecanggihan tingkat tinggi. Extension yang baik melakukan sedikit hal, tetapi melakukannya dengan sempurna.

— Leonardo da Vinci (parafrasa populer)

Menyuntik Fitur ke Web Orang Lain

Inilah trik jembatan yang paling ampuh. Setiap website yang terbuka di browsermu, pada dasarnya, adalah "tanah" yang boleh dihuni content script-mu. Kamu bisa menambahkan tombol, panel, peringatan, atau seluruh antarmuka baru ke situs yang bukan milikmu — selama itu untuk keperluan pribadi atau kamu punya izin memakainya.

Contoh nyata yang sering dibuat orang:

• Tombol "Salin sebagai Markdown" di halaman artikel yang tidak menyediakannya.
• Penghitung kata & estimasi waktu baca yang muncul di setiap halaman blog.
• Sorotan otomatis kata kunci tertentu di dashboard kerja (misalnya menandai status "URGENT" dengan warna merah).
• Tombol ekspor pada aplikasi web internal yang tidak punya fitur unduh.

Cara kerjanya: content script menunggu halaman selesai dimuat, mencari titik tempat elemen baru akan ditempel (misalnya di sebelah judul), lalu menyisipkan elemen buatanmu. Karena content script berbagi DOM dengan halaman, elemen barumu tampak seolah bagian asli situs.

// Hitung perkiraan waktu baca lalu tampilkan panel melayang
const teks = document.body.innerText || "";
const kata = teks.trim().split(/\s+/).length;
const menit = Math.max(1, Math.round(kata / 200));

const panel = document.createElement("div");
panel.textContent = `📖 ${kata} kata · ~${menit} menit baca`;
panel.style.cssText = "position:fixed;top:12px;right:12px;z-index:99999;" +
  "background:#111;color:#6ee7a0;padding:8px 12px;border-radius:10px;font:13px sans-serif";
document.body.appendChild(panel);

Mengubah Halaman Menjadi Alat

Selain menambah, extension bisa mengubah fungsi sebuah halaman. Halaman yang tadinya pasif (hanya menampilkan) bisa disulap jadi interaktif. Beberapa pola:

Halaman jadi papan kerja

Misal kamu tiap hari membuka daftar tiket dukungan pelanggan. Extension bisa menambahkan kotak centang, pewarnaan berdasarkan prioritas, tombol "tandai selesai", bahkan pintasan keyboard — mengubah halaman baca menjadi papan kerja aktif.

Halaman jadi formulir pintar

Extension bisa mengisi otomatis kolom yang berulang (nama, alamat, kode), memvalidasi input sebelum dikirim, atau menyalin nilai dari satu kolom ke kolom lain. Ini pintu masuk ke RPA yang kita bahas di Bab 6.

Halaman jadi sumber data

Dengan membaca DOM, halaman apa pun bisa jadi sumber data terstruktur: daftar produk jadi tabel harga, hasil pencarian jadi CSV, komentar jadi berkas analisis. Ini pintu masuk ke crawling di Bab 5.

Menghubungkan Banyak Layanan

Jembatan paling bertenaga adalah yang menghubungkan beberapa layanan sekaligus. Karena service worker bisa memanggil API luar, extension bisa menjadi lem antar-aplikasi tanpa kamu membangun server integrasi.

Contoh alur lintas layanan yang bisa dirakit satu extension:

• Baca data prospek dari halaman LinkedIn (content script) → kirim ke lembar Google Sheets lewat API (service worker).
• Ambil nomor resi dari email → cek status di situs kurir → tampilkan notifikasi.
• Salin teks dari halaman mana pun → kirim ke API AI untuk diringkas → simpan ke catatan.
• Pantau harga produk di marketplace → kirim pesan ke Telegram saat harga turun.

// Menerima data dari halaman, meneruskan ke dua layanan
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.tipe === "prospekBaru") {
    // 1) simpan lokal
    chrome.storage.local.get({ prospek: [] }, (d) => {
      d.prospek.push(msg.data);
      chrome.storage.local.set({ prospek: d.prospek });
    });
    // 2) kirim notifikasi ke Telegram (contoh)
    fetch(`https://api.telegram.org/bot<TOKEN>/sendMessage`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ chat_id: "123", text: `Prospek: ${msg.data.nama}` })
    });
  }
});

Kekuatan ini biasanya cuma dimiliki platform otomasi berbayar. Dengan extension, kamu memilikinya secara gratis dan pribadi — datanya pun tak perlu singgah di server orang lain.

Sistem hebat jarang lahir dari komponen hebat; ia lahir dari sambungan-sambungan yang tepat di antara komponen sederhana.

— Prinsip rekayasa sistem

Extension sebagai Aplikasi Terdistribusi

Ketika kamu memublikasikan extension, setiap orang yang memasangnya mendapat salinan lengkap aplikasimu yang berjalan di komputer mereka. Tidak ada satu server pusat yang harus menanggung beban semua pengguna. Seratus pengguna atau seratus ribu, bebanmu sama: nol. Inilah model "terdistribusi" — logika dan data hidup di sisi pengguna.

Bandingkan dua jalan membangun alat "penghitung kalori dari label makanan":

Tentu tidak semua ide cocok jadi extension — aplikasi yang butuh berbagi data antar-pengguna secara real-time tetap butuh server. Tapi sangat banyak alat berguna yang tidak butuh itu.

Popup sebagai Antarmuka Aplikasi

Popup itu kanvas mungil, tetapi cukup untuk banyak aplikasi. Ukurannya bebas kamu atur (dianjurkan lebar 300–400px). Di dalamnya bisa ada tab, daftar, formulir, grafik sederhana — apa pun yang bisa dibuat dengan HTML/CSS/JS. Untuk aplikasi yang butuh ruang lebih, kamu bisa membuka halaman penuh extension (seperti options page) atau tab baru dari berkas HTML-mu sendiri.

Pola umum aplikasi berbasis popup:

• Alat konversi: masukkan nilai, tampilkan hasil (mata uang, satuan, format tanggal).
• Manajer catatan/tugas: daftar tersimpan di storage, muncul tiap buka popup.
• Papan pintasan: kumpulan tombol yang menjalankan aksi di halaman aktif.
• Dashboard mini: menampilkan ringkasan data yang dipanen dari halaman.

Kapan Kamu Tak Perlu Server

Aturan praktisnya: kamu tak perlu server bila data tidak harus dibagikan antar-pengguna dan tidak butuh perhitungan berat yang harus rahasia. Berikut panduannya.

Tanda kamu cukup pakai extension saja

• Data milik masing-masing pengguna dan tak perlu dibagi (catatan pribadi, preferensi).
• Alat bekerja pada halaman yang sedang dibuka pengguna (crawler, RPA, penyorot).
• Panggilan ke API pihak ketiga bisa dilakukan langsung dari extension.
• Tak ada rahasia bisnis di dalam logika yang harus disembunyikan sepenuhnya.

Tanda kamu tetap butuh sedikit server

• Perlu berbagi data antar-pengguna secara terpusat (papan bersama, kolaborasi).
• Perlu menyimpan kunci API rahasia yang tak boleh terlihat pengguna.
• Perlu memverifikasi lisensi berbayar secara aman (lihat Bab 9 — bisa dengan server ringan atau layanan lisensi pihak ketiga).
• Perlu proses berat/terjadwal yang berjalan meski browser tertutup.

Bahkan saat butuh server, porsinya biasanya kecil — cukup satu fungsi awan (serverless function) untuk verifikasi lisensi, sementara seluruh aplikasi tetap di extension. Kamu memulai tanpa server, dan hanya menambah secuil saat benar-benar perlu.

Perangkat lunak terbaik adalah yang tak perlu kamu jalankan servernya pukul tiga pagi saat ia tumbang.

— Kearifan operator sistem

Membaca DOM: Menemukan Data

Setiap halaman web, di balik tampilannya, adalah pohon elemen yang disebut DOM (Document Object Model). Judul, paragraf, harga, gambar — semua adalah elemen dengan "alamat". Tugas kita: menemukan alamat elemen yang berisi data yang kita mau, lalu membaca isinya.

Alat pencarinya adalah selector CSS. Beberapa pola dasar:

// Anggap tiap produk berada di elemen berkelas .produk
const produk = [...document.querySelectorAll(".produk")].map(el => ({
  nama:  el.querySelector(".nama")?.textContent.trim(),
  harga: el.querySelector(".harga")?.textContent.replace(/[^0-9]/g, ""),
  tautan: el.querySelector("a")?.href
}));
console.table(produk);

Tanda ?. (optional chaining) menjaga kode tetap berjalan meski suatu elemen tidak ada — mengembalikan undefined alih-alih error. Ini penting karena halaman nyata sering tidak konsisten.

Pagination & Tabel

Membaca tabel HTML

Tabel adalah harta karun data. Polanya seragam: baris <tr>, sel <td> atau header <th>. Kita ubah jadi array of object.

const tabel = document.querySelector("table");
const header = [...tabel.querySelectorAll("thead th")].map(th => th.textContent.trim());
const baris = [...tabel.querySelectorAll("tbody tr")].map(tr => {
  const sel = [...tr.querySelectorAll("td")].map(td => td.textContent.trim());
  return Object.fromEntries(header.map((h, i) => [h, sel[i]]));
});

Menjelajah banyak halaman (pagination)

Data besar biasanya terbagi ke banyak halaman. Ada dua pola menjelajahnya:

• Klik tombol "Berikutnya" berulang: content script mencari tombol next, mengkliknya, menunggu halaman baru dimuat, memanen lagi. Cocok untuk situs yang memuat konten dinamis.
• Ubah nomor halaman di URL: banyak situs punya pola URL seperti ?page=2. Service worker bisa membuka tab untuk tiap nomor halaman dan memanen dari masing-masing.

async function tunggu(ms){ return new Promise(r => setTimeout(r, ms)); }

async function panenSemuaHalaman(){
  const hasil = [];
  while (true) {
    // panen halaman saat ini
    [...document.querySelectorAll(".item")].forEach(el =>
      hasil.push(el.textContent.trim()));
    // cari tombol berikutnya
    const next = document.querySelector("a.next:not([disabled])");
    if (!next) break;           // tak ada halaman lagi
    next.click();
    await tunggu(1500);       // beri jeda, sopan pada server
  }
  return hasil;
}

Ekspor ke CSV / JSON

Setelah data terkumpul dalam array, langkah terakhir adalah menyimpannya sebagai berkas. Untuk JSON tinggal JSON.stringify. Untuk CSV kita rangkai baris dipisah koma. Lalu kita picu unduhan.

function keCSV(baris){
  const kolom = Object.keys(baris[0]);
  const isi = baris.map(r =>
    kolom.map(k => `"${String(r[k] ?? "").replace(/"/g,'""')}"`).join(","));
  return [kolom.join(","), ...isi].join("\n");
}

function unduh(teks, namaFile){
  const blob = new Blob([teks], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url; a.download = namaFile; a.click();
  URL.revokeObjectURL(url);
}

unduh(keCSV(produk), "produk.csv");

Untuk unduhan yang lebih andal (misalnya dari service worker), kamu bisa memakai izin downloads dan API chrome.downloads.download. Untuk keperluan sederhana, teknik <a download> di atas sudah cukup.

Etika & Legalitas Scraping

Kemampuan memanen data datang dengan tanggung jawab besar. Scraping yang ceroboh bisa melanggar ketentuan layanan situs, melanggar hukum perlindungan data, atau membebani server orang. Berikut rambu-rambunya.

Prinsip scraping yang bertanggung jawab

• Hormati ketentuan layanan. Baca ToS situs. Banyak melarang scraping otomatis; hormati itu, terutama untuk penggunaan komersial.
• Hormati robots.txt. Berkas ini menyatakan bagian mana yang boleh dijelajah robot.
• Ambil data publik, bukan pribadi. Data yang terbuka untuk umum dan bukan data pribadi jauh lebih aman secara etika dan hukum.
• Beri jeda. Jangan menyerang server. Satu-dua permintaan per detik dengan jeda acak jauh lebih sopan.
• Untuk dirimu sendiri. Memanen data dari akun/dashboard milikmu sendiri (mis. ekspor laporanmu) hampir selalu aman.

Hukum berbeda antar-negara. Bila scraping-mu berskala besar atau komersial, konsultasikan dengan ahli hukum. Buku ini mengajarkan teknik; penggunaannya menjadi tanggung jawabmu.

Rate Limit & Anti-Blokir Dasar

Situs melindungi diri dari scraping agresif dengan berbagai cara: membatasi jumlah permintaan (rate limit), memblokir alamat IP, menampilkan CAPTCHA, atau mengubah struktur HTML. Sebagai scraper yang beretika, tujuanmu bukan "mengalahkan" pertahanan itu, melainkan tidak memicunya dengan cara berperilaku wajar.

Teknik agar tidak terblokir (dan tidak mengganggu)

• Jeda acak. Beri tunda 1–3 detik yang bervariasi antar permintaan, meniru manusia.
• Batasi laju. Tetapkan maksimum, misalnya 30 halaman per menit, lalu berhenti.
• Manfaatkan sesi login-mu. Karena extension bekerja di browsermu, kamu sudah "login sah" — tak perlu menyamar.
• Tangani perubahan struktur. Buat selector fleksibel dan cek null, agar tak crash saat HTML berubah.
• Berhenti saat diminta. Bila situs menampilkan CAPTCHA atau pesan "terlalu banyak permintaan", itu isyarat untuk berhenti, bukan untuk melawan.

function jedaAcak(min = 1000, max = 3000){
  const ms = min + Math.random() * (max - min);
  return new Promise(r => setTimeout(r, ms));
}
// pakai: await jedaAcak();  di antara tiap halaman

Data yang diambil dengan hormat bertahan lama; data yang dirampas menimbulkan gugatan. Jadilah tamu yang sopan di situs orang.

— Etika praktik data

Konsep RPA: Robot yang Meniru Manusia

Inti RPA browser adalah content script yang meniru tindakan manusia: menemukan elemen, mengetik ke dalamnya, mengkliknya, menunggu reaksi, lalu lanjut ke langkah berikutnya. Bedanya dengan manusia: robot tak lelah, tak salah ketik, dan bisa mengulang seribu kali dengan konsisten.

Empat gerakan dasar robot browser:

Isi Form Otomatis

Kasus RPA paling umum: mengisi formulir yang sama berulang kali — entri data, pendaftaran massal, pembaruan status. Mari buat fungsi pengisi form yang tangguh.

// Isi satu kolom dengan meniru manusia (set value + picu event)
function isiKolom(selector, nilai){
  const el = document.querySelector(selector);
  if (!el) { console.warn("Tak ketemu:", selector); return; }
  el.focus();
  el.value = nilai;
  el.dispatchEvent(new Event("input", { bubbles: true }));
  el.dispatchEvent(new Event("change", { bubbles: true }));
}

// Isi seluruh form dari sebuah objek data
function isiForm(data){
  isiKolom("#nama",    data.nama);
  isiKolom("#email",   data.email);
  isiKolom("#telepon", data.telepon);
  document.querySelector("#kirim")?.click();
}

Alur Multi-Langkah

Tugas nyata jarang satu langkah. Contoh: buka daftar → klik item pertama → isi form di halaman detail → simpan → kembali → ulang untuk item berikutnya. Kuncinya adalah menunggu dengan sabar di antara langkah, karena halaman butuh waktu memuat.

Alih-alih menebak lama tunggu, cara terbaik adalah menunggu sampai elemen muncul. Kita buat helper tungguElemen memakai MutationObserver atau polling ringan.

function tungguElemen(selector, timeout = 10000){
  return new Promise((resolve, reject) => {
    const ada = document.querySelector(selector);
    if (ada) return resolve(ada);
    const obs = new MutationObserver(() => {
      const el = document.querySelector(selector);
      if (el) { obs.disconnect(); resolve(el); }
    });
    obs.observe(document.body, { childList: true, subtree: true });
    setTimeout(() => { obs.disconnect(); reject(new Error("timeout")); }, timeout);
  });
}

async function prosesSemua(daftarData){
  for (const data of daftarData) {
    document.querySelector("#tambahBaru").click();
    await tungguElemen("#form-detail");   // tunggu form terbuka
    isiForm(data);
    await tungguElemen(".notif-sukses");  // tunggu konfirmasi
    await jedaAcak(800, 1600);         // jeda sopan
  }
  alert("Selesai memproses " + daftarData.length + " data");
}

Penjadwalan Tugas

RPA jadi makin kuat bila bisa berjalan otomatis pada waktu tertentu — misalnya memeriksa harga tiap pagi, atau mengekspor laporan tiap Jumat. API chrome.alarms memungkinkan service worker "dibangunkan" secara berkala meski kamu tak membuka popup.

// Buat alarm yang berbunyi tiap 60 menit
chrome.alarms.create("cekHarga", { periodInMinutes: 60 });

chrome.alarms.onAlarm.addListener(async (alarm) => {
  if (alarm.name === "cekHarga") {
    // buka tab tersembunyi, panen harga, tutup, notifikasi bila turun
    const tab = await chrome.tabs.create({ url: "https://toko.com/produk/123", active: false });
    // ... suntik skrip panen via chrome.scripting, bandingkan, lalu:
    chrome.tabs.remove(tab.id);
  }
});

Ingat batasannya: service worker (dan alarm) hanya aktif saat browser berjalan. Untuk otomasi yang harus jalan 24/7 tanpa browser terbuka, kamu butuh server — tapi untuk kebanyakan kebutuhan pribadi dan kantor, alarm sudah lebih dari cukup.

Otomasi bukan soal menggantikan manusia, melainkan membebaskan manusia dari pekerjaan yang tak layak menyita hidupnya.

— Semangat gerakan produktivitas

Penjelajah Use Case Interaktif

Pilih bidangmu, dan daftar ide extension/RPA yang relevan akan muncul — lengkap dengan tingkat kesulitan. Cocok untuk mencari titik mulai sesuai profesimu.

Katalog Use Case Lengkap

Berikut katalog naratif, dikelompokkan per bidang. Ini sumber yang sama dengan penjelajah di atas — dijabarkan lebih panjang agar kamu paham konteksnya.

Admin & Data Entry

1. Auto-Entry Massal. Untuk siapa: staf admin yang memasukkan ratusan baris data ke sistem web. Apa yang diotomasi: pengisian form berulang dari sebuah daftar (CSV yang ditempel di popup). Cara kerja: RPA membaca daftar, mengisi form satu per satu, menekan simpan, menunggu konfirmasi, lanjut. Menengah

2. Penyalin Antar-Tab. Untuk siapa: admin yang memindah data dari satu sistem ke sistem lain. Apa: menyalin nilai dari tab A dan menempelkan ke form tab B. Cara kerja: content script membaca DOM tab sumber, mengirim lewat service worker ke tab tujuan. Menengah

3. Pembersih & Validator Form. Untuk siapa: admin yang sering salah format. Apa: memvalidasi dan merapikan input (nomor telepon, tanggal) sebelum kirim. Cara kerja: content script mengintersep tombol submit, membersihkan nilai, baru meneruskan. Mudah

Sales & CRM

4. Pemanen Prospek. Untuk siapa: tim penjualan yang mengumpulkan calon pelanggan dari direktori/profil publik. Apa: mengekstrak nama, perusahaan, dan kontak publik ke CRM/Sheets. Cara kerja: content script membaca kartu profil, service worker mengirim ke API Sheets. Menantang

5. Pelacak Aktivitas CRM. Untuk siapa: sales yang lupa mencatat interaksi. Apa: tombol "catat cepat" yang muncul di halaman email/chat untuk log ke CRM. Cara kerja: suntik tombol via content script, kirim ke API CRM. Menengah

6. Template Balasan Sekali Klik. Untuk siapa: sales yang mengetik pesan serupa berulang. Apa: menyisipkan template ke kotak pesan mana pun. Cara kerja: popup menyimpan template di storage; klik menyisipkan ke kolom aktif. Mudah

Marketing & Media Sosial

7. Penjadwal Posting Bantu. Untuk siapa: admin sosmed. Apa: menyiapkan dan menyisipkan konten terjadwal ke composer. Cara kerja: alarm membangunkan worker, membuka composer, mengisi teks. Menantang

8. Pemanen Hashtag & Tren. Untuk siapa: pemasar konten. Apa: mengumpulkan hashtag dan metrik publik dari halaman tren. Cara kerja: content script membaca daftar, ekspor CSV. Menengah

9. Audit UTM & Tautan. Untuk siapa: tim iklan. Apa: memeriksa semua tautan halaman apakah punya parameter pelacakan yang benar. Cara kerja: content script memindai semua a[href], menandai yang salah. Mudah

HR & Rekrutmen

10. Screening Pelamar Terstruktur. Untuk siapa: rekruter yang menyaring banyak profil. Apa: mengekstrak ringkasan kandidat ke tabel penilaian. Cara kerja: content script membaca halaman pelamar, simpan ke storage, tampilkan tabel. Menengah

11. Pengisi Portal Lowongan. Untuk siapa: HR yang memasang lowongan di banyak papan kerja. Apa: mengisi form lowongan yang seragam. Cara kerja: RPA auto-fill dari satu sumber data. Menengah

12. Pengingat Follow-up Kandidat. Untuk siapa: tim rekrutmen. Apa: menandai kandidat yang perlu ditindaklanjuti. Cara kerja: alarm + notifikasi berdasarkan data tersimpan. Mudah

Keuangan & Akuntansi

13. Pemanen Mutasi Rekening. Untuk siapa: staf keuangan (mengakses akun sendiri). Apa: mengekspor riwayat transaksi dari dashboard bank ke CSV. Cara kerja: content script membaca tabel mutasi, ekspor. Menengah

14. Rekonsiliasi Faktur. Untuk siapa: akuntan. Apa: mencocokkan nomor faktur di dua sistem, menandai selisih. Cara kerja: panen kedua daftar, bandingkan di worker. Menantang

15. Konverter Mata Uang Inline. Untuk siapa: siapa pun yang membaca harga asing. Apa: menampilkan kurs Rupiah saat menyorot angka. Cara kerja: content script mendeteksi angka, panggil API kurs. Mudah

Riset & Akademik

16. Pengumpul Sitasi. Untuk siapa: peneliti/mahasiswa. Apa: mengambil metadata makalah (judul, penulis, tahun) ke daftar pustaka. Cara kerja: content script membaca halaman jurnal, format sitasi. Menengah

17. Pemanen Tabel Data Penelitian. Untuk siapa: analis data. Apa: mengubah tabel HTML apa pun jadi CSV/JSON rapi. Cara kerja: baca table, ekspor. Mudah

18. Penyorot Kata Kunci Literatur. Untuk siapa: pembaca makalah. Apa: menyorot istilah penting di seluruh halaman. Cara kerja: content script memindai teks, membungkus kecocokan dengan sorotan. Mudah

E-commerce & Marketplace

19. Pelacak Harga & Notifikasi Turun. Untuk siapa: pembeli cerdas & reseller. Apa: memantau harga produk dan memberi tahu saat turun. Cara kerja: alarm memanen harga berkala, bandingkan, notifikasi/Telegram. Menantang

20. Pembanding Produk Lintas Toko. Untuk siapa: pembeli. Apa: mengumpulkan harga produk sama dari beberapa marketplace. Cara kerja: content script memanen tiap tab toko, worker menyatukan. Menantang

21. Pemanen Ulasan Produk. Untuk siapa: penjual yang menganalisis feedback. Apa: mengekspor ulasan & rating ke CSV untuk dianalisis. Cara kerja: loop pagination ulasan, ekspor. Menengah

Customer Support

22. Sisipan Jawaban Kanonik. Untuk siapa: agen support. Apa: menyisipkan jawaban baku ke tiket/chat. Cara kerja: popup daftar jawaban, klik menyisipkan ke kolom aktif. Mudah

23. Ringkas Riwayat Tiket. Untuk siapa: agen yang menerima tiket panjang. Apa: meringkas percakapan panjang jadi poin. Cara kerja: content script mengambil teks, kirim ke API AI (Bab 11). Menantang

Hukum & Compliance

24. Pemindai Klausa Kontrak. Untuk siapa: paralegal. Apa: menyorot klausa berisiko (penalti, force majeure) di dokumen web. Cara kerja: content script mencocokkan pola kata, menyorot. Menengah

25. Audit Kepatuhan Halaman. Untuk siapa: tim compliance. Apa: memeriksa apakah halaman memuat elemen wajib (kebijakan privasi, disclaimer). Cara kerja: content script memeriksa keberadaan elemen/teks, laporkan. Mudah

Kesehatan / Klinik (non-PII)

26. Pengingat Jadwal Non-Pribadi. Untuk siapa: staf klinik. Apa: menandai slot jadwal kosong di sistem penjadwalan. Cara kerja: content script memindai kalender, menyorot slot. Hindari data pasien! Menengah

27. Kalkulator Dosis/Referensi. Untuk siapa: tenaga kesehatan. Apa: alat hitung referensi cepat di popup. Cara kerja: popup murni, tanpa akses data pasien. Mudah

Pendidikan & Guru

28. Perekap Nilai Otomatis. Untuk siapa: guru. Apa: mengumpulkan nilai dari platform kuis ke rekap. Cara kerja: content script memanen tabel nilai, ekspor. Menengah

29. Pembuat Kuis dari Teks. Untuk siapa: pengajar. Apa: mengubah materi jadi pertanyaan latihan. Cara kerja: ambil teks, kirim ke API AI, tampilkan kuis. Menantang

Logistik, Real Estate, Travel

30. Pelacak Resi Multi-Kurir. Untuk siapa: tim logistik/olshop. Apa: mengecek status banyak resi sekaligus. Cara kerja: worker memanggil API kurir untuk tiap resi tersimpan. Menantang

31. Pemanen Listing Properti. Untuk siapa: agen real estate. Apa: mengumpulkan listing (harga, luas, lokasi) ke tabel. Cara kerja: crawler pagination + ekspor. Menengah

32. Pembanding Harga Tiket/Hotel. Untuk siapa: pelancong. Apa: mengumpulkan harga dari beberapa situs booking. Cara kerja: panen tiap tab, worker menyatukan & mengurutkan. Menantang

Jurnalis, Content Creator, Produktivitas Pribadi

33. Pemanen Kutipan & Sumber. Untuk siapa: jurnalis. Apa: menyimpan kutipan tersorot beserta URL & tanggal ke catatan. Cara kerja: content script menangkap seleksi, simpan ke storage. Mudah

34. Pengunduh Aset Massal. Untuk siapa: kreator konten (aset milik sendiri/berlisensi). Apa: mengunduh banyak gambar/berkas sekaligus. Cara kerja: content script mengumpulkan URL, chrome.downloads mengunduh. Menengah

35. Fokus & Pemblokir Distraksi. Untuk siapa: siapa pun. Apa: menyembunyikan feed/rekomendasi yang mengganggu. Cara kerja: content script menyembunyikan elemen tertentu via CSS. Mudah

36. Manajer Tab & Sesi. Untuk siapa: pekerja multitasking. Apa: menyimpan & memulihkan kumpulan tab kerja. Cara kerja: API tabs menyimpan URL ke storage, membuka ulang saat diminta. Menengah

Total lebih dari tiga puluh ide — dan ini baru permulaan. Setiap kali kamu merasa "andai halaman ini bisa begini", di situlah bibit extension berikutnya. Bab 8 mengajarkan cara mewujudkannya.

Langkah 1: Extension Pertama (Hello World)

1. Buat sebuah folder baru, misalnya extension-pertama.
2. Di dalamnya, buat berkas manifest.json dengan isi di bawah.
3. Buat berkas popup.html sederhana.
4. Buka Chrome, ketik chrome://extensions di address bar.
5. Nyalakan Developer mode (sudut kanan atas).
6. Klik Load unpacked, pilih foldermu.
7. Ikon extension muncul di toolbar. Klik — popup menyapa. Selamat!

{
  "manifest_version": 3,
  "name": "Extension Pertamaku",
  "version": "1.0",
  "action": { "default_popup": "popup.html" }
}

<!doctype html>
<html><body style="width:220px;font-family:sans-serif;padding:16px">
  <h3>Halo, dunia! 👋</h3>
  <p>Extension pertamaku hidup.</p>
</body></html>

Langkah 2: Content Script yang Mengubah Halaman

Sekarang kita buat extension menyentuh halaman web. Tambahkan content script yang memberi bingkai hijau ke setiap gambar — bukti bahwa kita bisa mengubah situs apa pun.

1. Tambahkan blok content_scripts ke manifest.
2. Buat berkas content.js.
3. Reload extension, lalu buka situs mana pun bergambar.

  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]

// Beri bingkai hijau ke semua gambar di halaman
document.querySelectorAll("img").forEach(img => {
  img.style.border = "3px solid #22c55e";
  img.style.borderRadius = "8px";
});
console.log("Content script berjalan di:", location.href);

Buka Developer Tools (F12) → tab Console untuk melihat pesan log. Inilah tempatmu mengintip apa yang dilakukan content script — teman debugging terbaikmu.

Langkah 3: Popup dengan Tombol Aksi

Kita hubungkan popup dan halaman. Tombol di popup akan menyuruh content script menyorot semua tautan. Ini memperkenalkan chrome.scripting dan activeTab.

  "permissions": ["activeTab", "scripting"]

<!doctype html><html><body style="width:220px;padding:14px;font-family:sans-serif">
  <button id="soroti" style="width:100%;padding:10px">Sorot Semua Tautan</button>
  <script src="popup.js"></script>
</body></html>

document.getElementById("soroti").addEventListener("click", async () => {
  // cari tab aktif
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // suntik fungsi ke halaman itu
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => {
      document.querySelectorAll("a").forEach(a => a.style.background = "#fbbf24");
    }
  });
});

Perhatikan pola baru: alih-alih content script yang selalu jalan, kita menyuntik saat diperlukan lewat executeScript. Ini lebih hemat dan lebih sopan pada privasi — hanya berjalan saat pengguna menekan tombol.

Langkah 4: Menyimpan Data

Alat sungguhan perlu mengingat. Kita buat pencatat sederhana: ketik catatan di popup, simpan, dan ia tetap ada saat popup dibuka lagi.

  "permissions": ["storage"]

const kotak = document.getElementById("catatan");

// muat catatan tersimpan saat popup dibuka
chrome.storage.local.get({ catatan: "" }, (d) => {
  kotak.value = d.catatan;
});

// simpan tiap kali diketik
kotak.addEventListener("input", () => {
  chrome.storage.local.set({ catatan: kotak.value });
});

Dengan sekitar sepuluh baris, kamu punya aplikasi catatan yang datanya bertahan. Tak ada database, tak ada server. Itulah kesederhanaan yang dijanjikan Bab 4.

Langkah 5: Memanggil API

Kini kita sambungkan extension ke dunia luar. Contoh: tombol yang mengambil kutipan acak dari sebuah API publik dan menampilkannya. Panggilan API dilakukan dengan fetch.

document.getElementById("ambil").addEventListener("click", async () => {
  const status = document.getElementById("status");
  status.textContent = "Memuat...";
  try {
    const resp = await fetch("https://api.contoh.com/kutipan");
    const data = await resp.json();
    status.textContent = data.teks;
  } catch (e) {
    status.textContent = "Gagal memuat: " + e.message;
  }
});

Selalu bungkus panggilan jaringan dengan try/catch. Jaringan bisa gagal, dan aplikasi yang menangani kegagalan dengan anggun terasa jauh lebih profesional.

Langkah 6: RPA Sederhana — Auto-Fill Form

Puncak bab praktik: robot pengisi form. Kita gabungkan semua yang dipelajari. Skenario: sebuah halaman punya form dengan kolom #nama, #email, #pesan. Tombol popup akan mengisinya otomatis dari data tersimpan.

document.getElementById("isiOtomatis").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const { profil } = await chrome.storage.local.get({
    profil: { nama: "Budi", email: "budi@mail.com", pesan: "Halo!" }
  });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    args: [profil],
    func: (p) => {
      function isi(sel, v) {
        const el = document.querySelector(sel);
        if (!el) return;
        el.value = v;
        el.dispatchEvent(new Event("input", { bubbles: true }));
      }
      isi("#nama", p.nama);
      isi("#email", p.email);
      isi("#pesan", p.pesan);
    }
  });
});

Itu dia — robot browser pertamamu. Dari sini, semua use case Bab 7 hanyalah variasi: ganti selector, tambah loop, sambungkan API, jadwalkan dengan alarm. Kamu sudah memegang seluruh perkakas.

Kamu tak perlu menjadi hebat untuk memulai, tetapi kamu perlu memulai untuk menjadi hebat.

— Zig Ziglar

Publish ke Chrome Web Store

Chrome Web Store adalah etalase resmi extension. Untuk memublikasikan, kamu perlu akun developer dengan biaya pendaftaran sekali bayar sekitar USD 5 (bukan langganan). Setelah itu kamu bisa menerbitkan banyak extension.

Langkah publikasi

1. Siapkan paket. Kompres folder extension-mu jadi berkas ZIP (isi manifest, skrip, ikon).
2. Daftar developer. Buka Chrome Web Store Developer Dashboard, bayar biaya sekali USD 5 dengan kartu.
3. Unggah ZIP. Klik "New item", unggah paketmu.
4. Isi listing. Nama, deskripsi, kategori, bahasa, ikon 128px, dan minimal satu tangkapan layar (screenshot) 1280×800.
5. Isi privasi. Deklarasikan izin dan penggunaan data (wajib & ditinjau ketat).
6. Kirim untuk ditinjau. Tim Google meninjau (biasanya beberapa hari). Bila lolos, extension tayang.

Ekosistem lain

Extension MV3 yang sama umumnya bisa juga diterbitkan di Microsoft Edge Add-ons (gratis daftar) dan toko Firefox (dengan sedikit penyesuaian). Satu basis kode, beberapa pasar.

Model Harga

Chrome Web Store dulu punya sistem pembayaran bawaan, tetapi kini penagihan ditangani sendiri oleh developer. Artinya kamu bebas memilih model. Yang umum:

Untuk pemula, pola Freemium paling menarik: pengguna mencoba gratis, lalu membuka fitur "Pro" (misalnya ekspor tanpa batas, penjadwalan, integrasi AI) dengan membeli lisensi.

License Manager Sederhana

Bagaimana extension tahu seorang pengguna sudah membayar? Kamu butuh License Manager — mekanisme memverifikasi kunci lisensi. Versi paling sederhana yang cukup aman:

1. Pengguna membeli lewat halaman pembayaran (mis. lewat penyedia seperti Gumroad, Lemon Squeezy, atau Mayar/Xendit untuk pasar Indonesia).
2. Setelah bayar, sistem penjual mengirim kunci lisensi unik ke email pembeli.
3. Pengguna menempel kunci di options page extension.
4. Extension memverifikasi kunci ke endpoint verifikasi (fungsi awan ringan milikmu atau API penyedia pembayaran).
5. Bila valid, extension menyimpan status "Pro" di storage dan membuka fitur.

document.getElementById("aktivasi").addEventListener("click", async () => {
  const kunci = document.getElementById("kunci").value.trim();
  try {
    const r = await fetch("https://lisensi.contoh.com/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ kunci })
    });
    const { valid, sampai } = await r.json();
    if (valid) {
      await chrome.storage.local.set({ pro: true, proSampai: sampai });
      alert("Pro aktif! Terima kasih 🎉");
    } else {
      alert("Kunci tidak valid.");
    }
  } catch (e) { alert("Gagal memverifikasi. Coba lagi."); }
});

Pembayaran, ToS & Privasi

Menerima pembayaran

Karena toko tak lagi menagih untukmu, gunakan penyedia pembayaran pihak ketiga. Beberapa yang ramah developer: Gumroad dan Lemon Squeezy (global, menangani pajak/VAT), atau penyedia lokal untuk pasar Indonesia. Mereka memberi halaman checkout siap pakai dan (sebagian) API verifikasi lisensi, sehingga kamu tak perlu membangun sistem pembayaran sendiri.

Ketentuan Layanan (ToS)

Sertakan halaman ToS sederhana: apa yang boleh dan tidak, batasan tanggung jawab, kebijakan pengembalian dana. Ini melindungimu secara hukum dan membangun kepercayaan.

Kebijakan Privasi

Wajib bila extension menyentuh data pengguna. Nyatakan dengan jujur: data apa yang diakses, apakah dikirim keluar, dan untuk apa. Banyak extension bisa menulis "semua data tetap di perangkat Anda; kami tidak mengumpulkan apa pun" — dan itu adalah nilai jual sekaligus keunggulan kepatuhan.

Harga adalah apa yang kamu bayar; nilai adalah apa yang kamu dapat. Alat yang menghemat sejam sehari mudah dihargai orang.

— Warren Buffett (parafrasa)

Lima Prinsip Etika Extension

1. Izin seminimal mungkin

Jangan pernah meminta izin yang tak kamu pakai. Butuh membaca satu tab saat diklik? Pakai activeTab, bukan akses semua situs. Semakin sempit izin, semakin kecil potensi kerusakan bila ada bug, dan semakin cepat lolos tinjauan.

2. Jangan pernah mencuri data pengguna

Data yang diakses extension tidak boleh dikirim ke servermu tanpa sepengetahuan dan izin eksplisit pengguna. Idealnya, proses data secara lokal. Bila harus mengirim keluar (misalnya ke API AI), katakan dengan jelas dan minta persetujuan.

3. Patuhi ketentuan layanan situs

Menyuntik fitur dan scraping bisa melanggar ToS situs. Untuk pemakaian pribadi, risikonya rendah. Untuk produk yang disebar, hormati aturan situs target — terutama yang eksplisit melarang otomasi. Melanggar bisa berujung pemblokiran akun atau tuntutan.

4. Hormati hukum data & PII

PII (Personally Identifiable Information) — nama, email, nomor, data kesehatan/keuangan pribadi — diatur ketat oleh hukum di banyak negara. Jangan memanen, menyimpan, atau memperjualbelikan PII orang lain. Bila alatmu menyentuh data kesehatan atau keuangan, ekstra hati-hati dan hindari menyimpan data identitas.

5. Transparansi total

Deskripsi jujur, kebijakan privasi jelas, tak ada fungsi tersembunyi. Extension yang menyuntikkan iklan diam-diam atau menambang kripto di latar adalah pengkhianatan kepercayaan — dan cepat atau lambat ketahuan lalu dihapus dari toko.

Keamanan Teknis Praktis

• Jangan simpan rahasia di kode. Kunci API yang tertanam di extension bisa dibaca siapa saja. Bila rahasia, taruh di server, bukan di klien.
• Bersihkan input. Bila menampilkan data dari halaman/pengguna, hindari innerHTML mentah agar tak terkena injeksi skrip. Gunakan textContent.
• Batasi host_permissions. Sebut domain spesifik, hindari <all_urls> kecuali benar-benar perlu.
• Perbarui dengan hati-hati. Pengguna mempercayai pembaruan otomatis; jangan menyelundupkan perubahan izin atau perilaku tanpa pemberitahuan.
• Patuhi CSP MV3. Tak ada eval, tak ada kode remote. Ini melindungimu dan pengguna.

Etika bukan penghalang kreativitas, melainkan fondasi kepercayaan yang membuat karyamu bertahan. Extension paling sukses adalah yang penggunanya merasa aman memasangnya.

Dengan kekuatan besar datang tanggung jawab besar.

— Prinsip yang dipopulerkan lewat kisah Spider-Man

Cara Kerja Extension + AI

Polanya sederhana: content script mengambil teks dari halaman → service worker mengirimkannya ke API model bahasa (AI) → jawaban ditampilkan di popup atau disuntikkan ke halaman. Yang berubah hanyalah "mesin berpikirnya" ada di awan.

async function ringkas(teks){
  const r = await fetch("https://api.penyedia-ai.com/v1/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + (await ambilKunci())
    },
    body: JSON.stringify({
      model: "model-cerdas",
      messages: [{ role: "user",
        content: "Ringkas dalam 5 poin:\n\n" + teks.slice(0, 8000) }]
    })
  });
  const data = await r.json();
  return data.choices[0].message.content;
}

Ide Alat Extension + AI

• Peringkas halaman. Satu klik, artikel panjang jadi lima poin.
• Asisten balasan. Draf jawaban email/chat berdasarkan konteks percakapan.
• Penerjemah kontekstual. Terjemahkan sambil menjaga istilah teknis.
• Ekstraktor terstruktur. Ubah teks berantakan (alamat, jadwal) jadi data rapi.
• Penilai sentimen ulasan. Klasifikasikan ratusan ulasan jadi positif/negatif.
• Penjelas istilah. Sorot kata sulit, dapatkan penjelasan sederhana.

Alat terbaik memperbesar kemampuan manusia, bukan menggantikannya. AI di dalam extension adalah pengungkit untuk pikiranmu.

— Refleksi era kecerdasan buatan

FAQ — Pertanyaan yang Sering Muncul

1. Apakah saya harus bisa coding untuk membuat extension?

Tidak harus mahir. Kamu bisa mulai dengan menyalin pola dari buku ini dan mengubah sedikit. Pemahaman dasar HTML/JavaScript membantu, tapi banyak yang belajar sambil membuat.

2. Apakah extension gratis dibuat?

Membuat dan mengujinya gratis sepenuhnya. Hanya bila ingin menerbitkan di Chrome Web Store ada biaya pendaftaran developer sekali bayar sekitar USD 5.

3. Apakah extension saya bisa dipakai di browser selain Chrome?

Ya. Edge, Brave, Opera, dan Vivaldi memakai mesin yang sama dan mendukung extension MV3. Firefox mendukung dengan sedikit penyesuaian.

4. Bisakah extension berjalan saat browser ditutup?

Tidak. Extension hidup di dalam browser. Untuk otomasi 24/7 tanpa browser, kamu butuh server. Untuk kebanyakan kebutuhan, alarm saat browser terbuka sudah cukup.

5. Apakah scraping itu ilegal?

Tergantung apa yang di-scrape, dari mana, dan untuk apa. Data publik non-pribadi untuk keperluan sendiri umumnya aman; memanen data pribadi atau melanggar ToS bisa bermasalah. Baca Bab 5 dan 10.

6. Bagaimana extension mengingat data?

Lewat chrome.storage (local atau sync). Data bertahan meski browser ditutup, tanpa perlu database.

7. Kenapa content script saya tidak jalan?

Cek pola matches di manifest apakah cocok dengan URL, cek Console untuk error, dan pastikan kamu me-reload extension setelah mengubah kode.

8. Apa itu Manifest V3 dan kenapa penting?

Standar terbaru extension yang wajib dipakai. Menekankan keamanan (tak ada kode remote) dan hemat sumber daya (service worker). Semua kode buku ini memakai MV3.

9. Bisakah extension menyembunyikan kunci API rahasia?

Tidak sepenuhnya — kode extension bisa dibaca pengguna. Rahasia sejati harus di server. Untuk alat pribadi, biarkan pengguna memakai kunci mereka sendiri.

10. Berapa lama tinjauan Chrome Web Store?

Biasanya beberapa hari, kadang lebih lama untuk extension dengan izin sensitif. Izin minimal mempercepat proses.

11. Bisakah saya mengubah tampilan situs orang lain secara permanen?

Perubahan content script hanya berlaku di browser pengguna yang memasang extension, bukan di server situs. Situs aslinya tak berubah bagi orang lain.

12. Bagaimana cara menjual extension?

Terbitkan di toko, tawarkan model freemium, tangani pembayaran lewat penyedia pihak ketiga, dan verifikasi lisensi. Lihat Bab 9.

13. Apakah RPA di extension bisa mengisi CAPTCHA?

Tidak — dan tidak seharusnya. CAPTCHA justru dirancang mencegah otomasi. Menembusnya melanggar ToS dan sering ilegal. Berhentilah saat menemuinya.

14. Apa risiko terbesar bagi pemula?

Meminta izin berlebihan dan mengabaikan privasi. Mulai dengan izin minimal dan jangan mengirim data pengguna ke mana pun tanpa izin jelas.

15. Berapa modal untuk memulai bisnis extension?

Praktis USD 5 untuk daftar developer, plus mungkin biaya penyedia pembayaran dan (bila pakai AI) biaya API. Banyak bisnis extension sukses bermula tanpa modal lain.

16. Bagaimana cara belajar lebih lanjut setelah buku ini?

Bangun proyek nyata. Baca dokumentasi resmi Chrome Extensions. Pelajari extension open-source yang kamu suka dengan membuka kodenya. Praktik mengalahkan teori.

Glosarium

Checklist Rilis

Sebelum menekan tombol "publish", telusuri daftar ini agar karyamu tampil profesional dan lolos tinjauan.

Fungsi & kualitas

• Extension berjalan tanpa error di Console pada situs target.
• Semua tombol dan alur diuji, termasuk kasus gagal (jaringan mati, elemen tak ada).
• Ada tombol "Berhenti" untuk proses RPA yang panjang.
• Data tersimpan & termuat kembali dengan benar.

Izin & privasi

• Hanya meminta izin yang benar-benar dipakai.
• host_permissions sesempit mungkin (hindari <all_urls> bila bisa).
• Kebijakan privasi ditulis jujur dan disertakan.
• Tak ada data pengguna dikirim keluar tanpa izin eksplisit.

Listing toko

• Nama jelas & deskripsi jujur sesuai fungsi.
• Ikon 128px & minimal satu screenshot 1280×800.
• Kategori & bahasa terisi.
• Nomor versi diatur (mulai 1.0.0).

Bisnis (bila berbayar)

• Halaman pembayaran & alur lisensi diuji ujung ke ujung.
• ToS & kebijakan pengembalian dana tersedia.
• Fitur gratis vs Pro jelas dibatasi.

Selesai lebih baik daripada sempurna. Kirimkan karyamu ke dunia — di sanalah ia mulai hidup.

— Prinsip pembuat produk