MothNote: Google-Chrome-Neuer-Tab-Erweiterung als All-in-One-Dashboard mit ordnerbasiertem Notizsystem sowie Uhr-, Wetter- und Kalender-Widgets

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

🦋 MothNote Screenshot der MothNote-Notizdetailseite Screenshot der MothNote-Wetterdetailseite Vorstellungsartikel zu MothNote im lunamoth 4th Blog MothNote GitHub (Da GeekNews anscheinend keine Bildausgabe unterstützt, verlinke ich sie.) MothNote ist eine Google-Chrome-Neuer-Tab-Erweiterung als All-in-One-Dashboard, die ein ordnerbasiertes Notizsystem um Widgets für Uhr, Wetter und Kalender erweitert. Entwicklungsprozess Mit MothNote kann man direkt im neuen Tab von Google Chrome schnell Notizen schreiben und außerdem Uhr/Kalender/Wetter/Temperatur auf einen Blick sehen. Nachdem ich die Erweiterung LunaTools mit 15 Funktionen erstellt hatte, kam mir plötzlich der Gedanke, einmal eine Neuer-Tab-Erweiterung zu bauen, und so habe ich damit angefangen. Ich bin kein Entwickler und kenne mich mit Programmierung überhaupt nicht aus, aber ich habe am 25. Juli 2025 in Google AI Studio (Web) mit Google Gemini 2.5 Pro begonnen und etwa 38 Tage lang entwickelt, bis ich am 1. September 2025 releasen konnte. Der Codeumfang ohne externe Bibliotheken beträgt 7.385 Zeilen. Weil es praktisch schien, direkt im meistgesehenen neuen Tab Notizen schreiben zu können, habe ich zuerst eine Notiz-App mit einer 3-Spalten-Struktur gebaut, wie man sie aus vielen Projektmanagement-Tools kennt. Unterstützung für Solarized-Light-/Dark-Themes wurde eingebaut, und inspiriert von der Tabliss-Erweiterung habe ich eine digitale Uhr, eine analoge Uhr, Wetter und Temperatur ergänzt sowie für die Nutzung als Tagebuch auch einen Kalender hinzugefügt. Außerdem habe ich Fokusmodus und Zen-Modus eingebaut, wie sie in Schreib-Apps häufig umgesetzt werden. Dazu kommen Layout-Einstellungen, Editor-Schrifteinstellungen, Wetter-Stadteinstellungen sowie Funktionen für Datensicherung und Wiederherstellung. Zwischendurch hatte ich Unterstützung für Multi-Tab-Synchronisierung eingebaut, dann aber verstanden, was Overengineering ist, und das wieder zurückgerollt. Ich erinnere mich auch daran, dass ich den Begriff „atomare Operation“ erst bei der Implementierung kennengelernt habe. Ich dachte auch, dass es gut wäre, die bereits früher erstellte Wetterdetailseite zu integrieren, und habe sie deshalb hinzugefügt. Markdown wollte ich ursprünglich nicht unterstützen, aber nachdem ich gelernt hatte, wie man externe Bibliotheken verwendet, habe ich einen Markdown-Ansichtsmodus ergänzt. (Erst Snakdown, dann Wechsel zu Marked) Als Standardordner habe ich PARA sowie von Bullet Notes empfohlene Ordner hinterlegt. Eine Nutzung im Stil von Todo.txt scheint ebenfalls möglich zu sein. Ich hatte zuvor Simplenote genutzt, und weil auch eine Datenmigration möglich schien, habe ich außerdem eine Datenmigrationsfunktion für JSON-Backup-Dateien von Simplenote ergänzt. Vor ein paar Tagen habe ich zudem von der unlimitedStorage-Berechtigung erfahren, mit der man nicht auf das lokale Speicherlimit von 10 MB beschränkt ist, und diese ebenfalls angewendet. Zu den Ideen, die mir während der Entwicklung gekommen sind, gehörten Tags, mehrstufige Ordner, ein WYSIWYG-Editor, Wiki-artige Links, Aufgaben-Checkboxen, eine Artikelscraping-Funktion mit Readability.js sowie Google-Drive-Integration und mehr. Künftig möchte ich vor allem sinnvolle Funktionen weiter ausbauen. Nach einem ziemlich langen Prozess zur Fehlerbehebung schien es mir inzwischen brauchbar genug für einen Release. Es dürfte ganz nützlich sein. Probiert es gern aus und gebt mir Feedback zu Funktionsverbesserungen und Bug-Reports. (Ich würde mich über Antworten auf Bluesky, Twitter oder Threads freuen.) Hauptfunktionen (Die folgende Funktionsbeschreibung wurde von Gemini 2.5 Pro anhand des Quellcodes von MothNote erstellt.) All-in-One-Dashboard: Alle wichtigen Informationen im neuen Tab auf einen Blick. Uhr: Eine schön gestaltete analoge Uhr und eine gut lesbare digitale Uhr. Detaillierte Wetterinformationen: Mit einem Klick auf das Dashboard-Widget zum Wetterexperten werden. Wochenvorhersage: Auf einer eigenen Seite lassen sich Änderungen der Tageshöchst- und -tiefsttemperaturen der Woche zusammen mit visuellen Charts auf einen Blick erfassen; zusätzlich gibt es schöne Hintergrundeffekte mit Regen oder Schnee passend zum aktuellen Wetter. Stündliche Detailinformationen: Klickt man auf die Vorhersagekarte eines bestimmten Datums, werden Temperatur, Wetterverlauf und Niederschlagswahrscheinlichkeit für diesen Tag als detaillierte Liste und als Chart angezeigt. Standorteinstellung: Neben der Suche nach Städtenamen kann man Breiten- und Längengrad direkt eingeben und so das Wetter für jeden beliebigen Ort weltweit festlegen. Kalender mit Notizverknüpfung: Daten mit vorhandenen Notizen werden unterstrichen angezeigt; beim Darüberfahren mit der Maus kann man den Notiztitel vorab sehen, und per Klick lassen sich sofort alle Notizen dieses Tages gesammelt anzeigen. Leistungsstarkes Notizsystem: Gedanken systematisch mit einer ordnerbasierten Struktur organisieren und Notizen effizient über eine 3-Panel-UI verwalten. Markdown-Unterstützung: Mit einfacher Syntax wie #, *, ** formatierte Notizen schreiben und per Knopfdruck in eine sauber gerenderte Vorschau umschalten. Produktiver Editor: Am unteren Rand des Editors werden detaillierte Informationen wie Zeichen-/Wort-/Zeilenzahl sowie Erstellungs-/Änderungsdatum in Echtzeit angezeigt, und mit der Tab-Taste ist Einrücken/Ausrücken möglich. Automatisches und manuelles Speichern: Inhalte werden automatisch gespeichert, wenn man mit dem Tippen aufhört; mit dem Shortcut Ctrl+S (Mac: Cmd+S) kann jederzeit sofort manuell gespeichert werden. Komfortfunktionen: Bleibt der Titel leer, wird automatisch die erste Zeile des Inhalts als Titel verwendet. Hohe Nutzerfreiheit und Komfort: Verschiedene Funktionen zur Maximierung der Produktivität. Benutzereinstellungen: Light-/Dark-Theme, Editor-Schrift/-größe und weitere Darstellungseinstellungen lassen sich dem eigenen Geschmack anpassen; außerdem können alle Einstellungen zurückgesetzt werden. Dynamische UI: Nicht nur über das Einstellungsmenü, sondern auch per Mausziehen lassen sich die Breiten der Panels und des Zen-Modus intuitiv anpassen. Erweiterte Notizverwaltung: Bietet Suche in Notizen (einschließlich Hervorhebung der Suchbegriffe), Sortierung sowie Funktionen zum Anheften wichtiger Notizen und Favorisieren. Intuitive Verschiebung: Per Drag-and-Drop kann man die Reihenfolge von Ordnern ändern oder Notizen leicht in andere Ordner verschieben. (Notizen können direkt durch Ziehen in den Papierkorb-/Favoritenordner gelöscht bzw. hinzugefügt werden.) Zen Mode für konzentriertes Arbeiten: Blendet alle Umgebungselemente aus und schafft eine Umgebung, in der man sich ausschließlich auf das Schreiben konzentrieren kann. Papierkorb und Wiederherstellung: Gelöschte Elemente werden in den Papierkorb verschoben und können bei der Wiederherstellung sicher zurückgeholt werden, wobei Namenskonflikte automatisch erkannt und gelöst werden. Datensicherung und Wiederherstellung: Alle Daten können sicher in einer einzelnen JSON-Datei gesichert und wiederhergestellt werden. Der Import von Simplenote-Backup-Dateien (JSON) wird unterstützt; neue Daten werden dabei sicher in einem neuen Ordner hinzugefügt, ohne bestehende Daten zu überschreiben. Tastatur-Shortcuts: Verschiedene Aufgaben wie das Erstellen neuer Ordner/Notizen, Umbenennen oder Navigieren in Listen lassen sich schnell allein mit der Tastatur ausführen. Datenstabilität und Zuverlässigkeit: Schützt die wertvollen Daten der Nutzer sicher. Daten werden im lokalen Speicher des Webbrowsers gespeichert. Warnung vor Datenverlust: Wenn man die Seite mit ungespeicherten Änderungen schließen möchte, erscheint ein Warnfenster, um Datenverlust zu verhindern. Notfall-Wiederherstellung: Wenn der Browser unerwartet beendet wird, werden die letzten ungespeicherten Änderungen temporär gesichert, und beim nächsten Start wird gefragt, ob sie wiederhergestellt werden sollen. Automatische Datenprüfung: Beim Start der App wird die Datenintegrität geprüft; falls Probleme gefunden werden, werden sie automatisch behoben, um die Stabilität zu erhalten. Installationsanleitung Auf der GitHub-Seite im Release-Bereich die neueste Release-Datei herunterladen und entpacken. In die Adressleiste des Chrome-Browsers chrome://extensions eingeben, zur Verwaltungsseite wechseln und den Entwicklermodus aktivieren. Auf Entpackte Erweiterung laden klicken und den in Schritt 1 entpackten Ordner auswählen; damit ist die Installation abgeschlossen. Man kann den Ordner auch per Drag-and-Drop auf die Verwaltungsseite für Erweiterungen ziehen. (Der Ordner darf anschließend übrigens nicht gelöscht werden.) Update-Verlauf 2025-09-01 16:15 // Release 17.58, erste Veröffentlichung

(github.com/lunamoth)

5 Punkte von lunamoth 2025-09-01 | 3 Kommentare | Auf WhatsApp teilen

🦋 MothNote

(Da GeekNews anscheinend keine Bildausgabe unterstützt, verlinke ich sie.)

MothNote ist eine Google-Chrome-Neuer-Tab-Erweiterung als All-in-One-Dashboard, die ein ordnerbasiertes Notizsystem um Widgets für Uhr, Wetter und Kalender erweitert.

Entwicklungsprozess

Mit MothNote kann man direkt im neuen Tab von Google Chrome schnell Notizen schreiben und außerdem Uhr/Kalender/Wetter/Temperatur auf einen Blick sehen. Nachdem ich die Erweiterung LunaTools mit 15 Funktionen erstellt hatte, kam mir plötzlich der Gedanke, einmal eine Neuer-Tab-Erweiterung zu bauen, und so habe ich damit angefangen.

Ich bin kein Entwickler und kenne mich mit Programmierung überhaupt nicht aus, aber ich habe am 25. Juli 2025 in Google AI Studio (Web) mit Google Gemini 2.5 Pro begonnen und etwa 38 Tage lang entwickelt, bis ich am 1. September 2025 releasen konnte. Der Codeumfang ohne externe Bibliotheken beträgt 7.385 Zeilen.

Weil es praktisch schien, direkt im meistgesehenen neuen Tab Notizen schreiben zu können, habe ich zuerst eine Notiz-App mit einer 3-Spalten-Struktur gebaut, wie man sie aus vielen Projektmanagement-Tools kennt. Unterstützung für Solarized-Light-/Dark-Themes wurde eingebaut, und inspiriert von der Tabliss-Erweiterung habe ich eine digitale Uhr, eine analoge Uhr, Wetter und Temperatur ergänzt sowie für die Nutzung als Tagebuch auch einen Kalender hinzugefügt.

Außerdem habe ich Fokusmodus und Zen-Modus eingebaut, wie sie in Schreib-Apps häufig umgesetzt werden. Dazu kommen Layout-Einstellungen, Editor-Schrifteinstellungen, Wetter-Stadteinstellungen sowie Funktionen für Datensicherung und Wiederherstellung.

Zwischendurch hatte ich Unterstützung für Multi-Tab-Synchronisierung eingebaut, dann aber verstanden, was Overengineering ist, und das wieder zurückgerollt. Ich erinnere mich auch daran, dass ich den Begriff „atomare Operation“ erst bei der Implementierung kennengelernt habe.

Ich dachte auch, dass es gut wäre, die bereits früher erstellte Wetterdetailseite zu integrieren, und habe sie deshalb hinzugefügt. Markdown wollte ich ursprünglich nicht unterstützen, aber nachdem ich gelernt hatte, wie man externe Bibliotheken verwendet, habe ich einen Markdown-Ansichtsmodus ergänzt. (Erst Snakdown, dann Wechsel zu Marked)

Als Standardordner habe ich PARA sowie von Bullet Notes empfohlene Ordner hinterlegt. Eine Nutzung im Stil von Todo.txt scheint ebenfalls möglich zu sein.

Ich hatte zuvor Simplenote genutzt, und weil auch eine Datenmigration möglich schien, habe ich außerdem eine Datenmigrationsfunktion für JSON-Backup-Dateien von Simplenote ergänzt. Vor ein paar Tagen habe ich zudem von der unlimitedStorage-Berechtigung erfahren, mit der man nicht auf das lokale Speicherlimit von 10 MB beschränkt ist, und diese ebenfalls angewendet.

Zu den Ideen, die mir während der Entwicklung gekommen sind, gehörten Tags, mehrstufige Ordner, ein WYSIWYG-Editor, Wiki-artige Links, Aufgaben-Checkboxen, eine Artikelscraping-Funktion mit Readability.js sowie Google-Drive-Integration und mehr. Künftig möchte ich vor allem sinnvolle Funktionen weiter ausbauen.

Nach einem ziemlich langen Prozess zur Fehlerbehebung schien es mir inzwischen brauchbar genug für einen Release. Es dürfte ganz nützlich sein. Probiert es gern aus und gebt mir Feedback zu Funktionsverbesserungen und Bug-Reports. (Ich würde mich über Antworten auf Bluesky, Twitter oder Threads freuen.)

Hauptfunktionen

(Die folgende Funktionsbeschreibung wurde von Gemini 2.5 Pro anhand des Quellcodes von MothNote erstellt.)

All-in-One-Dashboard: Alle wichtigen Informationen im neuen Tab auf einen Blick.
- Uhr: Eine schön gestaltete analoge Uhr und eine gut lesbare digitale Uhr.
- Detaillierte Wetterinformationen: Mit einem Klick auf das Dashboard-Widget zum Wetterexperten werden.
  - Wochenvorhersage: Auf einer eigenen Seite lassen sich Änderungen der Tageshöchst- und -tiefsttemperaturen der Woche zusammen mit visuellen Charts auf einen Blick erfassen; zusätzlich gibt es schöne Hintergrundeffekte mit Regen oder Schnee passend zum aktuellen Wetter.
  - Stündliche Detailinformationen: Klickt man auf die Vorhersagekarte eines bestimmten Datums, werden Temperatur, Wetterverlauf und Niederschlagswahrscheinlichkeit für diesen Tag als detaillierte Liste und als Chart angezeigt.
  - Standorteinstellung: Neben der Suche nach Städtenamen kann man Breiten- und Längengrad direkt eingeben und so das Wetter für jeden beliebigen Ort weltweit festlegen.
- Kalender mit Notizverknüpfung: Daten mit vorhandenen Notizen werden unterstrichen angezeigt; beim Darüberfahren mit der Maus kann man den Notiztitel vorab sehen, und per Klick lassen sich sofort alle Notizen dieses Tages gesammelt anzeigen.
Leistungsstarkes Notizsystem: Gedanken systematisch mit einer ordnerbasierten Struktur organisieren und Notizen effizient über eine 3-Panel-UI verwalten.
- Markdown-Unterstützung: Mit einfacher Syntax wie #, *, ** formatierte Notizen schreiben und per Knopfdruck in eine sauber gerenderte Vorschau umschalten.
- Produktiver Editor: Am unteren Rand des Editors werden detaillierte Informationen wie Zeichen-/Wort-/Zeilenzahl sowie Erstellungs-/Änderungsdatum in Echtzeit angezeigt, und mit der Tab-Taste ist Einrücken/Ausrücken möglich.
- Automatisches und manuelles Speichern: Inhalte werden automatisch gespeichert, wenn man mit dem Tippen aufhört; mit dem Shortcut Ctrl+S (Mac: Cmd+S) kann jederzeit sofort manuell gespeichert werden.
- Komfortfunktionen: Bleibt der Titel leer, wird automatisch die erste Zeile des Inhalts als Titel verwendet.
Hohe Nutzerfreiheit und Komfort: Verschiedene Funktionen zur Maximierung der Produktivität.
- Benutzereinstellungen: Light-/Dark-Theme, Editor-Schrift/-größe und weitere Darstellungseinstellungen lassen sich dem eigenen Geschmack anpassen; außerdem können alle Einstellungen zurückgesetzt werden.
- Dynamische UI: Nicht nur über das Einstellungsmenü, sondern auch per Mausziehen lassen sich die Breiten der Panels und des Zen-Modus intuitiv anpassen.
- Erweiterte Notizverwaltung: Bietet Suche in Notizen (einschließlich Hervorhebung der Suchbegriffe), Sortierung sowie Funktionen zum Anheften wichtiger Notizen und Favorisieren.
- Intuitive Verschiebung: Per Drag-and-Drop kann man die Reihenfolge von Ordnern ändern oder Notizen leicht in andere Ordner verschieben. (Notizen können direkt durch Ziehen in den Papierkorb-/Favoritenordner gelöscht bzw. hinzugefügt werden.)
- Zen Mode für konzentriertes Arbeiten: Blendet alle Umgebungselemente aus und schafft eine Umgebung, in der man sich ausschließlich auf das Schreiben konzentrieren kann.
- Papierkorb und Wiederherstellung: Gelöschte Elemente werden in den Papierkorb verschoben und können bei der Wiederherstellung sicher zurückgeholt werden, wobei Namenskonflikte automatisch erkannt und gelöst werden.
- Datensicherung und Wiederherstellung: Alle Daten können sicher in einer einzelnen JSON-Datei gesichert und wiederhergestellt werden. Der Import von Simplenote-Backup-Dateien (JSON) wird unterstützt; neue Daten werden dabei sicher in einem neuen Ordner hinzugefügt, ohne bestehende Daten zu überschreiben.
- Tastatur-Shortcuts: Verschiedene Aufgaben wie das Erstellen neuer Ordner/Notizen, Umbenennen oder Navigieren in Listen lassen sich schnell allein mit der Tastatur ausführen.
Datenstabilität und Zuverlässigkeit: Schützt die wertvollen Daten der Nutzer sicher.
- Daten werden im lokalen Speicher des Webbrowsers gespeichert.
- Warnung vor Datenverlust: Wenn man die Seite mit ungespeicherten Änderungen schließen möchte, erscheint ein Warnfenster, um Datenverlust zu verhindern.
- Notfall-Wiederherstellung: Wenn der Browser unerwartet beendet wird, werden die letzten ungespeicherten Änderungen temporär gesichert, und beim nächsten Start wird gefragt, ob sie wiederhergestellt werden sollen.
- Automatische Datenprüfung: Beim Start der App wird die Datenintegrität geprüft; falls Probleme gefunden werden, werden sie automatisch behoben, um die Stabilität zu erhalten.

Installationsanleitung

Auf der GitHub-Seite im Release-Bereich die neueste Release-Datei herunterladen und entpacken.
In die Adressleiste des Chrome-Browsers chrome://extensions eingeben, zur Verwaltungsseite wechseln und den Entwicklermodus aktivieren.
Auf Entpackte Erweiterung laden klicken und den in Schritt 1 entpackten Ordner auswählen; damit ist die Installation abgeschlossen. Man kann den Ordner auch per Drag-and-Drop auf die Verwaltungsseite für Erweiterungen ziehen. (Der Ordner darf anschließend übrigens nicht gelöscht werden.)

Update-Verlauf

2025-09-01 16:15 // Release 17.58, erste Veröffentlichung

3 Kommentare

lunamoth 2025-09-01

Ups, in der URL des ersten Screenshot-Links war ein Tippfehler;

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

ist korrekt.

xguru 2025-09-01

Ich habe es korrigiert.