Hice una extensión de notas sencilla con vibe coding

Introducción

Como dice el título, hice una app de notas sencilla que se puede abrir y usar en el panel lateral del navegador.
Al principio la empecé para usarla yo solo, pero después de ver el resultado de los primeros 3 días, pensé que valía la pena compartirla aquí, así que tras una semana de corrección de errores y agregado de funciones terminé escribiendo este post.

En cuanto a cómo se usa y sus características:

• Ejecuta la app de notas con el atajo Alt+Shift+W
• Permite tomar notas con sintaxis Markdown
• Entras a la ventana de edición con doble clic, y cambias al modo de vista previa con ESC o Shift+Enter
• Al escribir, procesa automáticamente los saltos de línea (agregando 2 espacios al final de cada línea) para que funcionen bien en Markdown (se puede activar/desactivar)
• Al pegar texto externo, convierte los saltos de línea y el carácter ~ a ￦~ para evitar que el texto se rompa (se puede activar/desactivar)
• Permite pegar imágenes con Ctrl+V
• Puedes fijar las notas que quieras en la parte superior
• Soporta modo oscuro

Eso sería básicamente.

Motivación de desarrollo

Quizá algunas personas lo notaron al ver el atajo para abrir la app, pero este programa estuvo muy influenciado por la extensión Notes by Firefox, cuyo desarrollo se detuvo hace 5 años, incluyendo tanto el atajo como el diseño.
Sin embargo, como ya habían pasado varios años desde que se dejó de desarrollar, la entrada de texto en coreano empezó a comportarse de forma extraña, y además Firefox en sí consumía bastante más memoria que Chrome, así que eso me motivó a intentar implementar por mi cuenta una extensión similar.

Entorno de desarrollo

Para la IA usé tanto Gemini CLI como la página web de Gemini.
En las partes donde el diseño no importaba demasiado usé principalmente Gemini CLI, y la web la usaba sobre todo para ajustar elementos de diseño mostrando capturas de pantalla, o cuando Gemini CLI se aferraba a una respuesta equivocada específica y no podía salir de ese callejón sin salida.

En ambos casos fijé el modelo en la versión oficial de gemini-2.5-pro, y al revisar el dashboard vi que solo los tokens de entrada usados en Gemini CLI ya se acercaban casi a los 100 millones de tokens.

Llevé el control de versiones con git para poder volver a una versión anterior si la IA llegaba a estropear el código de forma rara, y durante el trabajo repetí este proceso: instrucción -> escritura de código por Gemini CLI -> commit de Gemini CLI -> revisión manual del código corregido y del resultado -> instrucción.

Planes a futuro

Primero, pienso salir de la situación actual en la que todo el código JavaScript está metido en un solo archivo, y hacer una refactorización grande para dividirlo en varios archivos y cargarlos en formato modular, de modo que el mantenimiento sea más sencillo.
Al principio empezó como una simple nota de texto y metí todo el código en un solo archivo, pero conforme creció fueron apareciendo problemas para leer el código y modificarlo directamente.

Y entre las funciones que me gustaría agregar están el soporte completo para notas WYSIWYG, soporte para entrada y visualización de fórmulas, y la posibilidad de tomar notas no solo en Markdown sino también en texto plano o con base en HTML.
En particular, creo que el soporte WYSIWYG mejoraría mucho la comodidad al tomar notas, así que probablemente sea lo primero que intente implementar después de terminar la refactorización.

Y si tengo tiempo, quizá intente portarlo para que también pueda usarse en Firefox y subirlo como addon.

Para cerrar

Normalmente usaba bastante la IA para tareas sencillas, pero esta es la primera vez que la uso como herramienta principal en un trabajo de este tamaño, y me sorprendió mucho lo bien que funcionó.
Eso sí, no sé si sea un problema de Gemini CLI, pero para usar gemini-2.5-pro sin límites solo se puede pagando y usando una API key, y durante la creación de este programa se consumieron casi 100 millones de tokens solo de entrada, así que fue una lástima que el costo terminara siendo más alto de lo que esperaba.
Gracias al caché, el monto facturado fue menor que el estimado, pero como no esperaba para nada un uso tan alto, creo que al utilizarlo hay que aprovechar bien la función de resumen de contexto para poder mantener el rendimiento.

Aunque ya está desarrollado hasta un punto en el que se puede usar en la práctica, todavía no todas las funciones que imaginé están implementadas por completo, así que si lo prueban y tienen preguntas o comentarios, ¡me gustaría que me los compartieran sin filtros!

[baesku789]

Gracias por el buen artículo.
¿Podrías decirnos más o menos cuánto costó si fueron 100 millones de tokens?

[ihabis02]

Parece que, incluyendo el caché, salió en unos 90 mil a 100 mil wones.
Cuando revisé el uso con el comando /stats model en Gemini CLI, la tasa de caché también estaba entre 50% y 60%, así que más o menos cuadraba con el cálculo.

[baesku789]

¡Gracias por avisar~!