MothNote: extensão de nova aba do Google Chrome com dashboard tudo-em-um que adiciona widgets de relógio, clima e calendário a um sistema de notas baseado em pastas

lunamoth · 2025-09-01T16:42:57+09:00

🦋 MothNote Captura de tela da página detalhada de notas do MothNote Captura de tela da página detalhada de clima do MothNote Post de apresentação do MothNote no blog lunamoth 4th MothNote GitHub (Parece que o GeekNews não oferece suporte para exibir imagens, então estou deixando em links.) O MothNote é uma extensão de nova aba do Google Chrome com um dashboard tudo-em-um que adiciona widgets de relógio, clima e calendário a um sistema de notas baseado em pastas. Processo de desenvolvimento No MothNote, você pode escrever notas rapidamente direto na nova aba do Google Chrome e também visualizar com agilidade relógio/calendário/clima/temperatura etc. Depois de criar a extensão LunaTools, com 15 funcionalidades, me veio a ideia de experimentar fazer uma extensão de nova aba, e foi assim que comecei este projeto. Não sou desenvolvedor e também não sei programar, mas comecei a criar isso em 25 de julho de 2025 usando o Google AI Studio (web) com o Google Gemini 2.5 Pro, desenvolvi por cerca de 38 dias e consegui lançar em 1º de setembro de 2025. O código, excluindo bibliotecas externas, tem 7.385 linhas. Como achei que seria conveniente poder escrever notas diretamente na nova aba, que é a tela que mais se vê, comecei primeiro criando um app de notas com estrutura de 3 colunas, como a que aparece em muitas ferramentas de gerenciamento de projetos. Adicionei suporte aos temas Solarized Light/Dark e, inspirado pela extensão Tabliss, incluí relógio digital, relógio analógico, clima e temperatura; para uso como diário, também adicionei um calendário. Também incluí modo foco e modo zen, que são bastante comuns em apps de escrita. Há suporte para configuração de layout, configuração de fonte do editor, configuração da cidade do clima e backup/restauração de dados. No meio do caminho, cheguei a implementar sincronização entre múltiplas abas, mas depois entendi o que era overengineering e acabei revertendo. Também me lembro de ter conhecido o termo "trabalho atômico" durante o processo de criar e dar suporte a isso. Achei que seria interessante integrar também a página detalhada de clima que eu já havia criado antes, então a incluí. Não pretendia oferecer suporte a Markdown, mas depois que aprendi a usar bibliotecas externas, passei a oferecer modo de visualização em Markdown. (Usei Snakdown e depois mudei para Marked.) Como valores padrão de pastas, incluí a estrutura PARA e as pastas recomendadas pelo Bullet Journal. Acho que também dá para usar no estilo Todo.txt. Eu usava Simplenote antes, e pensei que poderia ser possível migrar os dados, então também adicionei um recurso de migração a partir do arquivo de backup JSON do Simplenote. Há alguns dias, descobri a permissão unlimitedStorage, que permite usar armazenamento ilimitado em vez do limite de 10 MB do local storage, e também a apliquei. Entre as ideias que surgiram durante o desenvolvimento estavam tags, pastas multinível, editor WYSIWYG, links em estilo wiki, marcação de tarefas, captura de conteúdo com Readability.js, integração com Google Drive etc. Pretendo atualizar no futuro priorizando recursos realmente significativos. Passei bastante tempo pelo processo de correção de bugs, e agora parece ter ficado utilizável o suficiente para ser lançado. Acho que ficou bem usável. Experimentem e, se possível, mandem sugestões de melhorias e relatórios de bugs. (Ficarei grato se responderem pelo Bluesky, Twitter ou Threads.) Principais recursos (A descrição dos recursos abaixo foi escrita pelo Gemini 2.5 Pro após analisar o código-fonte do MothNote.) Dashboard tudo-em-um: veja de relance, na nova aba, todas as informações de que você precisa. Relógio: oferece um relógio analógico com design elegante e um relógio digital de alta legibilidade. Informações detalhadas de clima: torne-se um especialista em clima com apenas um clique no widget do dashboard. Previsão semanal: em uma página dedicada, é possível ver de relance as variações de temperatura máxima/mínima da semana com gráficos visuais, junto com belos efeitos de fundo de chuva ou neve de acordo com o clima atual. Informações detalhadas por horário: ao clicar no card de previsão de uma data específica, você obtém uma lista detalhada e gráficos com temperatura por horário, mudanças no clima e probabilidade de precipitação daquele dia. Configuração de localização: além de pesquisar pelo nome da cidade, é possível inserir latitude e longitude manualmente para definir o clima de qualquer lugar do mundo. Calendário integrado às notas: as datas com notas escritas aparecem sublinhadas; ao passar o mouse, é possível visualizar previamente os títulos das notas e, ao clicar, reunir instantaneamente todas as notas daquele dia. Sistema de notas poderoso: organize suas ideias de forma sistemática com base em pastas e gerencie notas com eficiência por meio de uma UI de painel em 3 colunas. Suporte a Markdown: escreva notas formatadas com sintaxe simples como #, *, ** e alterne com um clique para uma pré-visualização renderizada de forma limpa. Editor focado em produtividade: na parte inferior do editor, é possível acompanhar em tempo real informações detalhadas como número de caracteres/palavras/linhas e datas de criação/modificação, e usar a tecla Tab para indentar/desindentar. Salvamento automático e manual: o conteúdo é salvo automaticamente quando você para de digitar, e também pode ser salvo manualmente a qualquer momento com o atalho Ctrl+S (Mac: Cmd+S). Recursos de conveniência: se o título ficar em branco, a primeira linha do conteúdo vira automaticamente o título. Alta liberdade e conveniência para o usuário: há vários recursos para maximizar a produtividade. Configurações do usuário: altere a aparência do app conforme sua preferência, como tema claro/escuro e fonte/tamanho do editor, e também redefina todas as configurações. UI dinâmica: além do menu de configurações, também é possível ajustar intuitivamente a largura dos painéis e do modo zen com arrastar do mouse. Gerenciamento avançado de notas: oferece busca de notas (incluindo destaque dos termos pesquisados), ordenação, fixação de notas importantes e favoritos. Movimentação intuitiva: reordene pastas com drag and drop ou mova notas facilmente para outras pastas. (Também é possível arrastar notas para a lixeira/favoritos para excluir ou adicionar diretamente.) Modo Zen para foco (Zen Mode): oferece um ambiente em que todos os elementos ao redor ficam ocultos para que você se concentre apenas na escrita das notas. Lixeira e restauração: itens excluídos vão para a lixeira, e a restauração é feita com segurança, incluindo detecção e resolução automáticas de conflitos de nome. Backup e restauração de dados: faça backup e restaure todos os dados com segurança em um único arquivo JSON. Há suporte para importar arquivos de backup do Simplenote (JSON), adicionando-os com segurança em uma nova pasta sem sobrescrever os dados existentes. Atalhos de teclado: várias ações, como criar nova pasta/nota, renomear e navegar pela lista, podem ser feitas rapidamente só com o teclado. Estabilidade e confiabilidade dos dados: protege com segurança os dados valiosos do usuário. Os dados são armazenados no local storage do navegador. Aviso de prevenção de perda: se você tentar fechar a página com alterações não salvas, uma janela de aviso aparece para evitar perda de dados. Recuperação de emergência: em caso de encerramento anormal do navegador, as últimas alterações não salvas são preservadas em backup temporário e, na próxima execução, o app pergunta se você deseja restaurá-las. Verificação automática de dados: ao iniciar o app, a integridade dos dados é verificada e, se algum problema for encontrado, ele é corrigido automaticamente para manter a estabilidade. Como instalar Na página do GitHub, baixe o arquivo da versão mais recente na seção Releases e descompacte-o. Na barra de endereços do Chrome, digite chrome://extensions para ir à página de gerenciamento e ative o modo de desenvolvedor. Clique no botão para carregar a extensão descompactada e selecione a pasta descompactada no passo 1 para concluir a instalação. Também é possível arrastar e soltar a pasta na página de gerenciamento de extensões. (Só lembrando: essa pasta não deve ser excluída.) Histórico de atualizações 2025-09-01 16:15 // versão 17.58 lançada, primeiro lançamento

(github.com/lunamoth)

5 pontos por lunamoth 2025-09-01 | 3 comentários | Compartilhar no WhatsApp

🦋 MothNote

(Parece que o GeekNews não oferece suporte para exibir imagens, então estou deixando em links.)

O MothNote é uma extensão de nova aba do Google Chrome com um dashboard tudo-em-um que adiciona widgets de relógio, clima e calendário a um sistema de notas baseado em pastas.

Processo de desenvolvimento

No MothNote, você pode escrever notas rapidamente direto na nova aba do Google Chrome e também visualizar com agilidade relógio/calendário/clima/temperatura etc. Depois de criar a extensão LunaTools, com 15 funcionalidades, me veio a ideia de experimentar fazer uma extensão de nova aba, e foi assim que comecei este projeto.

Não sou desenvolvedor e também não sei programar, mas comecei a criar isso em 25 de julho de 2025 usando o Google AI Studio (web) com o Google Gemini 2.5 Pro, desenvolvi por cerca de 38 dias e consegui lançar em 1º de setembro de 2025. O código, excluindo bibliotecas externas, tem 7.385 linhas.

Como achei que seria conveniente poder escrever notas diretamente na nova aba, que é a tela que mais se vê, comecei primeiro criando um app de notas com estrutura de 3 colunas, como a que aparece em muitas ferramentas de gerenciamento de projetos. Adicionei suporte aos temas Solarized Light/Dark e, inspirado pela extensão Tabliss, incluí relógio digital, relógio analógico, clima e temperatura; para uso como diário, também adicionei um calendário.

Também incluí modo foco e modo zen, que são bastante comuns em apps de escrita. Há suporte para configuração de layout, configuração de fonte do editor, configuração da cidade do clima e backup/restauração de dados.

No meio do caminho, cheguei a implementar sincronização entre múltiplas abas, mas depois entendi o que era overengineering e acabei revertendo. Também me lembro de ter conhecido o termo "trabalho atômico" durante o processo de criar e dar suporte a isso.

Achei que seria interessante integrar também a página detalhada de clima que eu já havia criado antes, então a incluí. Não pretendia oferecer suporte a Markdown, mas depois que aprendi a usar bibliotecas externas, passei a oferecer modo de visualização em Markdown. (Usei Snakdown e depois mudei para Marked.)

Como valores padrão de pastas, incluí a estrutura PARA e as pastas recomendadas pelo Bullet Journal. Acho que também dá para usar no estilo Todo.txt.

Eu usava Simplenote antes, e pensei que poderia ser possível migrar os dados, então também adicionei um recurso de migração a partir do arquivo de backup JSON do Simplenote. Há alguns dias, descobri a permissão unlimitedStorage, que permite usar armazenamento ilimitado em vez do limite de 10 MB do local storage, e também a apliquei.

Entre as ideias que surgiram durante o desenvolvimento estavam tags, pastas multinível, editor WYSIWYG, links em estilo wiki, marcação de tarefas, captura de conteúdo com Readability.js, integração com Google Drive etc. Pretendo atualizar no futuro priorizando recursos realmente significativos.

Passei bastante tempo pelo processo de correção de bugs, e agora parece ter ficado utilizável o suficiente para ser lançado. Acho que ficou bem usável. Experimentem e, se possível, mandem sugestões de melhorias e relatórios de bugs. (Ficarei grato se responderem pelo Bluesky, Twitter ou Threads.)

Principais recursos

(A descrição dos recursos abaixo foi escrita pelo Gemini 2.5 Pro após analisar o código-fonte do MothNote.)

Dashboard tudo-em-um: veja de relance, na nova aba, todas as informações de que você precisa.
- Relógio: oferece um relógio analógico com design elegante e um relógio digital de alta legibilidade.
- Informações detalhadas de clima: torne-se um especialista em clima com apenas um clique no widget do dashboard.
  - Previsão semanal: em uma página dedicada, é possível ver de relance as variações de temperatura máxima/mínima da semana com gráficos visuais, junto com belos efeitos de fundo de chuva ou neve de acordo com o clima atual.
  - Informações detalhadas por horário: ao clicar no card de previsão de uma data específica, você obtém uma lista detalhada e gráficos com temperatura por horário, mudanças no clima e probabilidade de precipitação daquele dia.
  - Configuração de localização: além de pesquisar pelo nome da cidade, é possível inserir latitude e longitude manualmente para definir o clima de qualquer lugar do mundo.
- Calendário integrado às notas: as datas com notas escritas aparecem sublinhadas; ao passar o mouse, é possível visualizar previamente os títulos das notas e, ao clicar, reunir instantaneamente todas as notas daquele dia.
Sistema de notas poderoso: organize suas ideias de forma sistemática com base em pastas e gerencie notas com eficiência por meio de uma UI de painel em 3 colunas.
- Suporte a Markdown: escreva notas formatadas com sintaxe simples como #, *, ** e alterne com um clique para uma pré-visualização renderizada de forma limpa.
- Editor focado em produtividade: na parte inferior do editor, é possível acompanhar em tempo real informações detalhadas como número de caracteres/palavras/linhas e datas de criação/modificação, e usar a tecla Tab para indentar/desindentar.
- Salvamento automático e manual: o conteúdo é salvo automaticamente quando você para de digitar, e também pode ser salvo manualmente a qualquer momento com o atalho Ctrl+S (Mac: Cmd+S).
- Recursos de conveniência: se o título ficar em branco, a primeira linha do conteúdo vira automaticamente o título.
Alta liberdade e conveniência para o usuário: há vários recursos para maximizar a produtividade.
- Configurações do usuário: altere a aparência do app conforme sua preferência, como tema claro/escuro e fonte/tamanho do editor, e também redefina todas as configurações.
- UI dinâmica: além do menu de configurações, também é possível ajustar intuitivamente a largura dos painéis e do modo zen com arrastar do mouse.
- Gerenciamento avançado de notas: oferece busca de notas (incluindo destaque dos termos pesquisados), ordenação, fixação de notas importantes e favoritos.
- Movimentação intuitiva: reordene pastas com drag and drop ou mova notas facilmente para outras pastas. (Também é possível arrastar notas para a lixeira/favoritos para excluir ou adicionar diretamente.)
- Modo Zen para foco (Zen Mode): oferece um ambiente em que todos os elementos ao redor ficam ocultos para que você se concentre apenas na escrita das notas.
- Lixeira e restauração: itens excluídos vão para a lixeira, e a restauração é feita com segurança, incluindo detecção e resolução automáticas de conflitos de nome.
- Backup e restauração de dados: faça backup e restaure todos os dados com segurança em um único arquivo JSON. Há suporte para importar arquivos de backup do Simplenote (JSON), adicionando-os com segurança em uma nova pasta sem sobrescrever os dados existentes.
- Atalhos de teclado: várias ações, como criar nova pasta/nota, renomear e navegar pela lista, podem ser feitas rapidamente só com o teclado.
Estabilidade e confiabilidade dos dados: protege com segurança os dados valiosos do usuário.
- Os dados são armazenados no local storage do navegador.
- Aviso de prevenção de perda: se você tentar fechar a página com alterações não salvas, uma janela de aviso aparece para evitar perda de dados.
- Recuperação de emergência: em caso de encerramento anormal do navegador, as últimas alterações não salvas são preservadas em backup temporário e, na próxima execução, o app pergunta se você deseja restaurá-las.
- Verificação automática de dados: ao iniciar o app, a integridade dos dados é verificada e, se algum problema for encontrado, ele é corrigido automaticamente para manter a estabilidade.

Como instalar

Na página do GitHub, baixe o arquivo da versão mais recente na seção Releases e descompacte-o.
Na barra de endereços do Chrome, digite chrome://extensions para ir à página de gerenciamento e ative o modo de desenvolvedor.
Clique no botão para carregar a extensão descompactada e selecione a pasta descompactada no passo 1 para concluir a instalação. Também é possível arrastar e soltar a pasta na página de gerenciamento de extensões. (Só lembrando: essa pasta não deve ser excluída.)

Histórico de atualizações

2025-09-01 16:15 // versão 17.58 lançada, primeiro lançamento

3 comentários

lunamoth 2025-09-01

Ops, havia um erro de digitação na URL do link da primeira captura de tela;

https://raw.githubusercontent.com/lunamoth/MothNote/…

É esta.

xguru 2025-09-01

Foi corrigido.