Focus Selection: only what you select stays sharp

I made a small Chrome extension called Focus Selection.

The idea fits in one sentence: select text on any page, and everything else blurs away.

Reading on the web is noisy

When I read an article online, the screen is always holding something else in reserve. Sidebar ads, related articles, sticky headers, cookie banners. Everything in view competes with the sentence I'm actually trying to read.

Some people read with a ruler pressed against the page of a book. It keeps your eyes on one line and hides the rest. I kept wishing the screen had the same tool. Something that appears the moment you make a choice, and disappears when you're done.

That's really all Focus Selection is. A ruler for the web.

What it does

Select any text. Everything around it fades into a soft blur, and the selection itself is rendered as clean black text on a white background, overriding whatever selection color the site defines. The page layout stays untouched, so nothing shifts or reflows.

Click anywhere, or press Esc, and it's gone.

There's no settings screen and no tutorial. The only UI is what shows up around your selection: two small arrows for moving between paragraphs, and a copy button.

Reading with your keyboard

This is my favorite part. Once something is focused, the up and down arrow keys move you through the page one "stop" at a time, paragraph by paragraph. Each stop scrolls smoothly to the center of the screen.

Stops aren't just <p> tags. Images, figures, videos, and code blocks become stops too, so you never skip past "see the figure below."

It turns any article into something closer to a teleprompter: you sit still, tap a key, and the next thought arrives in the middle of the screen.

The fiddly parts

An extension like this sounds trivial, and the happy path is. The real work was making it behave on the messy, real-world web. A few examples of what it has to deal with:

• Pages without paragraph tags. Many sites build "paragraphs" out of bare divs, so it also traces text nodes back to their nearest block ancestor.
• Navigation and sidebars. Menus, breadcrumbs, and tables of contents are excluded, and movement sticks to the column you're reading.
• Invisible content. Hidden carousel slides, closed tab panels, and off-screen elements are all filtered out so the arrow keys never jump to something you can't see.
• The blur itself. One fixed overlay with a clip-path hole. The path structure never changes, so the browser interpolates it and the hole morphs between paragraphs instead of blinking.

None of this is visible when it works, which is sort of the point. The whole extension is a single content script and a stylesheet, about 26KB, no frameworks and no build step.

Private by design

Focus Selection makes zero network requests. The only permission it asks for is storage, and the only thing it stores is your on/off preference. It doesn't know what you read, and it never will.

A quieter web, one paragraph at a time

Like maipeeji, this comes from the same place: wanting the internet to feel a little quieter. I can't redesign every website I read, but I can carry a small tool that dims everything I didn't choose.

If that sounds nice to you, it's free on the Chrome Web Store. Select a sentence somewhere and see how it feels.