Show HN: Unclutter – Reader mode, but better (unclutter.it)
In the last months I've been working on Unclutter, a modern reader mode browser extension. In contrast to all existing approaches, it unclutters articles by modifying their CSS instead of extracting the text content.
This results in a more visually pleasing result that reuses the original article style. The idea is to remove friction so you use the reader mode more often. There are a few more features around saving articles automatically and taking highlights -- more details are on the website.
The extension has about 400 active weekly users right now, mostly from organic web store traffic. Monetisation has proven to be hard and for freemium there would need to be much higher numbers anyways. Do you think I should keep working on the project?
121 comments
[ 3.3 ms ] story [ 183 ms ] threadThe most underused browser feature: reader mode - https://news.ycombinator.com/item?id=28286493 - Aug 2021 (357 comments)
How does Firefox's Reader View work? (2020) - https://news.ycombinator.com/item?id=30864311 - Mar 2022 (102 comments)
Quite often, you can get through many a paywall by switching to reader mode and then reloading the page. Previously hidden content appears.
Admittedly, paywall-busting doesn't work as well with Unclutter as with the text-extraction methods. But it's still effective for most sites and there are custom tweaks e.g. for nytimes.com.
I'm thinking about improving on this actually. It would be cool to fetch the page content from web archives automatically if it detects a paywall. Kind of like the "archive.is" links people post here all the time, but with less clutter.
Technically, messing with paywalls is forbidden for Chrome extensions listed in the webstore (and detrimental for getting press coverage). Which is why no one advertises this.
[0] https://gitlab.com/magnolia1234/bypass-paywalls-chrome-clean
I've been using the latter for years now too. It still doesn't work with hard paywalls like the ones on economist.com or wsj.com.
They are .webm and .webp. Which browser & browser version are you using?
No play button is displayed, no video playback control bar either, and pressing on space bar does not start the video. Right-clicking over the video shows a context menu with "play" option.
It is confusing to see these as screenshots of the cluttered interface and no indication that these are videos.
I made the bad decision of hand-coding the landing page in React, this is the result of it :)
I don't like this 'trend' of the things appearing with an animation as you scroll, I find it irritating and sometimes confusing.
Anyway, the problem here seems to be that the threshold is way too high, it only triggers when you scrolled the whole content away.
The problem is that the example videos auto-play and can be quite distracting if they're visible by default.
What would be the workflow? Do you want to read the summary instead of the article, use it to decide whether to read, or something else?
Yes, I would like to see a one-paragraph summary of technical articles to decide if they are worthwhile to read. For news articles, the summary might be all I want to read.
I have very little time to read things online. I try to skim the introductory and closing paragraphs in articles I read, but some authors bury the "meat" of the matter among walls of text. And for someone like me, that knowledge is practically inaccessible. I also don't think I have the attention span for some very long technical texts. A plain English summary would enable me to read them.
To recap - I would like to see a GPT-3-like summary of the entire article. It would primarily help me by saving time reading technical texts - either by helping me digest them or by helping me understand whether the text is worth reading in the first place.
If article summaries were cached for each article, that would be fine for my use and probably more economical on your end. I do not want to get bespoke summaries for parts of the article or summaries answering questions.
I've actually had a similar feature request before: https://github.com/lindylearn/unclutter/issues/297
Have you tried some of the existing solutions mentioned in the ticket? I'm curious if they solve the problem for you, and if not, what Unclutter could do better.
BlinkNotes didn't work for a technical reason, TLDR; it did not have AI capabilities - only crowdsourced summaries.
TLDR This was good but seemed to use an NLP algorithm they call "AI." So instead of summarizing articles, it seems to produce a bullet list of the essential text fragments. This is in contrast to the much easier-to-read conversational style summaries GPT-3 can provide. TLDR This also did poorly with some of the technical articles I have authored, sometimes extracting pieces of C++ code as meaningful text.
Summari worked very well for me. It summarized even quite technical articles well because it uses a conversational AI. Thanks for the recommendation.
If I had to name one key criterion that differentiates good summaries from bad, in my opinion, it would be the effective use of language. Conversational/language models like GPT-3 are proficient at absorbing much contextual information and synthesizing a short and effective summary. NLP algorithms are good at throwing away superfluous context, which is common in casual writing, but they do not seem to work well for technical writing or texts whose purpose is to explain concepts and where there is little superfluous context to throw away.
Perhaps for something like Unclutter, if the users mainly read news sites, then an NLP approach could be appropriate (it would be cheaper and works well for such content). But the ideal implementation for an article summarizer for me needs that summary-from-a-lot-of-context synthesizing capability.
The big problem with current transformer-based models is the input limit. We'd probably need to split large articles and then summarize the summarizations of these chunks. And yeah I agree, Unclutter should work on any kind of article, not just on factual news.
Please let me know if you're still using Summari in a bit! They seem to focus on their hosted version, I'm curious why.
I love that you also opened source it! Which is a huge win.
It might also be nice to "auto-activate", so people don't forget it's running. Right now, I have to click the extension to run it.
If it could pass paywalls, I'd probably pay ("donate" might be a better term).
Any chance you could bring it to iOS as an extension? A lot of my reading is also happening on phone
There actually is an "auto-activate" feature you can enable in the settings. Is this what you had in mind?
Regarding mobile support, I know. I'm not sure how to handle mobile Chrome which doesn't allow extensions, but for Safari this should be possible. No guarantees when I can get to this though. See https://github.com/lindylearn/unclutter/issues/529
Let's track this idea here: https://github.com/lindylearn/unclutter/issues/668
Why isn't there a permission where the add-on doesn't get to access anything until I activate it for a specific tab, and then it only gets to access to that specific tab? Unclutter would be most useful on websites where I'm not particularly worried about misuse, but I don't want it to be able to read my emails.
This is not meant as a dig at this add-on or its author, I have no reason to believe he's not trustworthy, I think it's a limitation of the add-on permission model.
The reason I enabled "all sites" by default is to make the automatic activation feature work, which used to be more powerful. Possibly it can be done with an optional permission now, I'll look into it: https://github.com/lindylearn/unclutter/issues/527
Thanks for the feedback! Also, if you don't like something you can always submit a PR ;)
It was intended to be a comment about the limited power of the permission model in Firefox, though I have now learned from the sibling comment that Firefox actually has the permission I was thinking of.
Mozilla: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...
Chrome: https://developer.chrome.com/docs/extensions/mv3/manifest/ac...
1. "Extension sees data on pages for which it's activated, and might modify that all kept locally", and
2. "Extension sends all page information to The Cloud^W^W Somebody Else's Computer where it is probably being shared with umpteen third parties, advertising^W behavioural manipulation and surveillance organisations, and will be preserved in crystal until the Heat Death Of The Universe.
Why desktop, and most especially mobile platforms / operating systems fail to either distinguish or permit control between these two scenarios is ... utterly beyond me.
There is Steve Krenzel's recent account of being pressured, by both a Twitter marketing exec and the phone company requesting the feature, to track "when users leave their house, their commute to work, and everywhere they go throughout the day".
This should not even be possible, let alone invisible to the device owner.
<https://news.ycombinator.com/item?id=33511016>
<https://threadreaderapp.com/thread/1589700721121058817.html>
The reputational harm that this does to the company, to mobile computing, to Web 2.0, to the start-up sector, and to the infotech sector as a whole really cannot be overstated.
Burn it down.
That does make things more complicated.
The dynamic nature of HTML as a whole means that 1) page contents can change interactively and 2) follow-up network requests can be made.
Limiting that would be difficult, and might require something like, spitballing here:
- Limiting extension functionality to subtractive network requests, or specifically permitted requests. Given that I've just installed LibRedirect, which points surveillanceware sites (Twitter, YT, Reddit, Instagram, etc.) to open, less-surveilled alternatives, I'm already contradicting myself here.
- Limiting extension functionality to changing displayed content after an initial pre-render has been achieved. sort of:
That ... obviously ... fails to work for any number of content blocking or tracker-blocking tools (uMatrix, Ghostery, amongst others).This leaves us with the option of tools which are audited and certified as to behaviour, have some specifically limited sets of requests, and require those back-ends to treat any such requests in specific manners which preserve privacy and confidentiality. That's a lot more cumbersome, and doesn't work off simple allow/deny rules on-device.
Thanks for the reality slap.
How do you know that? It sounds a bit scary that you are able to know this number.
https://imgur.com/a/O5RkAYa
https://github.com/lindylearn/unclutter/blob/main/docs/metri...
Bravo to the author, well done for earning the users' trust.
Honestly the extension would not exist in its current form without this. Looking at the usage after releasing a feature is incredibly helpful to see if something is working.
I actually experimented with article topic-prediction for a few months, but assignment errors were annoying and it was not clear if it's useful at all.
I believe Pocket premium has AI-suggested article tags. Maybe something similar makes sense for Unclutter, but I'm not sure of the demand for it.
ps: in any case, my suggestion was a soft tongue in cheek, not pressing you, unless it excites you. And kudos on your results already.
I just created a ticket for this: https://github.com/lindylearn/unclutter/issues/595
Lovely tool, in terms of things I would pay for, the actual reader mode is not really the thing I would pay for. What I would pay for would be, highest to lowest:
1. An awesome search engine that can search text I read, think being able to search text on the sites in your browser history, there was a service that did this called Memex, and Rewind seems like it's trying to do something similar.
2. Linked texts, e.g PG might say X then Naval says something in the same area.
3. Reminders about articles I read x period of time and might want to re read.
I'll think of other features I would be willing to pay for.
> being able to search text on the sites in your browser history
I'm curious, have you used this in Memex when it was still supported?
> Linked texts, e.g PG might say X then Naval says something in the same area.
Do you mean direct hyperlinks and backlinks between articles? So if the Naval post references a PG essay, you'd see that while reading the PG essay?
> Reminders about articles I [...] might want to re read
How should it decide which article you want to re-read?
Regarding the Memex like feature I did use it a lot, it worked like full text search for the HTML, they had a sync service that worked by importing your search history, I'm guessing they downloaded the HTML and stored it, so they could search against it. My usage of the service is a couple of years old so things might have changed, at the time it would crash when I did imports.
You already have search on highlights and full text on them, so maybe the Memex like feature isn't needed.
> How should it decide which article you want to re-read?
It could decide based on other users who also saved the article, this might require storing the data on your servers, maybe number of highlights made or just ask the users when they add it to their queue.
Nice extension, the more I use it the more I like it. I've even disabled Firefox reader mode in favor of this.
Hope you find a way to monetize, play around with other monetization strategies other than good-better-best or one size fits all price point. Maybe usage based on the queue? There might be heavy crowds of users who would have a higher willingness to pay for example the "Second Brain" crowd.
Links
Memex Site: https://memex.garden/
Recent Pricing Guide I've been working through:
https://news.ycombinator.com/item?id=33502567
Priceintelligently posts on hn: https://news.ycombinator.com/from?site=priceintelligently.co...
Some Lago Blog posts on pricing: https://www.getlago.com/category/product-billing
> It could decide based on other users who also saved the article
That's a cool idea, I'll think about it. Maybe it doesn't even need to be other Unclutter users. I already ingest almost every Hacker News post for the social annotations feature and there are APIs for web traffic stats.
Thank you for the links on pricing, that's very helpful. At least this Show HN has convinced me to keep trying for a bit longer :)
If you have any other feedback later, just email me, open an issue, etc. Thanks!
How would you expose the setting in the extension UI?
Someone else in this thread suggested a version for mobile Safari which made supporting this even more interesting. No promises, but hopefully I can get to this before the end of the year.
I'm not sure what we can do, but let's track Orion support for Unclutter here: https://github.com/lindylearn/unclutter/issues/569
javascript:void%20function()%7Bjavascript:(function()%7Bvar%20a=Math.floor,b=document.querySelectorAll(%22p,%20title%22),c=%5B%5D,e=%22%22,f=%22%22,g=%22%22,h=0,k=0,l=%22%22,m=%22%22,n=window.open(%22%22,%22_blank%22);for(var%20d%20in%20b)%7Bvar%20i=b%5Bd%5D.textContent;i%26%26(c=c+%22%5Cn%22+i)%7Dfor(f=c,e=f.replace(/%5Cn/g,%22%20%3Cbr%3E%3C/br%3E%20%22),g=e.split(%22%20%22),h=0;h%3Cg.length;h++)k=a(g%5Bh%5D.length/3)+1,l=%22%3Cspan%20style='font-weight:bolder'%3E%22+g%5Bh%5D.substring(0,k)+%22%3C/span%3E%3Cspan%20style='font-weight:lighter'%3E%22+g%5Bh%5D.substring(k,g%5Bh%5D.length)+%22%3C/span%3E%20%22,%22.%22==g%5Bh%5D.substring(g%5Bh%5D.length-1,g%5Bh%5D.length)%26%26(l+=%22%3Cspan%20style='color:red'%3E%20*%20%3C/span%3E%22),m+=l;n.document.write(%22%3Chtml%3E%3Cp%20style='font-size:40;line-height:200%25;font-family:Arial'%3E%22+m+%22%3C/p%3E%3C/html%3E%22)%7D)()%7D();
https://www.locserendipity.com/Hyper.html
I'll be the first to admit that this requires some knowledge of CSS. Or, in my case, turned out to be how I learned most of what I know about it ;-)
There are a few general observations I've made over the years:
1. A whole lot of Web design is absolute crap. Or as I put it, "Web design isn't the solution, Web design is the problem."
2. Less is virtually always more. I'm constantly shocked at how much calmer the experience of reading a site to which sidebars, recommendations, social-media link-litter, advertising, and of course, autoplay video and audio, have been removed.
3. There's a massive amount of shitty HTML out there.
4. Content extraction ... can work, and surprisingly well for some sites. I'd built an html-xml parser for the Washington Post which reduces news articles to about 1% of their original size, and tremendously improves readability. Those tend to have to be configured for specific sites or content engines, however.
5. That said, there's a lot of re-use of content engines, and some rules can prove quite generalisable. But ...
6. ... There's also a lot of churn, and rules which work at one point in time can fail spectacularly at another. Determining what version of the generator is being used for a specific request is ... difficult.
7. Often the most dramatic improvement is simply to dump plain text of the main meat of an article and re-apply formatting to that. This is of course manual, but adaptive and ... reasonably quick. What also becomes rapidly apparent is that site styling and markup offer very little additional benefit or structure to the core content.
8. For almost all commercial sites, there's virtually no use of bold/strong, and little of emphasis, outside of advertising or ancillary content. Simply nuking <b> and <strong> tagged-content is remarkably effective at trimming crud. Often it's the only reliable way to do so.
I'd highlight your point nr. 5. A very large percentage of articles use Wordpress or other website builders. Once you support a few large sites your coverage drastically increases.
With Unclutter I also found it helpful to have an automated fallback -- if the text content of the page reduces too much, it disables some of the content block methods one by one.
I definitely can, tracking this in https://github.com/lindylearn/unclutter/issues/570
https://github.com/lindylearn/unclutter/issues/332
See https://github.com/lindylearn/unclutter/issues/529
It makes total sense for sharing!
What paths have you taken/considered? Given that this is open source, how would you get users to pay?
I think it's hard to make money from reader modes alone, with so many free alternatives. But you know more about that topic than I do. Any suggestions?
Certain features like widening and reducing the width of the 'reader mode', as well as changing font size, I've not seen earlier. The highlighting feature is also great.
The 'Library', which shows list of pages I've uncluttered and highlights is awesome!
On top of that, the fact that it is open source, is fantastic.
Kudos for all the work and providing to everyone for free.
You've already provided an 'Export Data' option as well!
In terms of monetization, I can think of -
1. import from that exported CSV
2. seamless sync when I'm using different browsers or systems. Essentially, a paid account via which the sync happens seamlessly.
All in all a fantastic piece of open source software. Thank you!
I'm already working on both of your suggestions, hopefully this will be possible within the next 2 weeks :)
And twitter.com is a special case: https://github.com/lindylearn/unclutter/issues/570
It's never going to be perfect unfortunately. Thanks for the feedback!
And also please note that Mozilla has their algorithm in the open here: https://github.com/mozilla/readability
Unclutter just produces more visually pleasing results by keeping the original style of the website intact.
Here's a side-by-side comparison: https://github.com/lindylearn/unclutter/blob/main/docs/compa...
Looking at that link, wow -- I didn't realise the Firefox reader existed for over 7 years now.
https://web2doc.net
- I come to a page I want to read later, a page behind a soft paywall, a page with a "switch off your add blocker" popup, page with tons of JS, popups, videos that takes forever to load and one has to close this and that while scrolling down
- It takes one click (2 to 4 taps on mobile) to send the page to web2doc and forget
I read the content directly in the web channel or (1)Feeder reminds me about the new article(s) within half an hour.
(1) Feeder: https://f-droid.org/en/packages/com.nononsenseapps.feeder/