Vibe coding ile basit bir not uzantısı yaptım

Giriş

Başlıktan da anlaşılacağı gibi, tarayıcının Side panel’inde açıp kullanabileceğiniz basit bir not uygulaması yaptım.
Başta yalnızca kendim kullanmak için başlamıştım, ancak ilk 3 günde ortaya çıkan sonucu görünce burada paylaşmanın da iyi olacağını düşündüm ve bir hafta boyunca hata düzeltmeleri/özellik eklemeleri yaptıktan sonra bu yazıyı yazmaya karar verdim.

Kullanım şekli ve özellikleri kısaca şöyle:

• Alt+Shift+W kısayoluyla not uygulamasını çalıştırma
• Markdown sözdizimiyle not alma
• Çift tıklamayla Edit penceresine girme, ESC veya Shift+Enter ile önizleme moduna geçme
• Yazı yazarken satır sonlarını (satırın en sonuna 2 boşluk ekleme) otomatik olarak işleme (On/Off mümkün)
• Dışarıdan metin yapıştırırken satır sonlarını ve ~ karakterini ￦~ karakterine dönüştürerek metnin bozulmamasını sağlama (On/Off mümkün)
• Ctrl+V ile görsel yapıştırabilme
• İstenilen notları üstte sabitleyebilme
• Koyu mod desteği

Kabaca bunlardan oluşuyor.

Geliştirme motivasyonu

Belki not uygulamasını açma kısayolunu görünce fark edenler olmuştur; bu program, 5 yıl önce geliştirilmesi durdurulan Notes by Firefox uzantısından, kısayolları ve tasarımı da dahil olmak üzere, büyük ölçüde etkilendi.
Ancak geliştirilmesi durduktan birkaç yıl sonra Korece girişte gariplikler yaşanmaya başladı ve Firefox’un kendisi de Chrome’a kıyasla daha fazla bellek tükettiği için, buna benzer bir uzantıyı doğrudan kendim geliştirmeye karar vermem motivasyon oldu.

Geliştirme ortamı

Yapay zeka tarafında Gemini CLI ile Gemini web sayfasını birlikte kullandım.
Tasarımın çok önemli olmadığı kısımlarda ağırlıklı olarak Gemini CLI kullandım; web tarafını ise ekran görüntüsü göstererek tasarım öğelerini ayarlamak veya Gemini CLI belirli bir yanlış cevaba saplanıp o tuzaktan çıkamadığında kullandım.

Her iki durumda da modeli resmi sürüm olan gemini-2.5-pro olarak sabitledim; panelde gördüğüm kadarıyla yalnızca Gemini CLI’de girilen token sayısı neredeyse 100 milyona yaklaştı.

Sürüm kontrolünü git ile yaptım; böylece yapay zeka kodu tuhaf biçimde bozarsa önceki sürüme geri dönebildim. Çalışırken de komut -> Gemini CLI’nin kod yazması -> Gemini CLI’nin commit atması -> değiştirilen kodu ve sonucu manuel olarak inceleme -> komut döngüsünü tekrar ettim.

Bundan sonraki planlar

Öncelikle, şu an tüm JavaScript kodunun tek bir dosyada bulunduğu durumdan çıkıp, kodu birden çok dosyaya bölerek modül biçiminde yüklenen bir yapıya geçirmek ve böylece bakımını kolaylaştırmak için kapsamlı bir refaktörizasyon yapmayı planlıyorum.
İlk başta basit bir metin notu düzeyinde başlayıp tüm kodu tek dosyaya doldurmuştum; fakat ölçek büyüdükçe kodu okuyup doğrudan düzenlemek zorlaşmaya başladı.

Eklemek istediğim özellikler arasında tam WYSIWYG not desteği, formül girişi ve gösterimi desteği, ayrıca Markdown dışında düz metin ya da HTML tabanlı olarak da not alabilme desteği var.
Özellikle WYSIWYG desteğinin not alırken kullanım kolaylığını ciddi biçimde artıracağını düşündüğüm için, refaktörizasyon bittikten sonra ilk denemek istediğim şey muhtemelen bu olacak.

Ayrıca zaman bulursam Firefox’ta da kullanılabilmesi için port edip bir eklenti olarak yayımlamayı düşünüyorum.

Kapanış

Günlük hayatta basit işler yaparken yapay zekayı sık kullanıyordum, ancak bu büyüklükte bir işte yapay zekayı ana unsur olarak kullanmam ilk kez oldu; beklediğimden daha iyi çalışması gerçekten şaşırtıcıydı.
Öte yandan sorun Gemini CLI’de mi bilmiyorum ama gemini-2.5-pro modelini sınırsız kullanmak için API anahtarı ekleyip ücret ödemek gerekiyor; bu programı geliştirirken yalnızca girdi tarafında bile neredeyse 100 milyon token tüketildiği için maliyetin düşündüğümden daha yüksek çıkması hayal kırıklığı yarattı.
Caching sayesinde tahmini tutardan daha az fatura çıktı ama bu kadar yüksek kullanım beklemediğim bir sonuçtu; bu yüzden kullanırken bağlam özetleme özelliğini uygun şekilde kullanmak gerektiğini, ancak bu sayede performansın korunabileceğini düşünüyorum.

Gerçek kullanım için yeterli seviyeye kadar geliştirildi, ancak aklımdaki tüm özellikler henüz eksiksiz biçimde uygulanmış değil; bu yüzden deneyip soru ya da geri bildiriminiz olursa lütfen hiç çekinmeden paylaşın!

[baesku789]

Güzel yazı için teşekkürler.
Bu arada, 100 milyon token için maliyetin yaklaşık ne kadar olduğunu öğrenebilir miyim?

[ihabis02]

Önbellekleme dahil yaklaşık 90~100 bin won tuttu sanırım.
Gemini CLI'da /stats model komutuyla kullanım miktarını kontrol ettiğimde de önbellek oranı %50~60 arasındaydı; hesapla da kabaca uyuşuyordu.

[baesku789]

Bilgilendirdiğiniz için teşekkürler~!