Saya mencoba membuat ekstensi catatan sederhana dengan vibe coding

Perkenalan

Sesuai judulnya, saya mencoba membuat aplikasi catatan sederhana yang bisa dibuka dan digunakan di Side panel browser dengan vibe coding.
Awalnya saya memulainya untuk dipakai sendiri, tetapi setelah melihat hasil yang keluar selama 3 hari pertama, saya merasa ini cukup layak untuk dibagikan di sini. Setelah seminggu memperbaiki error dan menambahkan fitur, akhirnya saya menulis postingan ini.

Cara penggunaan dan fiturnya adalah sebagai berikut.

• Menjalankan aplikasi catatan dengan shortcut Alt+Shift+W
• Bisa mencatat dengan sintaks Markdown
• Masuk ke jendela Edit dengan klik ganda, lalu beralih ke mode pratinjau dengan ESC atau Shift+Enter
• Saat menulis, pemrosesan line break (menambahkan 2 spasi di akhir baris) dilakukan secara otomatis (bisa On/Off)
• Saat menempelkan tulisan dari luar, line break dan karakter ~ akan diganti menjadi karakter ￦~ agar teks tidak rusak (bisa On/Off)
• Bisa menempelkan gambar dengan Ctrl+V
• Catatan yang diinginkan bisa dipasang di bagian atas
• Mendukung dark mode

Kurang lebih seperti itu.

Motivasi pengembangan

Mungkin ada yang sudah menyadari dari shortcut untuk membuka aplikasi catatan, tetapi program ini banyak terinspirasi dari ekstensi Notes by Firefox yang pengembangannya dihentikan 5 tahun lalu, termasuk shortcut dan desainnya.
Namun, setelah beberapa tahun sejak pengembangannya dihentikan, input bahasa Korea menjadi aneh, dan Firefox sendiri juga memakai memori lebih banyak dibanding Chrome. Karena itu, saya termotivasi untuk mencoba membuat sendiri ekstensi serupa.

Lingkungan pengembangan

Untuk AI, saya menggunakan Gemini CLI dan halaman web Gemini secara bersamaan.
Untuk bagian yang desainnya tidak terlalu penting, saya lebih banyak memakai Gemini CLI. Sementara versi web saya gunakan terutama saat menampilkan screenshot untuk menyesuaikan elemen desain, atau ketika Gemini CLI terlalu terpaku pada jawaban yang salah dan tidak bisa keluar dari jebakannya.

Dalam kedua kasus, modelnya saya kunci ke versi resmi gemini-2.5-pro, dan saat saya melihat dashboard, token input yang saya masukkan di Gemini CLI saja sudah mendekati 100 juta token.

Version control saya lakukan dengan git, sehingga jika AI merusak kode secara aneh, saya bisa mengembalikannya ke versi sebelumnya. Saat bekerja, saya mengulang proses berikut: perintah -> penulisan kode oleh Gemini CLI -> commit oleh Gemini CLI -> meninjau secara manual kode yang sudah diperbaiki beserta hasilnya -> perintah.

Rencana ke depan

Pertama-tama, saya berencana melakukan refaktor besar-besaran agar keluar dari kondisi saat ini, di mana semua kode JavaScript masih berada dalam satu file, lalu memisahkannya ke beberapa file dan memuatnya dalam bentuk modul supaya lebih mudah dipelihara.
Awalnya saya memulai dari memo teks sederhana dan menumpuk semua kode ke dalam satu file, tetapi seiring skala proyek membesar, muncul masalah bahwa kodenya menjadi sulit dibaca dan sulit diperbaiki secara langsung.

Fitur tambahan yang ingin saya masukkan antara lain dukungan memo WYSIWYG penuh, dukungan input dan penulisan rumus, serta kemampuan mencatat bukan hanya dengan Markdown tetapi juga dengan teks biasa atau berbasis HTML.
Khususnya dukungan WYSIWYG saya rasa akan sangat meningkatkan kenyamanan saat mencatat, jadi sepertinya itu akan menjadi hal pertama yang saya coba implementasikan setelah refaktor selesai.

Dan kalau ada waktu, saya rasa saya juga akan mencoba mem-porting-nya agar bisa dipakai di Firefox dan mungkin mengunggahnya sebagai add-on.

Penutup

Biasanya saya memang sering memakai AI untuk pekerjaan sederhana, tetapi ini adalah pertama kalinya saya menjadikan AI sebagai alat utama untuk pekerjaan sebesar ini. Ternyata hasilnya berjalan jauh lebih baik dari yang saya kira, jadi saya benar-benar merasa takjub.
Namun saya agak kecewa karena entah ini masalah di Gemini CLI atau bukan, jika ingin memakai gemini-2.5-pro tanpa batas, satu-satunya cara adalah memasukkan API key dan membayar sesuai pemakaian. Selama membuat program ini, hampir 100 juta token habis hanya untuk input, jadi biayanya ternyata lebih besar dari perkiraan saya.
Meski ada caching sehingga tagihan aktualnya lebih rendah daripada estimasi, saya tetap tidak menyangka penggunaan bisa sebanyak itu. Karena itu, saya pikir untuk menjaga performa saat menggunakannya, kita perlu memanfaatkan fitur ringkasan konteks dengan tepat.

Pengembangannya sudah sampai tingkat yang cukup untuk dipakai secara nyata, tetapi karena belum semua fitur yang saya bayangkan terimplementasi dengan sempurna, saya akan sangat berterima kasih jika Anda mencobanya lalu memberikan pertanyaan atau masukan apa pun secara terus terang!

[baesku789]

Terima kasih atas tulisannya.
Kalau boleh tahu, untuk 100 juta token biayanya kira-kira berapa?

[ihabis02]

Sepertinya totalnya sekitar 90 ribu hingga 100 ribu won, termasuk caching.
Saat saya memeriksa penggunaan dengan perintah '/stats model' di Gemini CLI, rasio cache juga berada di kisaran 50~60%, jadi perhitungannya kurang lebih cocok.

[baesku789]

Terima kasih sudah memberi tahu~!