MothNote, une extension Google Chrome pour le nouvel onglet qui ajoute des widgets d’horloge, météo et calendrier à un système de notes basé sur des dossiers, pour un tableau de bord tout-en-un

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

🦋 MothNote Capture d’écran de la page de détail des notes MothNote Capture d’écran de la page de détail météo de MothNote Article de présentation de MothNote sur le 4e blog de lunamoth GitHub de MothNote (Il semble que GeekNews ne prenne pas en charge l’affichage des images, donc je mets des liens.) MothNote est une extension Google Chrome pour le nouvel onglet qui combine un système de notes basé sur des dossiers avec des widgets d’horloge, de météo et de calendrier dans un tableau de bord tout-en-un. Processus de développement Avec MothNote, vous pouvez écrire rapidement des notes directement depuis le nouvel onglet de Google Chrome, tout en consultant immédiatement l’horloge, le calendrier, la météo ou encore la température. Après avoir créé l’extension LunaTools, qui propose 15 fonctionnalités, je me suis soudain demandé pourquoi ne pas essayer de créer une extension pour le nouvel onglet, et c’est ainsi que j’ai commencé ce projet. Je ne suis pas développeur et je ne connais absolument rien à la programmation, mais j’ai commencé à le créer le 25 juillet 2025 avec Google Gemini 2.5 Pro dans Google AI Studio (web), puis après environ 38 jours de développement, il est sorti le 1er septembre 2025. Le code, hors bibliothèques externes, compte 7 385 lignes. Comme il me semblait pratique de pouvoir écrire des notes directement depuis le nouvel onglet, celui qu’on voit le plus souvent, j’ai d’abord commencé par créer une application de notes avec une structure en trois colonnes, comme on en voit dans de nombreux outils de gestion de projet. J’y ai ajouté la prise en charge des thèmes Solarized Light/Dark, puis, en m’inspirant de l’extension Tabliss, j’ai intégré une horloge numérique, une horloge analogique, la météo et la température, ainsi qu’un calendrier pour un usage de journal personnel. J’ai aussi ajouté un mode focus et un mode zen, comme on en trouve souvent dans les applications d’écriture. Les réglages de mise en page, les paramètres de police de l’éditeur, les paramètres de ville pour la météo, ainsi que les fonctions de sauvegarde/restauration des données sont également pris en charge. À un moment, j’avais ajouté la synchronisation multi-onglets, avant de comprendre ce qu’était l’over-engineering et de revenir en arrière. Je me souviens aussi avoir découvert au passage la notion d’« opération atomique » en essayant de l’implémenter. Je me suis dit qu’il serait intéressant d’y intégrer aussi la page détaillée météo que j’avais créée auparavant, alors je l’ai ajoutée. Je ne comptais pas prendre en charge le Markdown, mais comme j’ai appris à utiliser des bibliothèques externes, j’ai finalement ajouté un mode d’affichage Markdown. (d’abord avec Snakdown, puis remplacé par Marked) J’ai défini par défaut des dossiers inspirés de PARA et de ceux recommandés par le bullet journal. Cela semble aussi permettre un usage de type Todo.txt. J’utilisais auparavant Simplenote, et comme une migration des données semblait possible, j’ai aussi ajouté une fonction de migration des données à partir des fichiers de sauvegarde JSON de Simplenote. Il y a quelques jours, j’ai également découvert la permission unlimitedStorage, qui permet d’éviter la limite de 10 Mo du stockage local et d’utiliser un espace illimité, et je l’ai appliquée. Parmi les idées apparues pendant le développement, il y avait notamment les tags, les dossiers multi-niveaux, un éditeur WYSIWYG, l’introduction de liens de type wiki, des cases à cocher pour les tâches, une fonction de capture d’articles avec Readability.js, ou encore une intégration Google Drive. À l’avenir, je pense mettre à jour surtout les fonctionnalités qui auront une réelle utilité. J’ai passé pas mal de temps à corriger les bugs, et comme c’est devenu plutôt utilisable, je me suis décidé à le publier. C’est à mon avis déjà assez pratique. N’hésitez pas à l’essayer et à me faire part de suggestions d’amélioration ou de rapports de bugs. (Je vous serais reconnaissant de répondre via Bluesky, Twitter ou Threads.) Principales fonctionnalités (La description des fonctionnalités ci-dessous a été rédigée par Gemini 2.5 Pro après analyse du code source de MothNote.) Tableau de bord tout-en-un : consultez en un coup d’œil toutes les informations utiles depuis le nouvel onglet. Horloge : fournit une horloge analogique au design élégant et une horloge numérique très lisible. Informations météo détaillées : devenez un expert de la météo en un clic sur le widget du tableau de bord. Prévisions hebdomadaires : une page dédiée permet de visualiser d’un coup d’œil l’évolution des températures maximales et minimales de la semaine à l’aide de graphiques, avec en plus de beaux effets d’arrière-plan de pluie ou de neige selon la météo actuelle. Détails par heure : en cliquant sur la carte de prévision d’une date donnée, vous obtenez la température par heure, l’évolution de la météo et le risque de précipitations pour cette journée, sous forme de liste détaillée et de graphique. Réglage de l’emplacement : en plus de la recherche par nom de ville, il est possible de saisir directement la latitude et la longitude pour définir la météo de n’importe quelle région du monde. Calendrier relié aux notes : les dates auxquelles des notes ont été rédigées sont soulignées, et au survol de la souris, un aperçu du titre de la note s’affiche ; un clic permet de rassembler instantanément toutes les notes de cette date. Système de notes puissant : organisez vos idées de manière structurée grâce à un système basé sur des dossiers et gérez efficacement vos notes avec une interface en trois panneaux. Prise en charge du Markdown : rédigez des notes mises en forme avec une syntaxe simple comme #, *, **, puis passez en un clic à un aperçu proprement rendu. Éditeur orienté productivité : consultez en temps réel, au bas de l’éditeur, des informations détaillées comme le nombre de caractères, de mots, de lignes, ainsi que les dates de création et de modification, et utilisez la touche Tab pour indenter/désindenter. Sauvegarde automatique et manuelle : le contenu est sauvegardé automatiquement lorsque vous arrêtez de taper, et vous pouvez aussi forcer une sauvegarde immédiate à tout moment avec le raccourci Ctrl+S (Mac : Cmd+S). Fonctions pratiques : si le titre est laissé vide, la première ligne du contenu devient automatiquement le titre. Grande liberté d’utilisation et confort : de nombreuses fonctionnalités sont proposées pour maximiser la productivité. Personnalisation : modifiez l’apparence de l’application selon vos préférences, avec thèmes clair/sombre, police et taille de l’éditeur, etc., et réinitialisez tous les paramètres si besoin. Interface dynamique : non seulement via le menu des paramètres, mais aussi grâce au glisser-déposer de la souris, vous pouvez ajuster intuitivement la largeur des panneaux et du mode zen. Gestion avancée des notes : fonctions de recherche (avec surlignage des termes), tri, épinglage des notes importantes et favoris. Déplacement intuitif : réorganisez l’ordre des dossiers ou déplacez facilement des notes vers d’autres dossiers par glisser-déposer. (Vous pouvez aussi faire glisser une note vers la corbeille ou le dossier Favoris pour la supprimer ou l’ajouter directement.) Mode zen pour la concentration (Zen Mode) : offre un environnement où tous les éléments autour disparaissent pour vous permettre de vous concentrer uniquement sur l’écriture. Corbeille et restauration : les éléments supprimés sont déplacés dans la corbeille, et lors de la restauration, les conflits de noms sont automatiquement détectés et résolus pour une récupération sûre. Sauvegarde et restauration des données : toutes les données peuvent être sauvegardées et restaurées en toute sécurité dans un unique fichier JSON. L’import des fichiers de sauvegarde Simplenote (JSON) est pris en charge, et les nouvelles données sont ajoutées en toute sécurité dans un nouveau dossier sans écraser les données existantes. Raccourcis clavier : création de nouveaux dossiers/notes, renommage, navigation dans les listes et bien d’autres actions peuvent être effectués rapidement au clavier seul. Stabilité et fiabilité des données : protège en toute sécurité vos données précieuses. Les données sont enregistrées dans le stockage local du navigateur web. Alerte anti-perte : si vous tentez de fermer la page alors qu’il reste des modifications non enregistrées, une alerte s’affiche pour éviter toute perte de données. Fonction de récupération d’urgence : en cas de fermeture anormale du navigateur, les dernières modifications non enregistrées sont temporairement sauvegardées, puis lors du prochain lancement, il vous est demandé si vous souhaitez les restaurer. Vérification automatique des données : au lancement de l’application, l’intégrité des données est vérifiée, et si un problème est détecté, une réparation automatique est effectuée pour maintenir la stabilité. Installation Sur la page GitHub, récupérez le dernier fichier de release dans la section des releases, puis décompressez-le. Dans la barre d’adresse de Chrome, saisissez chrome://extensions pour ouvrir la page de gestion, puis activez le mode développeur. Cliquez sur le bouton permettant de charger une extension décompressée, puis sélectionnez le dossier décompressé à l’étape 1 pour terminer l’installation. Vous pouvez aussi faire glisser ce dossier sur la page de gestion des extensions. (À noter : il ne faut pas supprimer ce dossier.) Historique des mises à jour 2025-09-01 16:15 // release 17.58, première release

(github.com/lunamoth)

5 points par lunamoth 2025-09-01 | 3 commentaires | Partager sur WhatsApp

🦋 MothNote

(Il semble que GeekNews ne prenne pas en charge l’affichage des images, donc je mets des liens.)

MothNote est une extension Google Chrome pour le nouvel onglet qui combine un système de notes basé sur des dossiers avec des widgets d’horloge, de météo et de calendrier dans un tableau de bord tout-en-un.

Processus de développement

Avec MothNote, vous pouvez écrire rapidement des notes directement depuis le nouvel onglet de Google Chrome, tout en consultant immédiatement l’horloge, le calendrier, la météo ou encore la température. Après avoir créé l’extension LunaTools, qui propose 15 fonctionnalités, je me suis soudain demandé pourquoi ne pas essayer de créer une extension pour le nouvel onglet, et c’est ainsi que j’ai commencé ce projet.

Je ne suis pas développeur et je ne connais absolument rien à la programmation, mais j’ai commencé à le créer le 25 juillet 2025 avec Google Gemini 2.5 Pro dans Google AI Studio (web), puis après environ 38 jours de développement, il est sorti le 1er septembre 2025. Le code, hors bibliothèques externes, compte 7 385 lignes.

Comme il me semblait pratique de pouvoir écrire des notes directement depuis le nouvel onglet, celui qu’on voit le plus souvent, j’ai d’abord commencé par créer une application de notes avec une structure en trois colonnes, comme on en voit dans de nombreux outils de gestion de projet. J’y ai ajouté la prise en charge des thèmes Solarized Light/Dark, puis, en m’inspirant de l’extension Tabliss, j’ai intégré une horloge numérique, une horloge analogique, la météo et la température, ainsi qu’un calendrier pour un usage de journal personnel.

J’ai aussi ajouté un mode focus et un mode zen, comme on en trouve souvent dans les applications d’écriture. Les réglages de mise en page, les paramètres de police de l’éditeur, les paramètres de ville pour la météo, ainsi que les fonctions de sauvegarde/restauration des données sont également pris en charge.

À un moment, j’avais ajouté la synchronisation multi-onglets, avant de comprendre ce qu’était l’over-engineering et de revenir en arrière. Je me souviens aussi avoir découvert au passage la notion d’« opération atomique » en essayant de l’implémenter.

Je me suis dit qu’il serait intéressant d’y intégrer aussi la page détaillée météo que j’avais créée auparavant, alors je l’ai ajoutée. Je ne comptais pas prendre en charge le Markdown, mais comme j’ai appris à utiliser des bibliothèques externes, j’ai finalement ajouté un mode d’affichage Markdown. (d’abord avec Snakdown, puis remplacé par Marked)

J’ai défini par défaut des dossiers inspirés de PARA et de ceux recommandés par le bullet journal. Cela semble aussi permettre un usage de type Todo.txt.

J’utilisais auparavant Simplenote, et comme une migration des données semblait possible, j’ai aussi ajouté une fonction de migration des données à partir des fichiers de sauvegarde JSON de Simplenote. Il y a quelques jours, j’ai également découvert la permission unlimitedStorage, qui permet d’éviter la limite de 10 Mo du stockage local et d’utiliser un espace illimité, et je l’ai appliquée.

Parmi les idées apparues pendant le développement, il y avait notamment les tags, les dossiers multi-niveaux, un éditeur WYSIWYG, l’introduction de liens de type wiki, des cases à cocher pour les tâches, une fonction de capture d’articles avec Readability.js, ou encore une intégration Google Drive. À l’avenir, je pense mettre à jour surtout les fonctionnalités qui auront une réelle utilité.

J’ai passé pas mal de temps à corriger les bugs, et comme c’est devenu plutôt utilisable, je me suis décidé à le publier. C’est à mon avis déjà assez pratique. N’hésitez pas à l’essayer et à me faire part de suggestions d’amélioration ou de rapports de bugs. (Je vous serais reconnaissant de répondre via Bluesky, Twitter ou Threads.)

Principales fonctionnalités

(La description des fonctionnalités ci-dessous a été rédigée par Gemini 2.5 Pro après analyse du code source de MothNote.)

Tableau de bord tout-en-un : consultez en un coup d’œil toutes les informations utiles depuis le nouvel onglet.
- Horloge : fournit une horloge analogique au design élégant et une horloge numérique très lisible.
- Informations météo détaillées : devenez un expert de la météo en un clic sur le widget du tableau de bord.
  - Prévisions hebdomadaires : une page dédiée permet de visualiser d’un coup d’œil l’évolution des températures maximales et minimales de la semaine à l’aide de graphiques, avec en plus de beaux effets d’arrière-plan de pluie ou de neige selon la météo actuelle.
  - Détails par heure : en cliquant sur la carte de prévision d’une date donnée, vous obtenez la température par heure, l’évolution de la météo et le risque de précipitations pour cette journée, sous forme de liste détaillée et de graphique.
  - Réglage de l’emplacement : en plus de la recherche par nom de ville, il est possible de saisir directement la latitude et la longitude pour définir la météo de n’importe quelle région du monde.
- Calendrier relié aux notes : les dates auxquelles des notes ont été rédigées sont soulignées, et au survol de la souris, un aperçu du titre de la note s’affiche ; un clic permet de rassembler instantanément toutes les notes de cette date.
Système de notes puissant : organisez vos idées de manière structurée grâce à un système basé sur des dossiers et gérez efficacement vos notes avec une interface en trois panneaux.
- Prise en charge du Markdown : rédigez des notes mises en forme avec une syntaxe simple comme #, *, **, puis passez en un clic à un aperçu proprement rendu.
- Éditeur orienté productivité : consultez en temps réel, au bas de l’éditeur, des informations détaillées comme le nombre de caractères, de mots, de lignes, ainsi que les dates de création et de modification, et utilisez la touche Tab pour indenter/désindenter.
- Sauvegarde automatique et manuelle : le contenu est sauvegardé automatiquement lorsque vous arrêtez de taper, et vous pouvez aussi forcer une sauvegarde immédiate à tout moment avec le raccourci Ctrl+S (Mac : Cmd+S).
- Fonctions pratiques : si le titre est laissé vide, la première ligne du contenu devient automatiquement le titre.
Grande liberté d’utilisation et confort : de nombreuses fonctionnalités sont proposées pour maximiser la productivité.
- Personnalisation : modifiez l’apparence de l’application selon vos préférences, avec thèmes clair/sombre, police et taille de l’éditeur, etc., et réinitialisez tous les paramètres si besoin.
- Interface dynamique : non seulement via le menu des paramètres, mais aussi grâce au glisser-déposer de la souris, vous pouvez ajuster intuitivement la largeur des panneaux et du mode zen.
- Gestion avancée des notes : fonctions de recherche (avec surlignage des termes), tri, épinglage des notes importantes et favoris.
- Déplacement intuitif : réorganisez l’ordre des dossiers ou déplacez facilement des notes vers d’autres dossiers par glisser-déposer. (Vous pouvez aussi faire glisser une note vers la corbeille ou le dossier Favoris pour la supprimer ou l’ajouter directement.)
- Mode zen pour la concentration (Zen Mode) : offre un environnement où tous les éléments autour disparaissent pour vous permettre de vous concentrer uniquement sur l’écriture.
- Corbeille et restauration : les éléments supprimés sont déplacés dans la corbeille, et lors de la restauration, les conflits de noms sont automatiquement détectés et résolus pour une récupération sûre.
- Sauvegarde et restauration des données : toutes les données peuvent être sauvegardées et restaurées en toute sécurité dans un unique fichier JSON. L’import des fichiers de sauvegarde Simplenote (JSON) est pris en charge, et les nouvelles données sont ajoutées en toute sécurité dans un nouveau dossier sans écraser les données existantes.
- Raccourcis clavier : création de nouveaux dossiers/notes, renommage, navigation dans les listes et bien d’autres actions peuvent être effectués rapidement au clavier seul.
Stabilité et fiabilité des données : protège en toute sécurité vos données précieuses.
- Les données sont enregistrées dans le stockage local du navigateur web.
- Alerte anti-perte : si vous tentez de fermer la page alors qu’il reste des modifications non enregistrées, une alerte s’affiche pour éviter toute perte de données.
- Fonction de récupération d’urgence : en cas de fermeture anormale du navigateur, les dernières modifications non enregistrées sont temporairement sauvegardées, puis lors du prochain lancement, il vous est demandé si vous souhaitez les restaurer.
- Vérification automatique des données : au lancement de l’application, l’intégrité des données est vérifiée, et si un problème est détecté, une réparation automatique est effectuée pour maintenir la stabilité.

Installation

Sur la page GitHub, récupérez le dernier fichier de release dans la section des releases, puis décompressez-le.
Dans la barre d’adresse de Chrome, saisissez chrome://extensions pour ouvrir la page de gestion, puis activez le mode développeur.
Cliquez sur le bouton permettant de charger une extension décompressée, puis sélectionnez le dossier décompressé à l’étape 1 pour terminer l’installation. Vous pouvez aussi faire glisser ce dossier sur la page de gestion des extensions. (À noter : il ne faut pas supprimer ce dossier.)

Historique des mises à jour

2025-09-01 16:15 // release 17.58, première release

3 commentaires

lunamoth 2025-09-01

Ah, il y avait une faute de frappe dans l’URL du lien de la première capture d’écran ;

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

La voici.

xguru 2025-09-01

Je l’ai corrigé.