Kenapa Harus Pusing Isi Form yang Itu-itu Saja?

Pernah gak sih kalian merasa bosan tingkat dewa pas lagi job hunting? Tiap buka situs perusahaan baru, kita harus ngisi data diri yang sama dari nama, alamat, sampai riwayat pendidikan. Parahnya, setiap sistem rekrutmen punya desain form yang beda-beda, ada yang pakai tabel, ada yang pakai div, bahkan ada yang ribet banget formatnya. Buat kita mahasiswa yang lagi kejar target magang atau kerja, waktu itu berharga banget! Daripada buang waktu ngetik manual, kenapa nggak kita otomasi aja pakai Chrome extension?

Artikel ini bakal bahas cara saya membangun Chrome extension untuk autofill form lamaran kerja. Yang paling penting: semua data tersimpan lokal di browser kalian. Jadi, data pribadi kamu aman dan nggak dikirim ke server pihak ketiga mana pun. Ini adalah proyek coding yang super berguna buat portofolio kamu sekaligus membantu kehidupan sehari-hari!

Struktur Dasar dan Arsitektur Extension

Kita menggunakan Manifest V3 yang merupakan standar terbaru Chrome. Strukturnya dibuat simpel supaya mudah dipahami:

  • util.js: Berisi fungsi bantuan dan definisi profil.
  • matcher.js: Otak dari aplikasi yang menebak bidang apa yang sedang diisi (nama, email, kode pos, dll).
  • filler.js: Bagian yang berinteraksi langsung dengan DOM untuk mengisi data.
  • content.js: Pusat koordinasi yang menggabungkan proses scanning, klasifikasi, dan pengisian.

Salah satu poin teknis penting adalah penggunaan "permissions": ["storage"] saja. Kita nggak perlu akses aneh-aneh, cukup simpan data di local storage browser. Dengan fitur all_frames: true, extension ini bahkan bisa mendeteksi form yang terselip di dalam iframe, yang sering dipakai sistem rekrutmen jadul.

Logika Heuristik: Menebak Isi Form

Tantangan terbesar adalah form lamaran seringkali nggak pakai atribut autocomplete yang standar. Solusinya? Kita menggunakan pendekatan heuristic field inference. Kita mengambil teks label di sekitar input field, lalu melakukan pembersihan teks (seperti membuang contoh teks) agar akurat.

Bagian menariknya ada di classifyField. Fungsi ini adalah pure function, artinya dia cuma nerima string dan balikin tipe data tanpa perlu akses ke browser. Ini bikin kita bisa ngetes logikanya di Node.js tanpa harus buka browser terus-terusan. Kita bahkan menambahkan penanganan khusus untuk:

  • Tanggal Lahir & Lulus: Mendeteksi apakah itu tahun, bulan, atau hari berdasarkan rentang angkanya.
  • React/Vue Apps: Banyak situs rekrutmen pakai framework modern. Kalau cuma pakai el.value = "...", sistem mereka nggak akan sadar kalau data sudah terisi. Kita perlu akses prototype setter dan memicu event input serta change agar state framework tetap terupdate.
  • Form Terpisah: Menangani nomor HP atau kode pos yang dipecah menjadi 3 kotak input berbeda.

Kenapa Proyek Ini Worth It Buat Mahasiswa?

Jujur saja, ini adalah proyek side-hustle yang brilian. Bukan cuma soal aplikasinya yang bermanfaat, tapi teknik yang dipakai—seperti DOM manipulation, MutationObserver untuk SPA (Single Page Application), hingga unit testing—adalah ilmu mahal yang bakal ditanya saat interview teknis magang. Kamu bisa belajar cara berinteraksi dengan DOM tanpa harus bikin ribet user experience (UX) situs orang lain.

Kelebihan: Data super aman (lokal), sangat efisien buat melamar ke banyak perusahaan sekaligus, dan melatih skill debugging.

Kekurangan: Karena sistem form setiap perusahaan beda-beda, kadang ada satu atau dua field yang meleset kalau desain HTML-nya nggak lazim. Tapi tenang, kodenya gampang di-tweak!

Cara Memulai Proyek Ini

Kamu bisa melihat source code lengkapnya dan mencoba mengembangkannya sendiri. Ingat, kuncinya adalah testing! Saya sudah menyiapkan 120 test cases menggunakan jsdom agar logic-nya nggak error saat dipakai di form beneran. Jangan lupa, selalu cek kembali hasil autofill sebelum menekan tombol submit, ya!

Buat kamu yang ingin jago otomasi, jangan cuma jadi penonton. Coba clone repo-nya, utak-atik matcher.js-nya, dan buatlah versi yang lebih canggih. Siapkan portofolio terbaikmu sekarang, karena skill otomasi kayak gini bakal bikin CV kamu dilirik rekruter teknis! Let's code and ship it!