J’ai créé une petite extension de prise de notes avec le vibe coding

Introduction

Comme l’indique le titre, j’ai créé une petite application de notes qui peut s’ouvrir dans le panneau latéral du navigateur.
Au départ, je l’ai commencée pour mon usage personnel, mais après avoir vu le résultat obtenu au bout des trois premiers jours, je me suis dit que cela vaudrait peut-être la peine de la partager ici. J’ai donc passé une semaine à corriger des erreurs et à ajouter des fonctionnalités, ce qui m’amène à écrire ce billet aujourd’hui.

Côté utilisation et caractéristiques :

• Lancer l’application de notes avec le raccourci Alt+Shift+W
• Prendre des notes en syntaxe Markdown
• Entrer dans la fenêtre d’édition par double-clic, puis passer en mode aperçu avec ESC ou Shift+Enter
• Gestion automatique des retours à la ligne pendant la rédaction (ajout de deux espaces en fin de ligne), activable/désactivable
• Lors du collage de texte externe, conversion des retours à la ligne et du caractère ~ en ￦~ afin d’éviter les problèmes d’affichage, activable/désactivable
• Collage d’images possible avec Ctrl+V
• Possibilité d’épingler les notes voulues en haut
• Prise en charge du mode sombre

En gros, c’est à peu près tout.

Motivation du développement

Certaines personnes l’auront peut-être deviné en voyant le raccourci pour ouvrir l’application de notes, mais ce programme a été fortement influencé par l’extension Notes by Firefox, abandonnée il y a cinq ans, notamment pour le raccourci clavier et le design.
Cependant, plusieurs années après l’arrêt du développement, la saisie en coréen y est devenue étrange, et Firefox lui-même consomme aussi beaucoup plus de mémoire que Chrome. C’est ce qui m’a motivé à créer moi-même une extension similaire.

Environnement de développement

Pour l’IA, j’ai utilisé à la fois Gemini CLI et l’interface web de Gemini.
Pour les parties où le design importait peu, j’ai surtout utilisé Gemini CLI ; pour le web, je m’en servais principalement pour montrer des captures d’écran et ajuster les éléments de design, ou quand Gemini CLI s’entêtait dans une mauvaise direction et n’arrivait pas à sortir d’une impasse.

Dans les deux cas, j’ai gardé le modèle fixé sur la version stable de gemini-2.5-pro, et en consultant le tableau de bord, j’ai vu que les seuls tokens saisis dans Gemini CLI approchaient déjà les 100 millions.

J’ai géré les versions avec git afin de pouvoir revenir à un état antérieur quand l’IA détériorait le code de manière étrange. Pendant le travail, j’ai répété ce cycle : instruction -> écriture du code par Gemini CLI -> commit par Gemini CLI -> vérification manuelle du code modifié et du résultat -> instruction.

Projets pour la suite

Pour commencer, je compte sortir de la situation actuelle où tout le code JavaScript se trouve dans un seul fichier, puis effectuer un important refactoring pour le répartir dans plusieurs fichiers chargés sous forme de modules, afin de faciliter la maintenance.
Au départ, comme il ne s’agissait que d’une simple prise de notes textuelle, j’avais tout entassé dans un fichier unique, mais à mesure que le projet a grandi, il est devenu difficile de relire le code et de le modifier directement.

Parmi les fonctionnalités que j’aimerais encore ajouter, il y a la prise en charge complète des notes en WYSIWYG, la saisie et l’affichage de formules, ainsi que la possibilité de prendre des notes non seulement en Markdown mais aussi en texte brut ou en HTML.
En particulier, le support WYSIWYG améliorerait énormément le confort d’utilisation au moment de prendre des notes, donc une fois le refactoring terminé, c’est probablement la première chose que j’essaierai d’implémenter.

Et si j’en ai le temps, je pense que je pourrais aussi le porter sur Firefox pour le publier sous forme d’add-on.

Conclusion

J’utilisais déjà souvent l’IA pour de petites tâches, mais c’est la première fois que je m’en sers comme outil principal pour un projet de cette taille, et j’ai trouvé assez fascinant de voir à quel point cela fonctionnait bien.
Cela dit, je ne sais pas si le problème vient de Gemini CLI, mais pour utiliser gemini-2.5-pro sans restriction, il faut payer en utilisant une clé API, et lors de la création de ce programme, près de 100 millions de tokens ont été consommés rien qu’en entrée, ce qui m’a laissé une facture plus élevée que prévu.
Même s’il y a un système de cache qui a réduit le montant facturé par rapport au coût estimé, je ne m’attendais pas à un volume d’utilisation aussi élevé. Je pense donc qu’il faut utiliser correctement les fonctions de résumé de contexte pour pouvoir maintenir de bonnes performances.

Le développement a suffisamment avancé pour permettre un usage réel, mais comme toutes les fonctionnalités que j’avais en tête ne sont pas encore parfaitement implémentées, n’hésitez pas à l’essayer et à me faire part sans détour de vos questions ou de vos retours !

[baesku789]

Merci pour ce bon article.
Par hasard, pour 100 millions de tokens, pourriez-vous indiquer à combien le coût s’est élevé ?

[ihabis02]

Il me semble que cela m’a coûté environ 90 000 à 100 000 wons, cache compris.
Quand j’ai vérifié l’utilisation avec la commande /stats model dans Gemini CLI, le taux de cache était aussi entre 50 et 60 %, donc cela correspondait à peu près aux calculs.

[baesku789]

Merci de me l’avoir signalé~ !