The Toll Booth

Pay for your procrastination with productivity.

Comment

Inspiration We've all been there — you open your browser to do something productive and suddenly 45 minutes have passed on YouTube. Existing blockers just say "no," which feels restrictive and easy to bypass. We wanted something that says "not yet" — make you earn access by completing a real task first. The idea of a toll booth felt perfect: you don't get through without paying, but once you pay, you're free to go.

What it does The Toll Booth is a Chrome/Opera extension that intercepts your blocked distraction sites and presents you with a micro-task before granting access. Complete the task, get a timed pass. It pulls tasks from your local queue or directly from Todoist, suggests new ones using Claude AI, and syncs everything to the cloud via Google Sign-In and Firestore so your data persists across devices.

How we built it We built it as a Manifest V3 Chrome Extension using Vite and the CRXJS plugin. The background service worker handles navigation interception and timer management via Chrome alarms. The overlay is injected as a Shadow DOM to stay isolated from the host page's styles. Firebase handles authentication via chrome.identity.launchWebAuthFlow and Firestore acts as the cloud sync layer with chrome.storage as the fast local-first cache. The Anthropic Claude API powers AI task suggestions directly from the popup.

Challenges we ran into

  • Google Sign-In in a Chrome Extension was surprisingly painful. chrome.identity.getAuthToken requires a Chrome Web Store listing, so we had to switch to launchWebAuthFlow with a Web Application OAuth client and wire it manually to Firebase Auth.
  • Content script timing — webNavigation.onCommitted fires before the content script loads, causing silent message failures. Switching to onCompleted fixed the race condition.
  • Shadow DOM isolation — ensuring the toll overlay rendered correctly on top of every site regardless of their CSS required careful z-index and positioning work.

Accomplishments that we're proud of

  • A fully working local-first extension that works offline without any degradation
  • Clean Google Sign-In flow with Firestore sync that restores your data on any device
  • AI-powered task suggestions using Claude that feel genuinely useful
  • The toll overlay renders correctly on top of every site we tested — YouTube, Twitter, Reddit, Instagram

What we learned

  • Chrome Extension Manifest V3 has strict constraints around service workers, content scripts, and identity that aren't well documented
  • Firebase Auth requires careful setup to work within the sandboxed extension environment
  • Building offline-first means being intentional about where your source of truth lives at every step

What's next for The Toll Booth

  • Leaderboards — see how many tolls you've paid compared to friends
  • Chrome Web Store release — make it one-click installable
  • Streaks & stats — track your productivity over time in the options page
  • Mobile companion app — sync your task queue from your phone
  • Custom toll rules — different tasks for different sites (e.g. only work tasks to unlock Twitter)

Built With

Share this project:

Updates