Role
Lead Creator / Engineer
Team
Solo Project
Timeline
2 Weeks (Design & Dev)
Tools
Extension API (MV3), Next.js, Tailwind, sips
Reading shouldn't feel like a sensory battlefield.
Focus Reader is a Chrome Extension built to strip away popups, trackers, layouts, and vertical scroll bars. It extracts any article or long-form page dynamically, structures it into single-thought slides, and loads it in a clean full-screen viewport.
The web was optimized to harvest attention, not support reading.
Modern web reading is exhausting. Popups slide in from the edges, sticky menus crop your viewport, animations draw your focus away, and infinite content grids demand your click. The cognitive energy required to filter out these background distractors directly subtracts from reading comprehension.
Traditional reader modes clean the clutter, but leave the scroll.
Standard reader modes (Safari Reader, Chrome Reading Mode) strip styling and tracking pixels, but still format the article as one massive vertical document. As you read, you must constantly scroll. Your eyes must continually re-locate the active line in a sea of paragraphs.
Traditional Reader Mode
Continuous Scroll (High Eye Strain)
Focus Mode Deck
Step-by-Step Slides (Zero Eye Movement)
Scrolling is a micro-distraction.
Eye-tracking studies show that vertical scrolling forces readers to make micro-adjustments to find the start of the next line. By reframing the article text as slides containing only 1-2 sentences at a WPM delay, eye movement is kept strictly centered, minimizing the cognitive load of navigation.
Reframing document flows as presentations.
Three design insights drove the development of the Focus Reader extension interface:
- 01.Single-Thought Viewport
Isolating a single paragraph at the center of the screen prevents surrounding text from stealing focus.
- 02.Autoplay teleprompter pacing
Setting a custom words-per-minute speed turns the deck into an auto-advancing visual audiobook, pacing your focus.
- 03.Composite grouping
Embedded widgets like tweets, blockquotes, and images are kept unified to prevent layout breakdown during fragmentation.
The chrome-extension:// sandbox.
Instead of injecting a modal or popup directly into the active host webpage (which leaves the overlay exposed to the host site's global style overrides, iframe blockers, and tracking code), Focus Reader generates a new sandboxed chrome-extension tab. The extension scrapes the active article nodes, caches them in chrome.storage, and opens a lightweight local HTML/CSS reader app that reads the cache.
Debugging browser limits & layout crashes.
Writing the extension surfaced several API limits and browser quirks that required complex workarounds:
activeTab permission expiration inside async callbacks
In Manifest V3, the temporary access token granted by activeTab automatically expires as soon as execution moves to an asynchronous loop (such as waiting for the content script's ping response). Solved by requesting explicit host_permissions for HTTP/HTTPS schemas in the manifest.
Duplicate content script injection and listener stacking
Clicking the action button multiple times on the same page triggered multiple executeScript calls, causing redeclaration syntax crashes in the console. Solved by implementing a ping-response check to verify if content.js is already running before attempting injection.
Detached DOM innerText extraction bug
During sentence chunking, extracting text from cloned nodes inside a detached memory fragment (before inserting into the layout tree) returned empty values in Blink. Fixed by querying the live DOM first and only calling node traversal on blocks holding tweets or embeds.
Auto-play teleprompter and slanted branding.
The finalized Focus Reader features smooth animations, adaptive font sizing, autoplay timing loops (P to toggle, Arrow keys to reset), custom document-title bindings, full-screen image slides, and minimal branding icons incorporating a modern diagonal-slash theme.
1. NEW MEDIA IS INSIDER MEDIA.