A new kind of reader mode to remove distractions from web articles.
Try out the browser extension from the Chrome or Firefox extension stores (or build it yourself):
The main difference between Unclutter and other "reader modes" is that it keeps the original style of websites intact (see more here):
| Firefox reader mode | Unclutter |
|---|---|
 |
 |
Unclutter also supports:
- Theme settings including a dynamic dark mode.
- Automatically activating the extension on a per-domain basis.
- An interactive page outline to navigate long articles.
- Showing social highlights from Hacker News and Hypothes.is.
- Taking private notes by simply selecting text.
The main "trick" is to use a website's responsive style to hide non-essential page elements for us (by parsing & applying these rules in the CSSOM). For other annoyances there are global and site-specific blocklists based on CSS class naming.
To standardize margins, background colors, and font-sizes, the extension also applies custom CSS to text elements it finds in the DOM (with logic to detect what's the main article text). The dark mode feature uses a combination of DOM and CSSOM iterations to darken colors, change the background, or enable a website's native dark mode styles if present.
To tie these (and many more) page modifications together, they each hook into 8 lifecycle phases coordinated from transitions.ts. The major concern here is performance -- minimizing reflows while performing changes stepwise so that they look nice when animated.
Beyond this core functionality there are embedded React iframes to power the social highlights & private notes features and the extension settings page, Svelte components for the UI controls including the page outline, and background event handling code to inject scripts into visited pages and handle events.
For documentation on individual features see the docs pages.
The main way you can help is to report bugs, broken articles pages, UI inconsistencies, or ideas on how to improve the extension by creating an issue.
If you want something to be fixed faster (like a CSS bug), it may help to do it yourself. Please let me know if the docs pages and inline comments are not sufficient. Thank you in advance!
To build the extension yourself, run:
yarn install && yarn buildyarn package- Find the bundled extension code in
/web-ext-artifacts._manifest-v2is for Firefox,_manifest-v3for Chromium browsers.
I run this using node v16.14.0 on Mac, then upload the bundled code to the Chrome and Mozilla extension stores manually. The bundling uses Rollup to create a somewhat readable output -- so feel free to check the released code in your browser's profile folder if you installed the extension.
For hot reloading during development, run yarn watch and npx web-ext run in parallel.
This code is released under the Simplified BSD License, which excludes liability for bugs. The project is part of the LindyLearn suite of free tools and will stay open-source.
The private notes and social highlights feature uses code from the annotator subcomponent of hypothesis/client to anchor text fragments. See LICENCE for the legal boilerplate.