Pengalaman Pertama Saya Membuat Chrome Extension dengan Vibe Coding

TL;DR

• Saya belum pernah membuat Chrome Extension sebelumnya.
• Ide proyek ini muncul karena ingin memakai template HTML langsung di Gmail compose.
• Saya menemukan extension berbayar yang hampir sesuai kebutuhan, lalu mencoba membuat versi yang lebih sederhana sendiri dengan bantuan AI.
• Hasilnya: tombol di toolbar Gmail, modal editor HTML, lalu HTML masuk ke draft email.
• Pengalaman ini menurunkan hambatan saya untuk mencoba teknologi yang benar-benar baru.

Ada kebiasaan yang akhir-akhir ini sering saya lakukan: memandangi newsletter yang masuk ke inbox. Bukan isi emailnya yang menarik perhatian saya, melainkan desainnya. Banyak yang tampak sederhana, tidak penuh warna, tidak dipenuhi gambar, tipografinya bersih, dan spacing antar elemennya nyaman. Secara keseluruhan terasa profesional.

Saya lalu berpikir, kalau mereka bisa mengirim email seperti itu, kenapa saya tidak?

Ide Ini Berawal dari Kebutuhan Sendiri

Saya bukan sedang mencari ide proyek baru. Saya hanya ingin mengirim email yang tampil lebih rapi saat berkomunikasi dengan client. Bayangan saya sederhana: buat template HTML sekali, lalu pakai lagi setiap kali dibutuhkan, tanpa pindah ke tool lain.

Setelah dicoba beberapa kali, Gmail ternyata tidak menyediakan fitur itu out of the box. Compose Gmail memang nyaman untuk teks biasa, tapi untuk menyisipkan HTML email secara fleksibel, opsinya terbatas.

Saya Mulai Mencari Solusi

Saya mulai mencari di internet, membaca artikel, menonton beberapa video, dan mencoba rekomendasi dari forum. Sebagian besar solusi terasa berlebihan untuk kebutuhan saya. Ada yang meminta aplikasi pihak ketiga, ada yang workflow-nya panjang, ada juga yang mengharuskan berpindah-pindah halaman hanya untuk mengirim satu email. Semua itu kurang praktis untuk ritme kerja harian.

Extension yang Hampir Sempurna

Di tengah pencarian itu, saya menemukan Chrome Extension bernama HTML Editor for Gmail.

Kesan pertama saya positif. Extension-nya bekerja, workflow-nya sederhana, dan hampir sesuai kebutuhan. Saya memakai versi trial selama beberapa hari dan mulai terbiasa: buka compose, tempel HTML, lalu terapkan ke draft.

Sampai Masa Trial Berakhir

Ketika trial selesai, muncul opsi berlangganan sekitar lima dolar per bulan. Nominalnya tidak besar. Saya tidak keberatan membayar jika memang benar-benar membutuhkannya. Tapi ada pertanyaan yang terus muncul: kalau inti fiturnya sesederhana ini, apakah saya bisa membuat versinya sendiri?

Masalahnya, Saya Belum Pernah Membuat Chrome Extension

Saya sudah lama mengembangkan website, terbiasa dengan WordPress, dan cukup sering menulis custom functionality dengan PHP dan JavaScript. Tapi Chrome Extension adalah wilayah yang belum pernah saya sentuh. Saya belum paham struktur project-nya, Manifest, Content Script, maupun cara extension berinteraksi dengan halaman Gmail yang DOM-nya dinamis.

Kalau ide ini muncul beberapa tahun lalu, kemungkinan besar saya akan menguburnya. Bukan karena proyeknya sulit secara teknis, melainkan karena hambatan memulainya terasa terlalu besar: baca dokumentasi, pahami konsep baru, lalu rancang struktur project yang belum pernah dilihat, semuanya hanya untuk satu fitur sederhana. Rasanya tidak sebanding.

Kali Ini Situasinya Berbeda

Sekarang saya punya AI, bukan sekadar untuk menghasilkan kode, melainkan sebagai partner diskusi. Saya tidak meminta AI membuat seluruh project dalam satu perintah. Saya mulai dengan menjelaskan masalah yang ingin diselesaikan: workflow yang diinginkan, pengalaman pengguna yang diharapkan, dan batasan fitur yang sengaja saya buat sempit.

Kemudian kami membangunnya sedikit demi sedikit. Saya yang menentukan arah, AI yang membantu menerjemahkan ide ke kode, dan saya yang menguji ulang di Gmail setiap ada perubahan.

Saya Tidak Memulai dari Coding

Hal pertama yang saya lakukan bukan membuka VS Code, melainkan menulis alur kerja di catatan. Saya membayangkan bagaimana extension ini akan dipakai setiap hari, dan saya tidak butuh puluhan fitur. Yang saya butuhkan hanya yang benar-benar dipakai.

Workflow akhirnya sangat sederhana:

• Ada tombol baru di halaman compose Gmail.
• Tombol itu membuka modal editor HTML.
• Saya menempelkan HTML email ke dalam editor.
• Saya menekan Apply.
• HTML langsung masuk ke draft email yang sedang ditulis.

Sesederhana itu.

Saya Tidak Ingin Meniru Extension yang Sudah Ada

Tujuan saya bukan membuat salinan dari extension berbayar yang sempat saya coba. Saya ingin versi yang lebih ramping: cukup untuk kebutuhan saya, tanpa fitur yang jarang dipakai. Dengan batasan itu, project tetap kecil, lebih mudah dipahami, dan lebih menyenangkan untuk dikembangkan.

Hasil akhirnya adalah extension pribadi yang saya beri nama Pro HTML Editor for Gmail. Di bawah lapisan itu, arsitekturnya juga tidak rumit: manifest.json memakai Manifest V3, content.js menyisipkan tombol ke toolbar compose Gmail, lalu membuka editor.html di dalam modal iframe. Editornya memakai CodeMirror supaya menempel HTML terasa nyaman, lalu hasilnya dikirim kembali ke draft lewat postMessage. Ada juga mode aman sederhana untuk membersihkan elemen berisiko seperti script dan iframe sebelum HTML diterapkan.

Saya sempat tertahan di bagian yang terdengar sepele: menemukan selector toolbar Gmail yang tepat, memastikan tombol tidak duplikat saat compose baru muncul, dan menjaga agar HTML masuk ke compose box yang sedang aktif. DOM Gmail berubah-ubah, jadi saya juga memakai MutationObserver agar tombol tetap muncul di window compose baru. Justru di detail-detail kecil seperti inilah diskusi dengan AI terasa paling berguna.

Yang Membuat Saya Terkejut

Hal yang paling mengejutkan bukan proses menulis kode itu sendiri. Yang mengejutkan adalah saya ternyata mampu memahami teknologi baru jauh lebih cepat daripada yang saya bayangkan. Setiap kali menemukan kendala, saya berdiskusi dengan AI. Ketika ada error, kami mencari penyebabnya bersama. Ketika satu pendekatan kurang tepat, kami coba alternatif lain.

Prosesnya terasa seperti pair programming. Bedanya, partner saya adalah AI.

Vibe Coding Mengubah Cara Saya Belajar

Dulu saya merasa harus memahami semua teori dulu sebelum mulai membuat sesuatu. Sekarang polanya terbalik: saya lebih memilih membangun dulu, lalu belajar sambil memperbaiki. Pendekatan itu membuat belajar terasa lebih menyenangkan. Saya tidak lagi segan mencoba teknologi yang benar-benar baru, karena tahu ada AI yang bisa membantu saat menemui jalan buntu.

Penutup

Project ini bukan Chrome Extension paling canggih, dan fiturnya memang sengaja sederhana. Tapi bagi saya artinya berbeda: ini Chrome Extension pertama yang pernah saya buat. Saya memulainya tanpa pengalaman sebelumnya, lalu menyelesaikannya lewat kombinasi rasa penasaran, kebutuhan pribadi, dan bantuan AI dengan pendekatan vibe coding.

Pengalaman ini membuat saya semakin yakin bahwa hambatan terbesar dalam belajar teknologi baru bukan lagi keterbatasan informasi. Hambatan terbesar justru keberanian untuk memulai.