Case Studies ReadFlow: a distraction-free reader extension
ReadFlow: a distraction-free reader extension
TL;DR ReadFlow reformats any article into a clean reading view, stripping ads, sidebars, and popups. The real work is content extraction: reliably finding the actual article inside messy, inconsistent page markup, then presenting it in a calm, readable layout.
ReadFlow is a small extension with a simple promise: take any cluttered article and give you a clean, focused page to read. The idea is easy. Making it work across the chaos of real web pages is the interesting part.
The problem
Reading on the modern web is a fight. A single article arrives wrapped in a sticky header, an autoplaying video, a newsletter popup, three ad slots, and a sidebar of "recommended" links. The actual words you came for are a small island in all of it.
Browsers have reader modes, but they are inconsistent from site to site and give you little control. I wanted something that worked the same way everywhere and let me tune the reading experience.
The approach
The core of a reader is content extraction: reliably finding the real article inside inconsistent markup.
- Find the content. Score the page's blocks by the signals that indicate real writing, things like text density and how much of the block is links versus prose, and pick the winner.
- Strip the rest. Remove the navigation, ads, sidebars, and popups around it.
- Present it calmly. Lay the article out with comfortable typography and a distraction-free theme.
What shipped
ReadFlow turns a busy article page into a clean reading view. The clutter goes, the words stay, and reading gets quiet again. It handles the common page layouts well and degrades gracefully when a page is structured in an unusual way.
What I learned building it
The lesson was that the web has no reliable structure to lean on. Two news sites can present the same kind of article with completely different markup, so extraction has to reason about content rather than trust tags. You aim to be right most of the time and to fail without making a mess the rest of the time.
ReadFlow sits alongside my other browser tools. You can find them in the Chrome extensions section of the site.
FAQ
How does a reader mode find the article?
It analyses the page to find the block that looks most like the main content, using signals like text density, tag structure, and link ratio. Then it pulls that out and drops the navigation, ads, and sidebars around it.
Why not just use the browser's built-in reader?
Built-in readers are good but inconsistent across sites and browsers, and offer limited control. A dedicated extension can handle more layouts, give you typography and theme options, and work the same way everywhere.
Does reader mode work on every site?
Not perfectly. Pages with unusual structure or content loaded late by JavaScript are harder to extract cleanly. A good reader handles the common cases well and fails gracefully on the rest.