A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc

Overview

Unclutter Browser Extension

A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc. Contributions are welcome!

Alt Text

Features

  • Rewrites a website's CSS to use mobile styles even at larger viewports. This usually hides most superficial pages elements.
  • Simplifies pages by removing headers, sidebars, cookie banners, or related articles through global rules.
  • Has custom CSS fixes for a few popular sites.
  • More to come :)

Installation

Install the extension from the Chrome Web Store or Mozilla Add-on Store.

Usage

After installing the browser extension, move the extension icon to your extension bar. Clicking the icon will reduce the size of the active webpage and simplify it. Clicking on the background outside the article restores the original page.

In theory this should work on any page, but sometimes there are CSS issues -- please open an issue for those!

Contributing

Please open an issue for anything that's broken or that could work better. If you want to fix a site that always annoyed you, add some CSS overwrites to source/content-script/pageview/manualContentBlock.css.

Development

To build the extension yourself, run:

  1. yarn install && yarn build
  2. yarn package
  3. Find the bundled extension code in /web-ext-artifacts. _manifest-v2 is for Firefox, _manifest-v3 for Chromium browsers.

This was tested using node v17.6.0 and yarn 1.22.17 on Mac, but should work the same in other environments. See source/README.me for some documentation on the code structure.

For hot reloading during development, run yarn watch and npx web-ext run in parallel.

License

See LICENSE for details.

Comments
  • Dark mode

    Dark mode

    The article theme selector should also support dark mode, and potentially activate it by default based on system preferences.

    Dark mode is more complex than just changing the background color, since all text color (including headings, image subtitles, icons etc) also need to be changed.

    User requests:

    • https://www.reddit.com/r/firefox/comments/thre60/comment/i1yjp7w/?utm_source=share&utm_medium=web2x&context=3
    feature 
    opened by phgn0 7
  • Unclutter breaks Chrome's PDF viewer

    Unclutter breaks Chrome's PDF viewer

    Description

    When trying to view an online PDF in Chrome, Unclutter displays an error message ("page broken") and the PDF doesn't load. If I toggle the unclutter switch on the top right, the PDF remains hidden under an empty page or is just barely visible on the top (just a few pixels of the PDF can be seen).

    A solution

    Do not unclutter any page that ends with .pdf or contains Chrome's PDF viewer (note: some pages embed the viewer, so that has to be taken into account too).

    Example websites

    Literally any online PDF

    Tested on

    Chrome OS with Chrome 99

    bug 
    opened by marcocipriani01 7
  • Links at the bottom of the page are unclickable, page is overlayed by lindy-info-bottom

    Links at the bottom of the page are unclickable, page is overlayed by lindy-info-bottom

    The title basically.

    It can be seen here for example: https://www.pcgamer.com/tekken-8-reveal/

    With my setting an iframe with id lindy-info-bottom sits empty at the bottom of the page and I cannot interact with the text beneath it. Clicking links is the most obvious problem, but text cannot be selected as well.

    opened by noximo 6
  • Support adding domains in preferences pane

    Support adding domains in preferences pane

    Thanks for the plugin! It has been very useful so far.

    On Firefox, in the unclutter extension's preferences pane there is a list of recognized domains with the ability to set them to always or never unclutter. Currently it appears the only way to add new domains to this list is to run them through unclutter first.

    I have a many domains I don't want the unclutter reminder showing up on the webpage for and it would be great if I could preemptively add them to the list of domains and set them to "never unclutter", but it appears the list of domains in the preferences pane is read-only.

    Can we add the ability to add domains directly in the list?

    feature 
    opened by rifelpet 6
  • Icon elsewhere than on article disables unclutter

    Icon elsewhere than on article disables unclutter

    Hi, great extension, no issue, unless a slight bother with an uncluttered page : wherever I click on the page behind the article the article returns to normal display; I'd appreciate that this happen only with the toolbar action button which triggers unclutter on/off. If the user inadvertently clicks out of the article the uncluttering is disabled, quite bothering.

    Otherwise, no issue, brilliant.

    question 
    opened by Cade66 6
  • Broken website styling: datastation.multiprocess.io

    Broken website styling: datastation.multiprocess.io

    A user reported an issue on https://datastation.multiprocess.io/blog/2022-06-11-year-in-review.html from within the extension.

    Unclutter version: 0.16.0 Browser type: chromium User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

    broken-website 
    opened by lindy-bot 4
  • Clutter followed by Unclutter toggle creates a weird UI view on github

    Clutter followed by Unclutter toggle creates a weird UI view on github

    To reproduce the issue, on any github page try to click on the extension and then unclick it. An easy fix would be to just ask the page to reload on calling clutter (followed by unclutter toggle extension.)

    opened by deepanshululla 4
  • Hacker news is unreadable using Unclutter

    Hacker news is unreadable using Unclutter

    Using Unclutter on Hacker News (https://news.ycombinator.com/), the dark theme is active and none of the usual links are visible.

    image
    • Firefox Dev Edition Latest version;
    • Macos 12.3;
    • Automagic dark theme is active on Unclutter
    unique styling 
    opened by shinze 4
  • Enhancement Request | Allow Users to right click on article link to open in newt tab/window with reader mode enabled

    Enhancement Request | Allow Users to right click on article link to open in newt tab/window with reader mode enabled

    Hi Great work. I would like to suggest a enhancement. User right clicks on article link, selects "Open in reader mode", the action opens the article and on complete load activates the Reader mode. Similarly Ctrl + click on said link would open the link in new tab/window.

    feature 
    opened by kunalkhatri 4
  • Broken website styling: finance.yahoo.com

    Broken website styling: finance.yahoo.com

    A user reported an issue on https://finance.yahoo.com/news/buy-fear-warren-buffett-3-230000136.html from within the extension. This is the user's 1th bug report.

    Unclutter version: 1.2.1 Browser type: firefox User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:105.0) Gecko/20100101 Firefox/105.0

    Screenshot

    broken-website 
    opened by lindy-bot 3
  • Unclutter reminder is still clickable after disappearing

    Unclutter reminder is still clickable after disappearing

    When using this feature https://github.com/lindylearn/unclutter/blob/main/docs/article-detection.md#unclutter-reminder, after it disappears, the button is still clickable. Video demonstration: https://www.veed.io/view/4e416374-fdde-47b2-9785-3dab1c5fb45d?sharingWidget=true

    opened by eastoncrafter 3
  • Broken website styling: gizmodo.jp

    Broken website styling: gizmodo.jp

    A user reported an issue on https://www.gizmodo.jp/2023/01/asus-stereo-glassless-display.html from within the extension. This is the user's 2th bug report.

    Unclutter version: 1.4.0 Browser type: firefox User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0

    Screenshot

    broken-website 
    opened by lindy-bot 0
  • Broken website styling: xataka.com

    Broken website styling: xataka.com

    A user reported an issue on https://www.xataka.com/aplicaciones/dibujar-circulo-perfecto-imposible-mi-nueva-obsesion-esta-web-que-dice-como-cerca-me-he-quedado from within the extension. This is the user's 2th bug report.

    Unclutter version: 1.5.1 Browser type: chromium User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

    Screenshot

    broken-website 
    opened by lindy-bot 0
  • Broken website styling: help.mikrotik.com

    Broken website styling: help.mikrotik.com

    A user reported an issue on https://help.mikrotik.com/docs/display/ROS/First+Time+Configuration from within the extension. This is the user's 1th bug report.

    Unclutter version: 1.5.1 Browser type: chromium User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

    Screenshot

    broken-website 
    opened by lindy-bot 0
  • Broken website styling: thecobf.com

    Broken website styling: thecobf.com

    A user reported an issue on https://thecobf.com/forum/topic/19702-ssd-simpson-manufacturing-co-inc/#comment-489673 from within the extension. This is the user's 1th bug report.

    Unclutter version: 1.5.1 Browser type: chromium User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

    Screenshot

    broken-website 
    opened by lindy-bot 0
  • Add 8 blocklist selectors for straitstimes.com

    Add 8 blocklist selectors for straitstimes.com

    A user submitted these element block selectors from within the extension.

    [
        ".ads.clearleft",
        ".paragraph.paragraph--type--remote-video.paragraph--view-mode--default",
        ".paragraph.paragraph--type--more-on-this-topic.paragraph--view-mode--default",
        ".image-style-large30x20",
        ".caption-text",
        ".caption-text",
        ".paragraph.paragraph--type--image.paragraph--view-mode--default",
        ".paragraph.paragraph--type--sph-brightcove-video.paragraph--view-mode--default"
    ]
    
    

    Original url: https://www.straitstimes.com/singapore/he-took-on-apple-samsung-10-things-about-creative-ceo-sim-wong-hoo-singapore-s-first-technopreneur

    opened by lindy-bot 0
  • Add 6 blocklist selectors for straitstimes.com

    Add 6 blocklist selectors for straitstimes.com

    A user submitted these element block selectors from within the extension.

    [
        ".ads.clearleft",
        ".paragraph.paragraph--type--more-on-this-topic.paragraph--view-mode--default",
        ".paragraph.paragraph--type--remote-video.paragraph--view-mode--default",
        ".image-style-large30x20",
        ".paragraph.paragraph--type--image.paragraph--view-mode--default",
        ".paragraph.paragraph--type--sph-brightcove-video.paragraph--view-mode--default"
    ]
    
    

    Original url: https://www.straitstimes.com/singapore/he-took-on-apple-samsung-10-things-about-creative-ceo-sim-wong-hoo-singapore-s-first-technopreneur

    opened by lindy-bot 0
Releases(0.20.0)
  • 0.20.0(Oct 24, 2022)

    0.20.0 adds the first version of the "Unclutter Library", a modal you can open inside Unclutter by pressing TAB on your keyboard.

    Your library shows articles you've opened and completed, sorted by time. You can also drag & drop articles into your reading queue and install the Unclutter New Tab extension (Chrome, Firefox) to access your queue from your new tab page.

    There's much more to come for this, including:

    • Reviewing highlights you created inside Unclutter
    • Importing and exporting articles
    • Using AI topic classification to organize articles
    library

    As always, just open an issue for anything to improve or add next!

    Source code(tar.gz)
    Source code(zip)
  • 0.16.0(Jun 21, 2022)

    This release makes Unclutter work better on more articles, and adds the element blocker mode to remove every distraction:

    element-blocking

    Internally, the page text detection has been significantly rewritten to avoid removing the main page text, to remove more non-text elements, and to clean up more empty space around the page headings.

    For the last 5% of articles where this still doesn't work well (or where it misses some distractions), there are new buttons inside the "bug" tooltip in the top right of each page:

    • Report page automatically creates a GitHub issue which I'll take a look at.
    • Block elements allows you to immediately remove distracting page elements (see the gif above). This also creates a Pull-Request so everyone else gets your changes too.

    See the docs for more details.

    Many other things got fixed as well thanks to many bug reports by you all over the last weeks. Happy reading!

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(497.61 KB)
    extension_manifest-v3.zip(497.59 KB)
  • 0.15.0(May 27, 2022)

    This release improves the article uncluttering algorithm, to make it work more consistently and to show the page changes it's performing. Hopefully, this makes activating the extension a nicer experience:

    animation-demo

    There's not much more to say this week! If you're curious, the orchestration of the animated page changes happens in transitions.ts, which took quite a bit of work to get right.

    If you find bugs on certain article pages, please report them here!

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(472.87 KB)
    extension_manifest-v3.zip(472.86 KB)
  • 0.14.0(May 19, 2022)

    This release adds social highlights to the extension! If you happen to visit one of the 24.795 currently supported articles you'll its most important ideas underlined in the article text. The number of these social highlights also appears on the extension icon when there are some.

    Just click on the underlined text to see the related conversation on Hacker News or Hypothes.is: (here's how this works)

    Screenshot 2022-05-18 at 6 51 20 PM

    (This is a screenshot from Why the past 10 years of American life have been uniquely stupid)

    If you want to create your own public comment, annotate any text in the extension and configure the sync with Hypothes.is. Then you'll see a "globe" icon on your annotation to get replies from other readers.

    Screenshot 2022-05-18 at 7 00 16 PM

    Of course, this can be turned off via the toolbar in the top right of the article view. Showing the number of social highlights on the extension icon can be customized seperately in the extension settings. But if you do try out the feature, please let me know what you think!

    For the next release, I'm taking a look again at some of the basics: fixing bugs in the uncluttering algorithm and making the entire process smoother. See you then!

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(318.59 KB)
    extension_manifest-v3.zip(318.58 KB)
  • 0.13.0(May 5, 2022)

    This release improves the annotation functionality introduced in 0.12.0:

    • Annotations now show up on the page outline (where available), so that you can quickly jump between different ideas.
    • Next to the article title there's now a progress bar tracking the number of annotations you made on the page.
    • Annotations can be turned off via the "pen" icon in the top right.
    • Fixed bugs like limits to the possible number of annotations per page.
    • UX improvements like automatically focusing the text field of created annotations.
    Screenshot 2022-05-05 at 12 14 03 PM

    You can also now press Alt+C (or ⌥+C on Mac) on your keyboard to activate the extension anywhere! (this is configurable in the settings)

    Hopefully, these improvements make it easier to read great articles more deeply! The next release will add a reading time indicator and keyboard shortcuts.

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(283.86 KB)
    extension_manifest-v3.zip(283.84 KB)
  • 0.12.0(Apr 21, 2022)

    You can now highlight & annotate articles! Just select any text and add an optional note.

    a

    Every annotation is saved automatically: by default in your local browser storage, or to the open Hypothes.is annotation service if you configure it. The latter allows you to see all your annotations in one place and to import them into note-taking tools (more details here).

    Let me know what you think about this first version (either by creating an issue here or through the feedback form)!

    Other changes:

    • Clicking on the background behind articles no longer disables the uncluttered view, as that's often not wanted when interacting with annotations.
    • Major new features now appear as messages inside the extension -- hello if you came from there!
    • Other bug fixes.
    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(276.35 KB)
    extension_manifest-v3.zip(276.34 KB)
  • 0.11.0(Apr 12, 2022)

  • 0.10.1(Apr 7, 2022)

    This release adds and improves the methods of activating the extension on articles:

    • There's now an automatic popup message on cluttered articles. Click it to easily enable the extension. • Or right-click any link and select "Open Link with Unclutter". • The automatic activation feature per domain has been simplified, and the settings page for it has been redesigned. Domains aren't added to the allowlist by default now.

    Screenshot 2022-04-07 at 11 46 16 AM Screenshot 2022-04-07 at 11 46 58 AM Screenshot 2022-04-07 at 11 46 08 AM

    Thank you to everyone who suggested these features!

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(147.82 KB)
    extension_manifest-v3.zip(147.81 KB)
  • 0.9.0(Apr 4, 2022)

  • 0.8.0(Mar 30, 2022)

    Even if there are not many user-facing changes in this release, it contains a complete rewrite of the core website style parsing & patching algorithm. It now uses the CSSOM API instead of parsing CSS stylesheets using postcss -- this reduces the time it takes to unclutter a website by a few hundred milliseconds.

    This means the animation when you enable or disable the extension should be much smoother and there should be fewer layout shifts.

    https://user-images.githubusercontent.com/23430759/160899630-79956e04-405a-4b64-a6a6-4f282614c989.mp4

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(137.85 KB)
    extension_manifest-v3.zip(137.82 KB)
  • 0.7.0(Mar 24, 2022)

    You can now change the text size, page width, and background color per website!

    Screenshot 2022-03-24 at 4 24 13 PM

    These theme settings are saved and automatically apply to other articles on the same website domain. Very small text is enlarged by default.

    The extension now also removes excessive horizontal spacing from text paragraphs -- so articles should appear more consistent in general.

    Screenshot 2022-03-24 at 4 24 34 PM

    Thank you to everyone who suggested the font size feature!

    Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(162.43 KB)
    extension_manifest-v3.zip(162.40 KB)
  • 0.6.0(Mar 22, 2022)

    Thank you everyone for the feedback! This update streamlines the extension settings, the next one will add more features!

    • Moved the extension settings from the popup to the options page. This should reduce the friction of enabling the extension manually. • Added full list of all domain overrides to the settings page. • Added links to the extension settings and bug-report GitHub page in the top right of each article. • Replaced the "Unclutter $DOMAIN" switch with a cleaner icon next to the article. It still retains the same functionality, for more see the tooltip. • Improved the automatic detection of articles, resulting in fewer extension activations on non-articles.

    Screenshot 2022-03-24 at 4 36 26 PM Source code(tar.gz)
    Source code(zip)
    extension_manifest-v2.zip(156.02 KB)
    extension_manifest-v3.zip(156.00 KB)
  • 0.5.0(Mar 24, 2022)

Owner
null
Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.

SPA Check Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things e

Cory Leigh Rahman 5 Dec 23, 2022
Create sticky element in flexbox sidebars. it can use in Vanilla JS and frameworks like Vue and React

js sticky side simple sticky side with js that can use in frameworks like vue and react. notes it can be used just in flexbox grids. target element sh

milad nazari 10 Mar 3, 2022
Airbnb-sanity - 🧳 Chrome extension to hide Airbnb listings you don't like

Airbnb Sanity ?? Coming soon to the Chrome Webstore! Chrome extension to hide Airbnb listings you don't like. Tired of looking through the same Airbnb

Johannes Rieke 4 Apr 4, 2022
App that allows you to control and watch YouTube videos using hand gestures. Additionally, app that allows you to search for videos, playlists, and channels.

YouTube Alternative Interaction App An app I made with Edward Wu that allows you to search and watch videos from YouTube. Leverages Google's YouTube D

Aaron Lam 2 Dec 28, 2021
we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Understanding DOMs, JQuery, Ajax, Prototypes etc.

JavaScript-for-Complete-Web Development. we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Underst

prasam jain 2 Jul 22, 2022
Finer control of the Obsidian sidebars. To be used with an external window manager.

Sidebar Toggler Finer control of the Obsidian sidebars. To be used with an external window manager. What the plugin does It adds four commands for tog

pseudometa 8 Nov 4, 2022
A discord bot to track "owo", usually used to help with OwO bot. Made with Discord.js v13 includes Slash commands, Leaderboards, Auto Resets etc.

Discord-OwO-tracker A discord bot to track "owo", usually used to help with OwO bot Requirements Discord.js v13 (npm install discord.js@latest) applic

Astrex 4 Nov 24, 2022
It's a javascript Class which contains utility methods that simplify working with google maps web SDK

About GoogleMapsJSHelper It's a javascript Class which contains utility methods that simplify working with google maps web SDK Note: i used ES7 Class

Sami Alateya 6 Jul 23, 2022
Angular 14 JWT Authentication & Authorization with Web API and HttpOnly Cookie - Token Based Auth, Router, Forms, HttpClient, BootstrapBootstrap

Angular 14 JWT Authentication with Web API and HttpOnly Cookie example Build Angular 14 JWT Authentication & Authorization example with Web Api, HttpO

null 20 Dec 26, 2022
A command line application to simplify the git workflow on committing, pushing and others commands.

Git-Suite A command line application to simplify the git workflow on committing, pushing and others commands. Prerequisites Install Node Package Manag

Lucas Gobatto 5 Aug 10, 2022
A tool to simplify importing custom assets in Minecraft

BAMO - Block And Move On A tool to simplify importing custom assets in Minecraft Currently only allows you to quickly prototype models in-game, but fu

Tom Mudway 3 Jul 15, 2022
'event-driven' library aims to simplify building backends in an event driven style

'event-driven' library aims to simplify building backends in an event driven style(event driven architecture). For message broker, light weight Redis Stream is used and for event store, the well known NoSQL database, MongoDB, is used.

Sihoon Kim 11 Jan 4, 2023
Wen? Now! A library to simplify your Web3 data fetching.

Wen Connect? Now! Minimalistic library for Web3 user interfaces. Seamless connection flows to Metamask. Stateless sessions that work anywhere (client,

Guillaume Bibeau-laviolette 20 Jul 20, 2022
🛫 TypeScript Starter template to simplify creating your next npm package.

TypeScript Starter Kit This is an opinionated TypeScript Starter kit to help kick-start development of your next npm package. ?? Get Started Luckily,

Open Web 7 Sep 27, 2022
🛫 TypeScript Starter template to simplify creating your next npm package.

TypeScript Starter Kit This is an opinionated TypeScript Starter kit to help kick-start development of your next npm package. ?? Get Started Luckily,

Open Web Foundation 5 May 19, 2022
Simplify the installation of a Silverstripe Dev Environment.

silverstripe docker starter Simplify the installation of a Silverstripe Dev Environment. The silverstripe docker starter is based on the silverstripe/

brandcom 3 Jul 7, 2022
A library to simplify the https://photop.live REST api.

Photop.js Thanks a lot to stalicites (qa#1337) for writing the documentation... Photop.js is a library created by IMPixel, and used to accomplish crea

null 5 Jul 30, 2022
Extension forcing Reddit videos to be played by the fallback player.

⚡ FRP: The "Fuck Reddit Player" extension Simple extension to force Reddit videos to be played by the fallback player. Installation: ?? addons.mozilla

Akiyue 9 Oct 21, 2022