Code Monkey home page Code Monkey logo

nodistractions's Introduction

NoDistractions

NoDistractions logo

Simple, bloat-free website blocker with a focus on intuitiveness. Basic functionality shouldn't be hidden and configuring shouldn't be rocket science.

Use if: You just want a simple add-on to block distracting websites when enabled, an extension that has an intuitive and straightforward UI.
Don't use if: You require very specific features such as blocking only being active at specific times of day. The add-on being active is merely meant to serve as a reminder that you have chosen to be productive.

Features:

  • Sites are easy to add and doing so requires just two simple mouse clicks, you don't have to navigate through confusing menus.
  • Blocking can easily be toggled on or off through a popup. A keybinding is also available (CTRL+ALT+D).
  • The ability to temporarily visit a website (for just a minute or two) is available. It's possible to toggle this feature off in the settings, for those with bad impulse control.
  • Being simple doesn't equate to not being powerful; advanced site patterns (using URL Match patterns) are available for users with more specific needs (see the help section of the popup).
  • The extension is open-source, meaning that I am not afraid of hiding the code behind the extension and I allow users to contribute to it if they want to implement a feature.

Screenshot

Screenshot showing the UI

Contributing

It's designed to be very simple, while staying powerful, so keep that in mind if you are considering contributing. If your contribution is very minor, feel free to create a pull request directly. Otherwise, please create an issue first, otherwise you might work in vain in case I don't think the feature fits the scope of the project. Try to stick to the code-style that the rest of the code is using as well.

Installation

Download from the Mozilla Firefox add-on store

Running and building

Install the dependencies with npm install

For debugging

npm run debug will open a firefox instantance with the extension loaded and the about:debugging page open (for viewing the background page).

For building

npm run build:firefox will build a zip file in a folder called web-ext-artifacts, which you can temporary load the addon with from about:debugging.

nodistractions's People

Contributors

asciijakob avatar tuurep avatar

Stargazers

 avatar Steven Fitzpatrick avatar  avatar

Watchers

 avatar  avatar

Forkers

tuurep

nodistractions's Issues

Support edge/chrome

Add support for edge. Since you can add chrome extension to edge, it should be adequate just to support chrome, but being on the Edge store could also be a plus since it is probably what the majority of Edge users use. Supporting chrome will also support other big browsers such as Vivaldi, Brave etc.

Detect URL changes in single page applications

Since Single Page Applications (SAP) change the url without actually loading a new page, this won't be detected by webrRequest's onBeforeRequest method.
This is only an issue with advanced block filters, which is not a central feature of the extension.

reproduce:

  1. Add !*://*.reddit.com/r/kittens/* as a filter
  2. Visit Reddit homepage
  3. Navigate to the r/kitten subreddit through the search bar
  4. The site does not get blocked.

Feature request: Remember status on browser startup

Hi! I love your extension, it's almost ideal for what I'm trying to do with a 'distracting website blocker'.

I have one fundamental issue though: I tend to close and reopen firefox constantly, and would like the addon to stay at the same status it was when I last closed.

However right now the settings only allow either starting disabled every time, or enabled every time.

Do you think this is solvable?

Feature: Show a desktop notification when extension is toggled with key shortcut

I prefer to not have any extension icons on my firefox toolbar, so I have no feedback whether I successfully toggled on using the key shortcut (default: Ctrl+Alt+D)

The extension already can show a notification when using the "Need to quickly check something? You get X minutes" thing.

So I tried extending that for toggling on key shortcut in the fork here:

tuurep/NoDistractions-fork@a8e7b89

This is how it looks on my setup:

image

image

Literally beautiful.

I think it should be only enabled through a setting, because if you have the extension icon on your toolbar, that's already a nice indication of enabled status.

Note:

The way I added the 'correct color' of the NoDistractions icon feels a bit hacky in the code. Although maybe it's not too bad. Thoughts?

Also since I'm adding meaning based on the color of the icon in the notifiation, think about whether the "You get X minutes" -notification's icon color should be green instead of red.

Option to choose what happens when you go to blocked site

Easy way to make it more versatile while also keeping it simple. Though, it's easy to get into bloat territory here, so have to be careful.

Note: haven't decided on any of these yet, except maybe "go to custom URL"
Example alternatives:

  • Block the page
  • Go to custom URL
  • Wait five seconds
  • Close tab and give notification

Don't save malformed domains in blocklist

image
Malformed domains should either not be saved, or should be ran against a check before getting added into the actual listener.

Also investigate why the failed to add current site. thing is not red but the other malformed domains are.( I wonder if it's because that string contains a dot at the end ๐Ÿ˜„

Feature Idea: Use sync for blocklist

Currently the list of blocked sites ( blockedSites_V1) is using browser.storage.local.set. Of course, this is fine, but some users may find it preferable if the extension has its blocklist synced between different firefox browsers that use the same firefox account. This can be achieved using storage.syncinstead of `storage.local.

I have yet to look into how it works, but I would imagine that storage.sync would not work when there is no firefox sync enabled, therefore this option should probably be an option and should be disabled by default.

This feature would probably also benefit from the extension adding a "reset blocked sites" in settings, as users would no longer be able to reinstall the extension to get rid of the their blocklist.

I am unsure whether this feature is worth implementing or not as of right now, this is due to the fact that no one has requested it and so it may just add unnecessary complexion. If anyone finds it interesting, feel free to either request it or make a merge request.

Dark/Light theme or UI colour improvements

Ideas:

  1. Default light theme and using dark/light theme on system preference with https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  2. Customizing beyond the defaults

However, CSS is already customizable through userContent.css, if you know how. Could that be enough and do we want to add any of the above?

Feature: Setting to hide Close tab -button

  • Although the big button is pretty nice, there are so many ways to close tabs (x on tabs, Ctrl + W, more...), some people might prefer to hide it as unnecessary.
  • Since every other 'bottom' element already has an option to be hidden, this one fits right in

Anecdote: I personally mostly use Ctrl+W and this extension to close tabs :)

UX: make settings page less cluttered

Especially if we're gonna have the option to have both RememberLastStatus and EnableOnStartup, i need to investigate if there is anyway to make that look nice - otherwise I am dropping the latter.

I also should make smaller sections, such as a section for the "Blocking Page" where the settings for hiding certain elements are grouped together.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.