Fiz uma extensão simples de notas com vibe coding

Introdução

Como diz o título, fiz um app simples de notas que pode ser aberto e usado no Side panel do navegador.
No começo, comecei com a intenção de usar sozinho, mas depois de ver o resultado produzido nos primeiros 3 dias, pensei que talvez valesse a pena compartilhar por aqui. Então, após uma semana corrigindo erros e adicionando funções, acabei escrevendo este post.

Quanto ao modo de uso e às características:

• Executa o app de notas com o atalho Alt+Shift+W
• Permite fazer anotações com sintaxe Markdown
• Entra na janela de edição com duplo clique; muda para o modo de pré-visualização com ESC ou Shift+Enter
• Ao escrever, processa automaticamente as quebras de linha (adicionando 2 espaços no fim da linha) para você (On/Off disponível)
• Ao colar texto externo, converte quebras de linha e o caractere ~ em ￦~ para evitar que o texto quebre (On/Off disponível)
• Permite colar imagens com Ctrl+V
• Você pode fixar no topo as notas que quiser
• Suporte a modo escuro

É basicamente isso.

Motivação do desenvolvimento

Talvez algumas pessoas tenham percebido isso ao ver o atalho para abrir o app de notas, mas este programa foi fortemente influenciado pela extensão Notes by Firefox, descontinuada há 5 anos, inclusive no atalho e no design.
Só que, alguns anos depois do fim do desenvolvimento, a digitação em coreano passou a se comportar de forma estranha, e o próprio Firefox também passou a consumir bem mais memória que o Chrome. Foi isso que motivou a ideia de implementar diretamente uma extensão parecida.

Ambiente de desenvolvimento

Usei IA com o Gemini CLI e a página web do Gemini em conjunto.
Nas partes em que o design não importava tanto, usei principalmente o Gemini CLI; já na web, eu mostrava capturas de tela para ajustar elementos visuais, ou recorria a ela quando o Gemini CLI ficava preso em uma resposta errada específica e não conseguia sair desse beco sem saída.

Nos dois casos, mantive o modelo fixado na versão oficial do gemini-2.5-pro e, olhando o dashboard, vi que só os tokens de entrada usados no Gemini CLI chegaram perto de 100 milhões.

Fiz o controle de versão com git para poder voltar a uma versão anterior caso a IA acabasse estragando o código de forma estranha. Durante o trabalho, repeti o processo de comando -> escrita de código pelo Gemini CLI -> commit pelo Gemini CLI -> revisão manual do código alterado e do resultado -> comando.

Planos futuros

Antes de tudo, pretendo sair da situação atual, em que todo o código JavaScript está em um único arquivo, e fazer uma grande refatoração para separar o código em vários arquivos e carregá-lo em formato modular, facilitando a manutenção.
No começo, era apenas uma espécie de bloco simples de anotações em texto, então concentrei todo o código em um único arquivo. Mas, conforme o projeto cresceu, surgiu o problema de ficar difícil ler o código e modificá-lo diretamente.

Entre as funções que quero adicionar estão suporte completo a notas WYSIWYG, suporte para entrada e exibição de fórmulas, e a possibilidade de fazer anotações não só em Markdown, mas também em texto simples ou com base em HTML.
Acho, principalmente, que o suporte a WYSIWYG aumentaria bastante a praticidade na hora de escrever notas, então provavelmente será a primeira coisa que vou tentar implementar depois que a refatoração terminar.

E, se eu tiver tempo, talvez eu faça um port para que também possa ser usado no Firefox e publique como um add-on.

Encerrando

Eu já usava bastante IA no dia a dia para tarefas simples, mas esta foi a primeira vez que fiz um trabalho desse porte usando IA como ferramenta principal, e foi realmente impressionante ver que funcionou melhor do que eu esperava.
Por outro lado, não sei se o problema está no Gemini CLI, mas para usar o gemini-2.5-pro sem limites, a única opção prática é inserir uma chave de API e pagar pelo uso. Durante a produção deste programa, quase 100 milhões de tokens foram consumidos só em entrada, então foi decepcionante perceber que o custo saiu mais alto do que eu imaginava.
Havia cache, então o valor cobrado acabou sendo menor do que o estimado, mas eu realmente não esperava um uso tão alto. Por isso, acho que, ao usar esse tipo de ferramenta, é preciso aproveitar corretamente os recursos de resumo de contexto para manter o desempenho.

O desenvolvimento já avançou a ponto de dar para usar no dia a dia, mas como nem todas as funções que imaginei foram implementadas perfeitamente ainda, gostaria muito que vocês testassem e deixassem perguntas ou feedbacks sem rodeios, se tiverem algum!

[baesku789]

Obrigado pelo ótimo texto.
Por acaso, você poderia dizer mais ou menos quanto ficou o custo para 100 milhões de tokens?

[ihabis02]

Parece que ficou em torno de 90 a 100 mil won, incluindo o cache.
Quando verifiquei o uso com o comando /stats model no Gemini CLI, a taxa de cache também ficou entre 50% e 60%, então bateu mais ou menos com o cálculo.

[baesku789]

Obrigado por avisar~!