Q. What did you make?
A. Chrome extension that gates distracting sites (YouTube, Reddit, IG, X, TikTok, Snapchat, Facebook) behind a calm brain-dump instead of a productivity test. It asks “what’s making your mind busy right now?”, every character you type dissolves 1.5s later, and 50 characters unlocks the site. Its just a forced pause to notice why you opened the app.
Q. What was challenging?
A. Getting real isolation from host-site CSS/CSP (solved with a closed Shadow DOM + constructable stylesheet + bundled fonts) and fully trapping input — YouTube’s shortcuts were still firing under the overlay until I trapped keydown/keypress/keyup plus the full mouse event set with stopImmediatePropagation.
Q. What are you proud of?
A. Killing three earlier “typing test” versions of this to land on the much simpler, much better idea: stop measuring, just let people empty out.
3 major QoL improvements:
- Full Shadow DOM isolation — overlay can’t be broken by host-site styles/CSP on any gated site.
- Full keyboard + mouse input trap — host shortcuts (space/k/f on YouTube, etc.) can’t fire underneath the overlay.
- Toolbar popup on/off toggle (
chrome.storage-backed) — turn it off instantly, no digging throughchrome://extensions.
How to test:
Load unpacked via chrome://extensions → Developer mode → Load unpacked.
Visit any gated site, let the breathing intro play (or press a key to skip), type into the canvas, hit 50 chars to unlock, try Escape to reset. Toggle off in the popup mid-session and confirm it melts away immediately.
Time invested: about 6 hours in total.
- 6 devlogs
- 6h
- Frictionless