TL;DR
Ich habe eine kleine Browser‑Extension gebaut, die ablenkende Websites automatisch überblendet, sobald mein LLM (Claude Code) mit einer Aufgabe fertig ist. In der Praxis verliere ich genau in diesem Moment oft den Fokus, weil ich „kurz“ etwas google oder YouTube öffne und aus einer Minute werden dann fünf. blockr löst das mit einem weichen Overlay, das sich in Echtzeit ein‑ und ausschaltet, ohne Reload. Wichtigste Erkenntnis: Schrittweise entwickeln schlägt „one shot“: die robuste Lösung entstand in kleinen, überprüfbaren Iterationen.
Kontext & Ziel
Auslöser war diese Woche ein YouTube‑Video, in dem jemand einen Website‑Blocker genau für den Moment gebaut hat, wenn das Claude Code „fertig“ nachgedacht oder programmiert hat. Das trifft mein Arbeitsmuster: Ich arbeite jede Woche mit Claude Code; während das Modell rechnet oder schreibt, rutsche ich schnell in einen „Micro‑Break“, der sich oft dehnt. Ziel der Woche: Eine minimalinvasive Extension, die mich sanft daran erinnert, den Faden nicht zu verlieren, indem sie definierte Websites überlagert, exakt wenn Claude Code den Status „fertig/idle“ erreicht.
Meine Anforderungen
- Die Extension überlagert ablenkende Seiten mit einem Overlay, statt sie hart zu blockieren
- Der Wechsel soll ohne Reload funktionieren und sofort sichtbar sein
- Eine einfache Liste erlaubt mir, eigene Domains hinzuzufügen oder zu entfernen
- Die Bedienung ist schlicht und funktional, ohne Setup‑Hürden
- Sobald Claude denkt, werden die Seiten wieder freigegeben
Mein AI-Workflow
Ich habe mit Claude Code entwickelt und bewusst drei Ansätze ausprobiert.
Zuerst habe ich „alles auf einmal“ an Claude Code gegeben und dann versucht das Ergebnis zu debuggen.
Dann habe ich ihm ein ähnliches Open‑Source‑Beispiel gegeben und wieder versucht zu debuggen.
Zum Schluss habe ich Claude Code erst aufgetragen eine einfache Extension zu bauen, die dauerhaft Websites blockiert, und diese dann Stück für Stück erweitert.
Stabil und debug‑bar war nur der dritte Weg: sehr einfache Basis bauen und dann Schritt für Schritt erweitern. Das Blogbild ist wie immer mit ChatGPT entstanden.
Was die Extension kann
👉 blockr verbindet sich mit einem kleinen Status‑Server und lauscht per WebSocket auf den aktuellen Claude‑Code‑Status.
👉 Sobald Claude von „working“ auf „idle“ wechselt, werden alle gerade offenen, ablenkenden Seiten mit einem Overlay belegt: die Inhalte bleiben dahinter sichtbar, aber ich werde freundlich daran erinnert, zurück in meinen Task zu gehen.
👉 In der Popup‑Ansicht sehe ich, ob Claude arbeitet, inaktiv ist oder nicht verbunden, und kann die Blockierung mit einem Schalter aktivieren oder pausieren.
👉In den Optionen verwalte ich meine Domain‑Liste, füge neue Seiten hinzu oder entferne alte, ohne technisches Vorwissen zu brauchen.
Das Wichtigste: Alles passiert live, ohne dass ich Tabs neu laden muss. Der Wechsel fühlt sich unmittelbar an. Und wenn Claude wieder „denkt“, verschwindet das Overlay automatisch, so dass ich bei Bedarf schnell etwas nachschlagen kann. 🙂
Stack & Tools
- WebExtension (Browser‑Extension, Background‑Script, Content‑Script, Popup, Optionen)
- Node.js mit Express für die Web‑API
- WebSocket‑Push für Status‑Updates
- MariaDB zur Protokollierung und aktuellem Status je Extension
- Webhooks aus Claude Code (Start/Stop) binden den Schreib‑/Denk‑Zustand an die API
Herausforderungen & Learnings
Drei Vorgehensweisen getestet; inkrementelles Bauen mit laufender, minimalen Version als Startpunkt war am zuverlässigsten
Hook‑Probleme durch mehrere settings.json an unterschiedlichen Orten; Ursache war eine Verwechslung zwischen globaler und lokaler Datei
Sofortige Reaktion in allen Tabs erforderte robustes Messaging zwischen Background‑ und Content‑Skripten
Stabile WebSocket‑Reconnect‑Logik wichtig, um Offline‑Phasen des Servers zuverlässig abzufangen
Keine Live-Demo
Es handelt sich um eine Browser‑Extension, die lokal in meinem Profil läuft, also keine Demo. 🙁
Fazit
Woche 20: ✅
Das Projekt war diese Woche etwas komplexer in der Umsetzung, als ich geplant hatte. Ich hätte die Extension gerne noch um OpenAI Codex erweitert, damit sie nicht nur mit Claude Code funktioniert. Mal schauen, ob ich das in einer der nächsten Woche noch hinzufüge, oder ob mir das so reicht. Nächste Woche darf es dann gerne weniger debuggen sein! 😉
