Distraction Free Reddit is a Chrome extension designed to help users to engage with Reddit more intentionally. With this extension, users can block off parts of the site that they find most distracting, allowing them to cut out mindless scrolling and focus on the content that matters to them.
Note: This works with the Reddit redesign only. Old Reddit (old.reddit.com) is not supported — the extension detects it and disables itself.
To install the extension, follow these steps:
- Go to the Chrome Web Store and search for "Distraction Free Reddit"
- Click the "Add to Chrome" button
- Click "Add Extension" to confirm the installation
Requires Node 22 or newer (Vite 7 needs ^20.19.0 || >=22.12.0). No other toolchain is needed.
npm ci # install exactly what the lockfile specifies
npm run build:chrome # -> build_chrome/
npm run build:firefox # -> build_firefox/
npm run build:both # both of the aboveEach build writes an unpacked extension to a build_[BROWSER_NAME] folder at the top level. Load it in your browser:
- Chrome —
chrome://extensions, enable Developer mode, "Load unpacked", selectbuild_chrome - Firefox —
about:debugging#/runtime/this-firefox, "Load Temporary Add-on", select any file insidebuild_firefox
Chrome and Firefox build from separate manifests (src/chrome/manifest.json and src/firefox/manifest.json), so it is worth building both when changing anything manifest-related.
npm run dev:chrome # vite dev server
npm run dev:firefox
npm run typecheck # tsc --noEmit
npm test # vitest run
npm run test:watch # vitest in watch modenpm run build:* uses esbuild and does not typecheck, so run npm run typecheck separately. CI runs typecheck, tests and both builds on every pull request.
- Install the extension in your browser (see installation instructions).
- Click on the extension icon in your browser toolbar to open the options menu.
- Enable the extension
- Click on the options button to open the settings
- Choose the settings you want to apply to your Reddit browsing experience, including hiding the main feed, hiding certain subreddits, and enabling whitelist or blacklist modes.
Changes take effect immediately on any open Reddit tab — no refresh needed.
Distraction Free Reddit allows you to customize your Reddit experience by hiding various parts of the site that can lead to mindless scrolling and distract you from your goals. Here are some of the features:
- Hide main feed: Hide the main feed of posts on the Reddit homepage, to help you avoid getting sucked into endless scrolling.
- Hide r/all and r/popular: Hide the r/all and r/popular feeds, which can be sources of distractions and time-wasting content.
- Hide Explore: Hide the Explore page used to browse topics and communities.
- Hide subreddit feeds: Hide subreddit feeds so only individual posts remain reachable.
- Hide user profiles: Hide other people's profile pages. Your own profile stays visible.
- Hide full page search: Hide full page search results, which can be a source of distractions.
- Hide trending news: Hide the trending suggestions that appear when you click the search bar.
- Hide sidebar: Hide the sidebar on the homepage and subreddit feeds, which can contain distracting or irrelevant information.
- Hide comments: Hide the comment sections on posts, which can be a source of time-wasting debates or irrelevant information.
- Hide videos: Hide videos and gifs, with per-subreddit exemptions via your whitelist.
- Hide notifications: Hide the inbox indicator and the notifications page.
- Hide the Reddit logo in the page header.
- Whitelist mode: Only allow access to subreddits you specify. This can help you focus on content that is relevant to your interests or goals.
- Blacklist mode: Block access to subreddits you find distracting or unhelpful. This can help you avoid time-wasting content and stay focused on your goals.
Ads are always hidden while the extension is enabled.
These settings will hopefully allow you to use reddit in a more intentional way and encourage a healthier relationship with the site.
Blocking is done with CSS, not by manipulating Reddit's DOM.
src/styles/blocker.css is injected by the manifest at document_start, before Reddit's markup exists. The content script never hides elements itself — it decides which blocks apply and toggles data-dfr-* attributes on the <html> element. The stylesheet's html[data-dfr-hide-x] <selector> rules do all the matching, including for elements Reddit renders later.
URL + settings -> computeBlocks() -> applyBlocks() -> blocker.css
pure, testable sets attributes hides elements
on <html>
src/common/blocks/compute-blocks.ts— the single decision point. Pure function, no DOM, covered by tests.src/common/blocks/apply-blocks.ts— the only module that writes to the DOM.src/styles/blocker.css— where every selector lives.src/common/util/url-parser.ts— classifies a URL into aPageType.
Two things CSS can't do on its own, each isolated in its own module: video rules depend on the user's whitelist so they're generated at runtime, and trending news lives inside a shadow root so a small stylesheet is injected there instead.
Settings are stored with storage.sync and propagate to open tabs through storage.onChanged. The background script only seeds defaults on install.
If you would like to contribute to this project, please follow these steps:
- Fork the repository
- Make your changes
- Submit a pull request
This project is licensed under the MIT License.
I'm always looking for ways the extension and make it more useful. If you have an idea for a new feature or notice a bug, please don't hesitate to let me know! You can visit the issues page in the repository and create a new issue with the "feature request" or "bug" label.
Additionally, I'm always open to feedback on how the extension is working for you and how it can be improved. If you have any suggestions or just want to say hi, feel free to create a new issue with the "feedback" label!
Thanks for using Distraction Free Reddit and for helping me make it better!
The extension popup
The general settings that can be configured
The whitelist screen
Example of the blocking taking place