Ich habe mit Vibe Coding eine einfache Notiz-Erweiterung gebaut

Einführung

Wie der Titel schon sagt, habe ich mit Vibe Coding eine einfache Notiz-App gebaut, die sich im Side Panel des Browsers öffnen und nutzen lässt.
Ursprünglich habe ich damit nur für mich selbst angefangen, aber nachdem ich mir die Ergebnisse der ersten drei Tage angesehen hatte, dachte ich, dass es sich lohnen könnte, sie hier zu teilen. Deshalb habe ich eine Woche lang Fehler behoben und Funktionen ergänzt und schreibe nun diesen Beitrag.

Zur Nutzung und zu den Funktionen:

• Start der Notiz-App mit dem Shortcut Alt+Shift+W
• Notizen sind mit Markdown-Syntax möglich
• Per Doppelklick in das Edit-Fenster wechseln, mit ESC oder Shift+Enter in den Vorschau-Modus umschalten
• Beim Schreiben werden Zeilenumbrüche automatisch verarbeitet (am Zeilenende werden zwei Leerzeichen hinzugefügt) (On/Off möglich)
• Beim Einfügen externer Texte werden Zeilenumbrüche und das Zeichen ~ in ￦~ umgewandelt, damit der Text nicht beschädigt wird (On/Off möglich)
• Bilder können mit Ctrl+V eingefügt werden
• Gewünschte Notizen lassen sich oben anheften
• Unterstützung für Dark Mode

Das wäre es im Großen und Ganzen.

Entwicklungsmotivation

Vielleicht haben es einige schon am Shortcut zum Öffnen der Notiz-App erkannt, aber dieses Programm wurde stark von der Erweiterung Notes by Firefox beeinflusst, deren Entwicklung vor fünf Jahren eingestellt wurde — einschließlich Shortcut und Design.
Da die Entwicklung aber schon seit mehreren Jahren eingestellt ist, funktioniert die koreanische Eingabe merkwürdig, und Firefox selbst verbraucht im Vergleich zu Chrome auch deutlich mehr Speicher. Das war die Motivation, eine ähnliche Erweiterung selbst umzusetzen.

Entwicklungsumgebung

Für die AI habe ich Gemini CLI und die Gemini-Webseite parallel verwendet.
Für Bereiche, bei denen das Design nicht so wichtig war, habe ich hauptsächlich Gemini CLI genutzt. Die Webversion habe ich vor allem verwendet, wenn ich Screenshots zeigen und Designelemente anpassen wollte oder wenn sich Gemini CLI auf eine bestimmte falsche Antwort versteift hatte und aus dieser Sackgasse nicht mehr herauskam.

In beiden Fällen habe ich das Modell fest auf die offizielle Version von gemini-2.5-pro eingestellt, und laut Dashboard lagen allein die in Gemini CLI eingegebenen Tokens schon fast bei 100 Millionen.

Für die Versionsverwaltung habe ich git verwendet, damit ich zu einer früheren Version zurückkehren konnte, falls die AI den Code seltsam kaputtmachte. Während der Arbeit habe ich dabei wiederholt folgenden Ablauf durchlaufen: Anweisung -> Codegenerierung durch Gemini CLI -> Commit durch Gemini CLI -> manuelle Prüfung des geänderten Codes und der Ergebnisse -> Anweisung.

Weitere Pläne

Zunächst möchte ich die Situation beenden, in der der gesamte JavaScript-Code in einer einzigen Datei steckt, und ein umfassendes Refactoring durchführen, bei dem der Code auf mehrere Dateien aufgeteilt und modular geladen wird, damit die Wartung leichter wird.
Anfangs war das Ganze nur als einfache Textnotiz gedacht, deshalb hatte ich den Code komplett in eine einzelne Datei gepackt. Mit wachsendem Umfang wurde es jedoch immer schwieriger, den Code zu lesen und direkt zu bearbeiten.

Außerdem möchte ich noch Funktionen wie vollständige WYSIWYG-Unterstützung für Notizen, Eingabe und Darstellung von Formeln sowie die Möglichkeit ergänzen, Notizen nicht nur in Markdown, sondern auch als normalen Text oder auf HTML-Basis zu verfassen.
Vor allem die WYSIWYG-Unterstützung dürfte den Komfort beim Schreiben deutlich erhöhen, deshalb werde ich wahrscheinlich direkt nach Abschluss des Refactorings zuerst versuchen, diese Funktion umzusetzen.

Und wenn ich Zeit finde, würde ich es gern auch für Firefox portieren und als Add-on veröffentlichen.

Zum Schluss

Für kleinere Aufgaben habe ich AI schon oft genutzt, aber es ist das erste Mal, dass ich bei einem Projekt dieser Größenordnung AI als Hauptwerkzeug eingesetzt habe. Dass das besser funktioniert hat als erwartet, fand ich wirklich erstaunlich.
Etwas schade war allerdings, dass es möglicherweise ein Problem bei Gemini CLI gibt oder dass man gemini-2.5-pro ohne Einschränkungen nur mit API-Key gegen Bezahlung nutzen kann. Bei der Entwicklung dieses Programms wurden allein für die Eingaben fast 100 Millionen Tokens verbraucht, wodurch die Kosten höher ausfielen als erwartet.
Durch Caching lag der tatsächlich berechnete Betrag zwar unter dem erwarteten Preis, aber dass die Nutzung so hoch ausfallen würde, hatte ich nicht erwartet. Deshalb denke ich, dass man die Funktion zur Kontextzusammenfassung sinnvoll einsetzen sollte, um die Leistung stabil zu halten.

Die Entwicklung ist inzwischen weit genug fortgeschritten, dass man es praktisch nutzen kann. Da aber noch nicht alle geplanten Funktionen vollständig umgesetzt sind, würde ich mich freuen, wenn ihr es ausprobiert und mir ohne Zurückhaltung Fragen oder Feedback gebt!

[baesku789]

Vielen Dank für den guten Artikel.
Darf ich fragen, welche Kosten bei 100 Millionen Token ungefähr angefallen sind?

[ihabis02]

Mit Caching scheint es auf etwa 90.000 bis 100.000 Won gekommen zu sein.
Als ich die Nutzung im Gemini CLI mit dem Befehl /stats model überprüft habe, lag die Cache-Quote ebenfalls zwischen 50 und 60 %, sodass es rechnerisch auch ungefähr passte.

[baesku789]

Danke für den Hinweis~!