Tab Lock - Focus Mode

Tab Lock and focus mode: lock to one tab, Pomodoro timer with escalating breaks, breathing ritual, and leave-site guard.

Comment

Download the Extension here: https://chromewebstore.google.com/detail/tab-lock-%E2%80%93-focus-mode/npbokdoebgjaieflodjomojcekggmfeg

Inspiration

Browser tab switching is a huge attention sink: research, writing, and deep work break down when every new tab is one click away. The idea was to treat “one tab, one focus” as a first-class product: not just a timer app in another window, but something that works with Chrome’s tab model—blocking drift, nudging before hard blocks, and optionally structuring focus with Pomodoro-style cycles.

What it does

Tab Lock – Focus Mode is a Chrome extension (Manifest V3) that keeps you on a chosen focus workflow:

  • Lock Tab: Lock to the current tab (and optionally more via Manage tabs). Other tabs get a full-screen blocker; new tabs are not auto-allowed.
  • Task reminder: Optional task text shown as a draggable banner on allowed tabs.
  • Blocked-tab experience: Either a 10s breathing ritual then the lock screen, or tab lock only (immediate blocker)—user-selectable in the popup.
  • Leave-site warning on allowed tabs: confirm before navigating to a different hostname (same-site / subdomains allowed through).
  • Pomodoro mode: Repeating 60 min focus with 5 → 10 → 20 min escalating breaks; focus phases use the same lock behavior; breaks are free browsing.
  • Lifeline: Hold 5 seconds to cancel Pomodoro and unlock.
  • Chrome UI: Toolbar icon reflects locked/unlocked state; badge ON when a focus lock is active.

How we built it

  • Manifest V3 with a service worker (background.js) for lock state, Pomodoro phase timing (chrome.alarms), tab/window events, and persistence (chrome.storage.local, key unswitch-state).
  • Popup (popup/) for controls, countdown, tab manager, and preferences.
  • Content scripts (content/):
    • blocker.js (+ CSS) at document_start for the overlay on non-allowed tabs.
    • leave-domain.js at document_idle for outbound link checks.
    • Dynamic injection (from the background) for overlay (breathing) and reminder where needed.
  • Fallback blocked page (blocked/).
  • Permissions: tabs, activeTab, scripting, alarms, storage; host: <all_urls> so scripts can run on normal pages.

The README also documents a manual testing checklist for lock/unlock, Pomodoro, lifeline, and cross-window behavior.

Challenges we ran into

(Grounded in the codebase where noted; add your own team/process challenges.)

  • MV3 service worker: State must be restored from storage and kept consistent across wake/sleep; Pomodoro end times and alarms need careful handling.
  • Race conditions: Rapid lock/unlock and script injection can overlap—the code uses a serialized “deferred work” chain so reminder/blocker sync does not stomp itself (queueDeferredWork in background.js).
  • UX vs. strictness: Balancing a hard tab lock with a breathing interstitial, hostname-only leave warnings, and manual tab allowlisting so the tool feels helpful, not hostile.
  • Broad host permissions: Needed for overlays on arbitrary sites, which implies clear privacy/copy and careful injection scope.

Accomplishments that we're proud of

  • A coherent focus system: instant lock + Pomodoro + escalating breaks + lifeline escape hatch.
  • Attention to real failure modes: leave-site guard, optional ritual, draggable task reminder, and explicit multi-tab allowlisting instead of silently allowing every new tab.
  • Polished extension surface: dynamic icons, ON badge, documented behavior and test checklist in the README.
  • Shipped structure: clear separation—background orchestration, popup UI, specialized content scripts—under MV3 constraints.

What we learned

  • Chrome’s extension model is the right layer for “stop me from tab-hopping” because it can react to tab activation, navigation, and timers together.
  • Small UX choices (breathing vs. immediate block, confirm before leaving site) materially change how “strict” the product feels without changing the core lock logic.
  • Defensive async patterns (queuing deferred work, persisting state) matter a lot in MV3 where the worker is not long-lived.

What's next for Tab Lock - Focus Mode

Ideas that fit the current architecture but aren’t required by the repo:

  • User-configurable focus/break lengths and cycle presets (still stored in chrome.storage).
  • Per-site profiles (e.g. stricter lock for “study” hosts).
  • Statistics: simple focus minutes and sessions from existing alarm/phase transitions.
  • Firefox / other Chromium browsers if you want wider reach (different APIs, similar concepts).
  • Chrome Web Store polish: store-assets/ suggests listing work; privacy policy and minimal host-permission justification for reviewers.

Built With

Share this project:

Updates