Mijn droom Google Chrome-extensie bestond niet, dus heb ik hem samen met Claude gecodeerd

Ik beschouw mezelf als een deskundige uitsteller. Door de jaren heen heb ik geen gebrek aan hulpmiddelen en technieken geprobeerd om dit probleem op te lossen. Pomodoro-timers, afleidingsblokkeringen, minimalistische schrijf-apps. De meeste zijn goed ontworpen en doen precies wat ze beloven. Ze helpen je de tijd bij te houden en stimuleren focus. Wat ze niet doen, is het afdwingen.

Bijna al deze tools zijn gebaseerd op dezelfde veronderstelling dat zodra je een timer start, je het zult volhouden. Dat je geen nieuw tabblad opent, geen notificatie bekijkt of niet verstrikt raakt in de 'nog eentje dan'-val. In de praktijk is dat veel moeilijker. Op het moment dat je aandacht verslapt, kan de tool niet reageren. Dus in plaats van door te gaan met het gebruik van bestaande productiviteitstools, besloot ik de ene functie te bouwen waarvan ik het gevoel had dat deze ontbrak.

Een Pomodoro-timer die focus afdwingt

Het is niet alleen een timer meer, maar eerder een focusassistent

Het concept is eenvoudig: een Pomodoro-timer die niet alleen focussessies meet, maar ook bepaalt hoe de browser zich tijdens deze sessies gedraagt.

In plaats van elke sessie op dezelfde manier te behandelen, introduceert de extensie verschillende "focusniveaus." Elk niveau geeft aan hoe streng de sessie zou moeten zijn, en de browser reageert dienovereenkomstig. In een meer ontspannen modus kan het wisselen van tabbladen zonder beperkingen toegestaan zijn. In een strengere modus kan de extensie je waarschuwen wanneer je probeert je huidige tabblad te verlaten of de actie volledig voorkomen.

Ik weet hoe "groot" mijn wilskracht is. Dus het belangrijkste idee is om de last van discipline weg te verplaatsen van het moment van afleiding. In plaats van te vertrouwen op wilskracht tijdens de sessie, neem ik vooraf een beslissing over hoeveel flexibiliteit ik wil, en de extensie handhaaft die beslissing.

Het definiëren van de reikwijdte van het project

Mindmap van de functies

Een van de eenvoudigste fouten die je kunt maken bij een project als dit is het vanaf het begin over-engineeren ervan. Het zou eenvoudig zijn om functies toe te voegen zoals gebruiksstatistieken, synchronisatie tussen apparaten of een complexere interface. In plaats daarvan heb ik bewust de reikwijdte beperkt gehouden.

Het doel van de eerste versie is simpelweg om het idee te valideren. Dat betekent dat er gefocust wordt op een kleine set van kernmogelijkheden: een werkende Pomodoro-timer, een manier om een focusniveau te selecteren, het vermogen om tabwisselingen te detecteren, en basis handhaving van die regels. Als die onderdelen betrouwbaar samenwerken, is de extensie al nuttig. Alles daarbovenop kan later worden toegevoegd.

Vibe coderen met Claude

Mijn vertrouwde programmeermaatje in actie

In plaats van de hele extensie handmatig te schrijven, benaderde ik dit als een experiment in AI-ondersteunde ontwikkeling.

De workflow is opzettelijk eenvoudig. Ik verdeel het project in kleine, duidelijk gedefinieerde stappen, en laat Claude vervolgens de code voor elk onderdeel genereren. Daarna voer ik de code lokaal uit, test ik hoe het zich gedraagt en breng ik waar nodig aanpassingen aan.

Beginnen met de basis

Voordat je timers of focusregels toevoegt, is de eerste stap eenvoudigweg een Chrome-extensie laten werken. Dat betekent het opzetten van een geldig manifestbestand, de extensie in de browser laden en bevestigen dat het een basisinterface kan weergeven. Het is een kleine stap, maar een belangrijke. Zodra die basis is gelegd, kunnen we beginnen met het toevoegen van daadwerkelijke functionaliteit.

Om dingen voorspelbaar te houden, gaf ik Claude een zeer specifieke prompt. Het maken van een goed doordachte prompt is cruciale kennis voor vibe-codering.

Create a minimal Chrome extension using Manifest V3.

Requirements:
- Include a valid manifest.json file
- Add a simple popup UI (popup.html)
- The popup should display a title: "Pomodoro Tab"
- Include a short placeholder text below the title: "Extension loaded successfully"
- Keep the structure simple and clean
- No external libraries or frameworks
- Use plain HTML, CSS, and JavaScript only
- Organize files clearly (manifest.json, popup.html, optional popup.js)

Make sure the extension can be loaded into Chrome without errors.

Claude gaf me zoals verwacht drie verschillende bestanden. Het meest verrassende deel was de popup-UI. In plaats van een eenvoudige HTML-bestand, genereerde Claude een volledig gestileerde interface, compleet met aangepaste lettertypen, een kleurenpalet, subtiele animaties en een kleine visuele identiteit (inclusief het tomatenpictogram).

De Pomodoro-timer toevoegen

Als de extensie correct wordt geladen, is de volgende stap om deze functioneel te maken.

In dit stadium is het doel niet om de volledige ervaring te bouwen, maar om de kernmechaniek te introduceren: een werkende Pomodoro-timer. Dat betekent het toevoegen van een aftelling, basisbedieningselementen en een manier om te schakelen tussen werk- en pauzesessies.

Aangezien we al een popup-gebruikersinterface hebben, is de taak nu om deze uit te breiden zonder te breken wat er al is. Deze keer moet de prompt zorgvuldiger zijn. In plaats van Claude te vragen om een timer te 'maken', vragen we het om:

Werk met de bestaande bestanden
Wijzig ze zorgvuldig
Houd de huidige UI intact
Laagfunctionaliteit bovenop

Hier is de prompt:

You are working on an existing Chrome extension project called "Pomodoro Tab".

The project already includes:
- manifest.json (Manifest V3, correctly configured)
- popup.html (UI already styled and working)
- popup.js (basic script with a small animation)

Your task is to EXTEND the existing codebase by adding a basic Pomodoro timer.

Do NOT rewrite everything from scratch. Modify and build on top of the existing files.

Requirements:

1. Timer functionality:
- Add a countdown timer (default: 25 minutes for work, 5 minutes for break)
- Display the remaining time clearly in the popup (MM:SS format)
- Include a "Start" button and a "Reset" button
- When the timer ends, automatically switch between work and break sessions

2. UI updates:
- Integrate the timer display into the existing popup.html
- Keep the current design and styling intact as much as possible
- Add buttons in a clean and minimal way (no heavy redesign)

3. JavaScript logic:
- Add timer logic inside popup.js (or split into a new file if clearly needed)
- Use setInterval or similar approach for countdown
- Ensure the timer updates the UI in real time
- Handle start, reset, and session switching cleanly

4. Code quality:
- Keep the code simple and readable
- Do not introduce unnecessary complexity
- No external libraries or frameworks

5. Output format:
- Show the FULL updated code for:
  - popup.html
  - popup.js
- Only include manifest.json if changes are required (otherwise leave it unchanged)

The result should be a working Pomodoro timer inside the existing extension popup.

Claude produceerde wat mooi resultaat. Ik heb nu een functionele Pomodoro-timer die ik kan starten met een timer van 25 minuten, pauzeren en resetten. Er was een probleem waarbij, nadat ik de timer had gestart, als ik de extensie sloot of van tab wisselde, deze stopte en ik hem opnieuw moest starten. Ik legde dit uit aan Claude met een vervolgprompt, en het probleem werd opgelost.

Detecteren van tabbladwisselingen

Met een betrouwbare timer op zijn plaats, is de volgende stap om het gedrag van de gebruiker te observeren. Specifiek moeten we weten wanneer de gebruiker van tabblad wisselt. Het gedrag is eenvoudig:

Wanneer de timer loopt en de harde modus is ingeschakeld
Als ik probeer van tabblad te wisselen
De browser dwingt me onmiddellijk terug naar het oorspronkelijke tabblad

Hier is de prompt die ik heb gebruikt:

You are working on an existing Chrome extension called "Pomodoro Tab".

Current architecture:
- background.js handles all timer logic and state using chrome.storage and chrome.alarms
- popup.js is a UI layer that communicates with background.js
- Timer persists correctly even when popup is closed

Your task is to EXTEND the project by adding a "Hard Mode" that prevents tab switching during an active session.

Do NOT rewrite existing code. Build on top of it.

Requirements:

1. Hard Mode Toggle (UI):
- Add a checkbox or toggle in popup.html labeled "Hard Mode"
- When enabled, store this setting in chrome.storage
- Default should be OFF

2. Track the active "focus tab":
- When the user starts the timer, store the current active tab ID as the "locked" tab

3. Enforce tab locking:
- In background.js, listen to chrome.tabs.onActivated
- If:
  - timer is running AND
  - hard mode is enabled AND
  - user switches to a different tab
- Then immediately switch them back to the locked tab using chrome.tabs.update

4. Edge cases:
- If the locked tab is closed, disable enforcement gracefully
- Do not crash or spam errors

5. Code structure:
- Keep logic inside background.js
- Keep popup.js focused on UI and messaging
- Use chrome.storage for persistence

6. Permissions:
- Add only necessary permissions (e.g., "tabs")

7. Output:
- Show updated:
  - popup.html
  - popup.js (if changed)
  - background.js
  - manifest.json (if changed)

Goal:
When Hard Mode is enabled and the timer is running, the user should not be able to leave the original tab.

Het implementeren van de harde modus bleek minder eenvoudig dan verwacht. Op papier is het idee simpel: detecteer een tabbladwissel en schakel onmiddellijk terug. In de praktijk zijn er echter een paar bewegende onderdelen: toestandsbeheer, tabbladcontext en timing. Dat alles moet correct op elkaar aansluiten.

De eerste versie die Claude genereerde werkte helemaal niet. De tweede werkte inconsistent. Pas na een paar iteraties werkte het betrouwbaar.

Een eenvoudige maar krachtige productiviteitstool

De meeste productiviteitstools zijn ontworpen om je te helpen gefocust te blijven. Maar toen ik dit product vibe-codeerde, ging ik ervan uit dat dat niet het geval zou zijn. Het gebruik van Claude om het te bouwen werkte over het algemeen goed, hoewel er een paar valkuilen onderweg waren. Je kunt de volledige code op mijn GitHub vinden.