6. Pomodoro Extension¶
6.1. Einleitung¶
Für unser letztes Projekt haben wir lange nach einer guten Idee gesucht. Wir wollten etwas ganz Neues machen, mit dem noch niemand von uns Erfahrung hatte, und etwas, das bei uns auch tatsächlich zum Einsatz kommen soll, ähnlich wie schon beim Git-Game. Uns ist ein Problem eingefallen, das wohl fast jeder Student kennt. Man sitzt vor dem Computer und möchte eigentlich lernen. Doch dann öffnet man mal eben einen neuen Tab im Browser und schon schaut man stundenlang Youtube-Videos, liest Nachrichten oder surft auf Social Media. Viele von uns hatten schon Erfahrung mit der Pomodoro-Technik, die genau dieses Problem lösen soll. Dabei arbeitet man in festen Zeitintervallen, den sogenannten Pomodoros, und gönnt sich danach kurze Pausen. Diese Methode hilft, die Konzentration zu steigern und Ablenkungen zu minimieren. Doch was nützt eine solche Methode, wenn man sich nicht daran hält? Genau hier setzt unsere Pomodoro-Extension an. Sie soll den Nutzer durch gezieltes Blockieren von Websites auf unterschiedliche Arten, durch Blacklist und themenbasiertes Blockieren, während der Pomodoro-Phasen bei der Konzentration unterstützen. Während der Pausen kann man dann ohne Probleme wieder auf seine Lieblingsseiten zugreifen. Damit kombinieren wir Pomodoro-Logik mit Website-Blocking, um uns dann hoffentlich mit dem Endprodukt in der Prüfungsphase noch besser konzentrieren zu können und lernen dabei noch, wie typische Browser-Extensions funktionieren.
6.2. Demo¶
6.3. Grundlagen¶
6.3.1. Firefox¶
Firefox ist ein freier und quelloffener Webbrowser der von der Mozilla Foundation und ihrer Tochtergesellschaft Mozilla Corporation gegründet wurde. Er nutzt die Rendering-Engine Gecko, um Websiten anzuzeigen und unterstützt aktuelle Webstandards. Firefox ist verfügbar für Windows, macOS, Linux, Android und iOS. Die iOS-Version verwendet aufgrund von Plattformvorgaben nicht Gecko, sondern die WebKit-Engine. Nach dem Start des Projekts unter dem Namen „Phoenix“ im Jahr 2002, hat sich Firefox nach seiner Veröffentlichung im Jahr 2004 als schnelle, sichere und anpassbare Alternative zu anderen Browsern etabliert. Besondere Merkmale sind Tabbed Browsing, ein integrierter Pop-up-Blocker, zahlreiche Erweiterungen und einen Fokus auf Datenschutz und Sicherheit [MOZILLA]. Diese Gründe stellten, unter Anderem, die Grundlage Firefox als Plattform für unseren Pomodoro-Timer zu nutzen und das Add-On für Firefox zu implementieren.
6.3.2. Browser-Erweiterungen¶
Eine Browser-Erweiterung oder Extension bietet die Möglichkeit Funktionen zu gängigen Browsern wie Firefox oder auch Chrome hinzuzufügen oder zu verändern. Durch den Einsatz von HTML, CSS, JavaScript aber auch Browser APIs, kann man kleine Benutzeroberflächen erstellen und Hintergrundscripts schreiben. [MDN_DOCS] Es ist also wie eine kleine Software, die im Browser läuft und die Möglichkeit hat, direkt mit dem Seiteninhalt zu interagieren. Bekannte Beispiele für Browser-Erweiterungen sind z.B. Werbeblocker oder Passwort Manager. [TECHNAVIATOR].
6.4. Vorgehensweise¶
6.4.1. UI¶
Das Projekt umfasst zwei verschiedene UIs, einmal die grundliegende Add-On UI, die dazu dient, den Pomodoro-Timer zu starten, zu verwalten(Pause, Phase überspringen) und Einstellungen bezüglich des blockieren von ablenkenden Websiten und diejenige, die bei versuchtem Aufrufen von blockierten Websiten angezeigt wird. Beide sind in html(für die Grundstruktur)+css(für das Design)+Javascript(für die Logik) unterteilt. Ein bestimmtes Framework wird dabei aufgrund des geringen Umfangs nicht verwendet. Im Addon-UI sind dabei die Buttons mit den passenden Funktionen verknüpft, während auf der Blockierseite nur ein einziger Button existiert welcher dazu dient zur vorherigen Seite zurückzukehren. Hierzu wird im JavaScript-Code je ein Eventlistener verwendet der bei Klick eines Buttons die zugehörige Logik ausführt. Diese Syntax wird in beiden Javascript-Files für die Interaktion der UI-Komponenten verwendet.
6.4.2. Pomodoro‑Logik¶
Die Pomodoro-Logik hat sich innerhalb des Projektverlaufs verändert um sich an einen neueren Entwurf anzupassen und sich einfacher in die neue UI integrieren zu lassen. Daher haben wir eine erste Version der Logik implementiert, die sehr stabil ist und die wir in einem Verzeichnis als Referenz behalten haben. Diese wird im folgenden beschrieben.
Zu Beginn wurde mit der Klasse TimeConverter eine zentrale Komponente eingeführt die alle Umrechnungen zwischen Millisekunden, Sekunden und Minuten übernimmt. Dadurch ist sichergestellt, dass der Code DRY bleibt, die Umrechnungen konsistent sind und man sich im Folgenden auf die höhere Logik der Anwendung konzentrieren kann.
Auf dieser Grundlage wurde die Klasse Timer als generischer Countdown-Timer realisiert. Beim Anlegen wird ein Endzeitpunkt anhand des aktuellen Zeitpunkts und der gewünschten Dauer in Sekunden berechnet. Ein wiederkehrender 100‑ms-Intervall ruft die Methode tick auf, um sowohl das Pausieren als auch das Ende des Timers zuverlässig zu erkennen. Ein Pausenzustand verschiebt die Endzeit automatisch um die Dauer der Unterbrechung, und bei Ablauf der Zeit wird der übergebene Callback ausgeführt.
Die Klasse PomodoroTimer orchestriert schließlich die typischen Pomodoro-Zyklen aus Arbeits- und Pausenphasen. Sie startet mit einem Arbeitsintervall, und nach jedem Ablauf entscheidet ein interner Zähler, ob als Nächstes eine kurze oder, nach einer konfigurierten Anzahl von Zyklen, eine lange Pause ansteht. Mit jeder neuen Phase wird intern ein frischer Timer erzeugt, sodass sich ein lückenloser, sich wiederholender Ablauf ergibt.
Über die Methode getStatus() lassen sich jederzeit der aktuelle Phasen-typ (work, shortBreak, longBreak), der Pausenzustand und die verbleibende Zeit abfragen. Mit toggleSessionPaused() kann man den laufenden Timer anhalten und wieder fortsetzen.
Es wurde darauf geachtet, dass man möglichst klare Schnittstellen bereitstellt die dann im UI verwendet werden können.
Als zweite Version haben wir mittels asynchroner Funktionen (async, await) geprüft, ob die Zeit des Timers bereits erreicht ist oder ob der Nutzer die Pause- bzw. Reset-Funktion betätigt hat. Beide Versionen ermöglichen es, individuelle Zeiteinstellungen wie Arbeitszeit, Pausendauer, oder Zyklusanzahl vorzunehmen, anzuzeigen und den Timer bei Bedarf neu zu starten. Aufgrund der einfacheren Integration in die aktualisierte UI wurde schließlich die überarbeitete Timerlogik verwendet. Beide Implementierungen bilden die zentrale Logik unseres Pomodoro-Timers, wobei die zweite Version - aufbauend auf der ersten - in der aktuellen Version der Firefox-Erweiterung zum Einsatz kommt.
6.4.3. Themenbasiertes Blockieren der Websites¶
Es wurde neben dem „normalen“ Blockieren über URLS aus der „Blacklist“ auch noch das themenbasierte Blockieren von Websites implementiert. Hierbei kann der Nutzer aus vorausgewählten Themenbereichen ausählen, an denen er womöglich gerade arbeitet. Diese enthalten zum Beispiel Themen wie „Mathe“, „Programmieren“ oder „Projektmanagement“. Diese Themen haben dann im Code jeweils hardcodierte, sogennante ‚Buzzwords‘. Die aufgerufenen Websites werden auf diese Buzzwords überprüft und wenn sie keines der Wörter enthalten, wird die Website blockiert. Dadurch soll zum Beispiel sichergestellt werden, dass der Nutzer nicht von irgendwelchen Unterhaltungsseiten abgelenket wird, aber trotzdem über sein Thema recherchieren kann. Dies ist ein praktischerer Ansatz, da durch die Blacklist nie alle ablenkeden Seiten blockiert werden können, dann müsste die Liste extrem lang sein. Wenn man aber kategorisch alles blockiert, könnte das die Lernleistung einschränken. Der Nachteil dieser Methode ist aber, dass die Buzzwords nicht immer eindeutig sind und es auch zu Fehlalarmen kommen kann und, dass das durchsuchen der Seite etwas Zeit in Anspruch nimmt. Daher ist es auch optional zur Blacklist implementiert und wird in der UI als „experimentell“ gekennzeichnet.
6.5. Fazit & Ausblick¶
An diesem Projekt haben wir sehr motiviert und interessiert gearbeitet. Die Möglichkeit, Ablenkungsfrei lernen und arbeiten zu können indem man eine zusätzliche Hürde hat die verhindert dass man auf Seiten zugreift die einem nicht in seiner sinnvollen Beschäftigung weiterhelfen zugreift kann speziell für Studenten sehr hilfreich sein. Die vorliegende Extension erfüllt alle Standardanforderungen an die wir in diesem Projekt gedacht haben, als weitere Möglicheit wäre es zum Beispiel interessant, Websites von KI-Sprachmodellen untersuchen zu lassen die daraufhin einordnen ob die Seite thematisch zu dem passt was aktuell bearbeitet oder gelernt werden soll. Zudem wären auch Statistiken über die Zeit die man an einem bestimmten Tag in einer Lern oder Arbeitsphase verbracht hat interessant. Eine weitere Möglichkeit wäre es zudem, das Add-On so zu erweitern dass er zudem auch mit Chrome genutzt werden kann, da dieser Browser einen weit höheren Marktanteil als Firefox hat.
6.6. Literaturverzeichnis¶
Mozilla (o.D.) Firefox Browser: Get the browser that protects what’s important. Verfügbar unter: <https://www.mozilla.org/en-GB/firefox/new/> (Zugriff am: 10. Juni 2025)
(o.D.) What are Web Extensions. Verfügbar unter : <https://developer.mozilla.org/de/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions> (Zugriff am: 10. Juni 2025)