I imagine myself to be a professional procrastinator. Through the years, I have attempted no scarcity of gear and strategies to mend this downside. Pomodoro timers, distraction blockers, minimalist writing apps. Maximum of them are well-designed and just do what they declare. They let you monitor time and inspire focal point. What they don’t do is implement it.
The majority of those gear depend at the similar assumption that whenever you get started a timer, you’ll keep on with thru. That you just gained’t open a brand new tab, test a notification, or flow into the “only one extra” lure. In apply, it is a lot more difficult. The instant your consideration slips, the software has no strategy to reply. So, as an alternative of constant to cycle thru current productiveness gear, I determined to construct the only function I felt was once lacking.
A Pomodoro timer that enforces focal point
It is not only a timer anymore, slightly a focal point assistant
The idea that is easy: a Pomodoro timer that doesn’t simply measure focal point classes, but in addition controls how the browser behaves throughout them.
Quite than treating each and every consultation the similar, the extension introduces other “focal point ranges.” Every degree displays how strict the consultation must be, and the browser responds accordingly. In a extra comfy mode, switching tabs may well be allowed with out restriction. In a stricter mode, the extension may provide you with a warning while you attempt to depart your present tab or save you the motion fully.
I know the way “large” my self-discipline is. So, the important thing concept is to shift the load of self-discipline clear of the instant of distraction. As an alternative of depending on self-discipline throughout the consultation, I come to a decision in advance about how a lot flexibility I would like, and the extension enforces that call.
Defining the mission scope
Thoughts mapping the options
One of the crucial best possible errors to make with a mission like that is overengineering it from the beginning. It could be easy so as to add options like utilization analytics, cross-device syncing, or a extra elaborate interface. As an alternative, I intentionally stored the scope slim.
The objective for the primary model is just to validate the theory. That implies that specialize in a small set of core features: a running Pomodoro timer, some way to choose a focal point degree, the facility to discover tab switching, and elementary enforcement of the ones laws. If the ones items paintings in combination reliably, the extension is already helpful. The rest past that may be layered on later.
Vibe coding with Claude
My relied on programming friend in motion
Quite than writing all the extension manually, I approached this as an experiment in AI-assisted construction.
The workflow is deliberately easy. I smash the mission into small, obviously outlined steps, then recommended Claude to generate the code for every phase. After that, I run the code in the community, take a look at the way it behaves, and make changes the place vital.
Beginning with the fundamentals
Earlier than including timers or focal point laws, step one is just to get a Chrome extension working. That implies putting in a legitimate manifest record, loading the extension within the browser, and confirming that it could possibly show a elementary interface. It’s a small step, however crucial one. As soon as that basis is in position, we will be able to get started layering in exact capability.
To stay issues predictable, I gave Claude an overly explicit recommended. Making a well-crafted recommended is a very powerful wisdom for vibe coding.
Create a minimum Chrome extension the use of Manifest V3.
Necessities:
- Come with a legitimate manifest.json record
- Upload a easy popup UI (popup.html)
- The popup must show a identify: "Pomodoro Tab"
- Come with a brief placeholder textual content beneath the identify: "Extension loaded effectively"
- Stay the construction easy and blank
- No exterior libraries or frameworks
- Use simple HTML, CSS, and JavaScript handiest
- Prepare information obviously (manifest.json, popup.html, not obligatory popup.js)
Ensure the extension may also be loaded into Chrome with out mistakes.Claude gave me 3 other information, as anticipated. Essentially the most unexpected phase was once the popup UI. As an alternative of a barebones HTML record, Claude generated a completely styled interface, whole with customized fonts, a colour palette, refined animations, and a small visible id (together with the tomato icon.)
Including the Pomodoro Timer
With the extension loading accurately, your next step is to make it practical.
At this degree, the objective isn’t to construct the whole revel in, however to introduce the core mechanic: a running Pomodoro timer. That implies including a countdown, elementary controls, and a strategy to transfer between paintings and smash classes.
Since we have already got a popup UI, the duty now’s to increase it with out breaking what’s already there. This time, the recommended must be extra planned. As an alternative of asking Claude to “create” a timer, we’re asking it to:
- Paintings with the present information
- Alter them moderately
- Stay the present UI intact
- Layer capability on most sensible
Right here’s the recommended:
You're running on an current Chrome extension mission referred to as "Pomodoro Tab".
The mission already comprises:
- manifest.json (Manifest V3, accurately configured)
- popup.html (UI already styled and dealing)
- popup.js (elementary script with a small animation)
Your job is to EXTEND the present codebase by means of including a elementary Pomodoro timer.
Do NOT rewrite the entirety from scratch. Alter and construct on most sensible of the present information.
Necessities:
1. Timer capability:
- Upload a countdown timer (default: 25 mins for paintings, 5 mins for smash)
- Show the remainder time obviously within the popup (MM:SS layout)
- Come with a "Get started" button and a "Reset" button
- When the timer ends, routinely transfer between paintings and smash classes
2. UI updates:
- Combine the timer show into the present popup.html
- Stay the present design and styling intact up to imaginable
- Upload buttons in a blank and minimum manner (no heavy redesign)
3. JavaScript good judgment:
- Upload timer good judgment inside of popup.js (or break up into a brand new record if obviously wanted)
- Use setInterval or equivalent way for countdown
- Ensure that the timer updates the UI in actual time
- Deal with get started, reset, and consultation switching cleanly
4. Code high quality:
- Stay the code easy and readable
- Don't introduce useless complexity
- No exterior libraries or frameworks
5. Output layout:
- Display the FULL up to date code for:
- popup.html
- popup.js
- Most effective come with manifest.json if adjustments are required (differently depart it unchanged)
The end result must be a running Pomodoro timer throughout the current extension popup.
Claude produced some great output. I now have a practical Pomodoro timer that I will be able to get started with a 25-minute timer, pause, and reset. There was once an issue the place, after beginning the timer, if I closed the extension or switched tabs, it will forestall, and I needed to restart it. I defined this to Claude with a follow-up recommended, and it mounted the problem.
Detecting tab switching
With a competent timer in position, your next step is to look at consumer habits. Particularly, we wish to know when the consumer switches tabs. The habits is modest:
- When the timer is working and difficult mode is enabled
- If I attempt to transfer tabs
- The browser straight away forces me again to the unique tab
Right here’s the recommended I used:
You're running on an current Chrome extension referred to as "Pomodoro Tab".
Present structure:
- background.js handles all timer good judgment and state the use of chrome.garage and chrome.alarms
- popup.js is a UI layer that communicates with background.js
- Timer persists accurately even if popup is closed
Your job is to EXTEND the mission by means of including a "Laborious Mode" that forestalls tab switching throughout an lively consultation.
Do NOT rewrite current code. Construct on most sensible of it.
Necessities:
1. Laborious Mode Toggle (UI):
- Upload a checkbox or toggle in popup.html categorised "Laborious Mode"
- When enabled, retailer this atmosphere in chrome.garage
- Default must be OFF
2. Monitor the lively "focal point tab":
- When the consumer begins the timer, retailer the present lively tab ID because the "locked" tab
3. Put into effect tab locking:
- In background.js, pay attention to chrome.tabs.onActivated
- If:
- timer is working AND
- laborious mode is enabled AND
- consumer switches to another tab
- Then straight away transfer them again to the locked tab the use of chrome.tabs.replace
4. Edge circumstances:
- If the locked tab is closed, disable enforcement gracefully
- Don't crash or unsolicited mail mistakes
5. Code construction:
- Stay good judgment inside of background.js
- Stay popup.js all for UI and messaging
- Use chrome.garage for patience
6. Permissions:
- Upload handiest vital permissions (e.g., "tabs")
7. Output:
- Display up to date:
- popup.html
- popup.js (if modified)
- background.js
- manifest.json (if modified)
Purpose:
When Laborious Mode is enabled and the timer is working, the consumer must no longer be capable of depart the unique tab.Enforcing laborious mode became out to be much less easy than anticipated. On paper, the theory is modest: discover a tab transfer and straight away transfer again. In apply, there are a couple of shifting portions: state control, tab context, and timing. That every one must line up accurately.
The primary model Claude generated didn’t paintings in any respect. The second one labored unevenly. Most effective after a few iterations did it behave reliably.
A easy but tough productiveness software
Maximum productiveness gear are designed that will help you keep targeted. But if I vibe-coded this product, I thought that I would not. The use of Claude to construct it labored effectively general, although there have been a couple of pitfalls alongside the trail. You’ll be able to in finding the whole code on my GitHub.
