Snippy Notes – Chrome Browser Erweiterung

Eine kleine Chrome-Erweiterung für Notizen direkt auf Webseiten.

Motivation

Ich gehöre zu den Menschen, die meistens viel zu viele Tabs im Browser geöffnet haben. Oft lasse ich eine Seite offen, weil ich dort noch etwas erledigen, nachlesen oder mir merken möchte. Ein paar Tage später weiß ich allerdings nicht mehr unbedingt, was das eigentlich war.

Dazu kommt, dass mich auf Webseiten häufig nur einzelne Textstellen interessieren. Die würde ich gerne hervorheben, kommentieren und beim nächsten Besuch direkt wiederfinden.

Also habe ich angefangen, mit einer eigenen Chrome-Erweiterung zu experimentieren: Snippy Notes.

Herangehensweise

Mir war wichtig, dass die Bedienung möglichst einfach bleibt. Ich wollte kein weiteres umfangreiches Notizsystem entwickeln, sondern eine kleine Erweiterung, die sich unkompliziert in den Browseralltag einfügt.

Es gibt zwei grundlegende Möglichkeiten: Notizen, die unabhängig vom Seiteninhalt am Bildschirm bleiben, und Notizen, die mit der Webseite scrollen. Letztere lassen sich auch mit bestimmten Textstellen verknüpfen.

Markierte Textpassagen werden in der Farbe der zugehörigen Notiz hervorgehoben. Dabei war mir wichtig, dass die Hervorhebung sowohl auf hellen als auch auf dunklen Webseiten funktioniert.

Bewusst habe ich auf Benutzerkonten und Cloud-Speicherung verzichtet. Die Notizen bleiben lokal im Browser.

Umsetzung & Learnings

Ich probiere gerne neue Technologien und Werkzeuge aus – auch dann, wenn ich vorher noch nicht damit gearbeitet habe. Mit Chrome-Erweiterungen hatte ich bis zu diesem Projekt praktisch keine Erfahrung.

Dabei habe ich festgestellt, dass der Einstieg vergleichsweise unkompliziert ist. Eine Chrome-Erweiterung besteht im Kern aus Webtechnologien wie JavaScript, HTML und CSS sowie einer manifest.json, in der unter anderem Berechtigungen und ausgeführte Skripte definiert werden.

Die eigentlichen Herausforderungen steckten für mich weniger in der Einrichtung als in den Details: Wie verknüpft man eine Notiz zuverlässig mit einer Textstelle? Wie findet man diese nach dem Neuladen wieder? Wie funktionieren Markierungen über mehrere HTML-Elemente hinweg? Und wie verhindert man, dass Notizen beim Scrollen oder Ändern der Fenstergröße ihre Position verlieren?

Auch die Veröffentlichung im Chrome Web Store war Neuland.
Dafür sind einige Schritte erforderlich:

1. Entwicklerkonto: Bei Google registrieren und die einmalige Registrierungsgebühr bezahlen.
2. Manifest V3: Die Erweiterung entsprechend den aktuellen Chrome-Anforderungen aufbauen.
3. Berechtigungen: Nur die tatsächlich benötigten Zugriffe anfordern und deren Verwendung begründen.
4. Datenschutz: Die Verarbeitung und Speicherung von Nutzerdaten dokumentieren und eine Datenschutzerklärung bereitstellen.
5. Store-Auftritt: Beschreibung, Icons, Screenshots und Werbegrafiken erstellen.
6. Prüfung: Das Erweiterungspaket hochladen und von Google freigeben lassen.

Mein wichtigstes Learning: Die einfache Idee lässt sich oft schnell umsetzen. Die eigentliche Arbeit beginnt wie immer bei den Sonderfällen, der zuverlässigen Speicherung und den vielen kleinen Details, die eine Anwendung im Alltag brauchbar machen. Wie zum Beispiel highlightet man Text auf dunklem Hintergrund?

Installation und Nutzung

Die Einrichtung ist unkompliziert:

1. Snippy Notes aus dem Chrome Web Store installieren:
   https://chrome.google.com/webstore/detail/difohghmejpnkbmdaammeddipamkbmck
2. Das Erweiterungssymbol über das Puzzle-Symbol von Chrome in der Browserleiste anheften.
3. Auf das Snippy-Notes-Symbol klicken, um eine neue Notiz anzulegen.
4. Wer vorher eine Textstelle markiert, kann die Notiz direkt mit dieser Passage verknüpfen.

Notizen lassen sich verschieben, in der Größe verändern und farblich anpassen. Über das Rechtsklick-Menü können sie außerdem gelöscht oder zwischen Scrollen und Anpinnen umgeschaltet werden.

Die Datenschutzerklärung findet sich auf dieser Seite: Datenschutz

Feedback erwünscht

Snippy Notes ist ein eigenständiges Entwicklungsprojekt von mir unter dem Label Melius. Es ist aus einem persönlichen Bedarf und der Neugier auf eine für mich neue Technologie entstanden.

Die Erweiterung wird schrittweise weiterentwickelt – auch weil mir während der Nutzung immer wieder neue Ideen kommen. Und weil hoffentlich immer mehr User tolle Ideen haben…