Show HN: Unclutter — A new approach to reader mode

unclutter.lindylearn.io

49 points

4 years ago

Hey! This is a reader mode browser extension I built that hides noisy page elements rather than extracting and re-rendering only the page text. The idea is to not make all articles look the same [0], have them still render graphs, and ideally to work in more cases.

There are a few "tricks": patching the site CSSOM to apply simpler mobile styles even at desktop width, detecting the likely main text & removing its non-text siblings, blocklists for classnames that contain words like "sidebar", and testing this on a few hundred popular sites.

I got carried away and also added a dark mode, page outlines, private annotations & inline Hacker News comments. The last feature works by parsing every top-level HN comment with a quote in it (formatted with > or "") within a few minutes, and anchoring these quotes in the related article HTML. So when you click a link on HN you’ll see the parts people are talking about while reading. [1]

The code is all on GitHub!

[0] Screenshots comparing it to the Firefox reader mode: https://github.com/lindylearn/unclutter/blob/main/docs/compa...

[1] It's fun to try this on some of the "HN classics" that got 30+ quote comments over the years. Another project I built, https://hn.lindylearn.io/best shows the number of "annotations" an article has beneath its title.

14 comments