Skip to content

A web-extension for Chrome to filter what you see on the web to become less distractive.

License

Notifications You must be signed in to change notification settings

JeremieLitzler/website-blocker-extension

Repository files navigation

A very simple but flexible block-site extension for Chrome

🚨🚨🚨 The extension is still in beta mode as long as the v1 isn't released. 🚨🚨🚨

Why this extension

I used to pay for BlockSite extension, but somehow, I was not really using it.

It works great but I couldn't setup time range when I wanted some websites to be disabled.

It allowed time ranges applying to all blocked websites.

How to use Website Blocker ⁉️

  1. Download the source code and unzip it in your preferred location.
  2. Browse to chrome://extensions/.
  3. Activate the Developer mode at the top right of the tab.
  4. Click load unpacked and select the directory where you unzip the source code
  5. If the installation completed, click Details on the extension
  6. Active Pin to toolbar
  7. Start configuring the website to block

Features ✅

A blocking entry is defined with:

  • a URL chunk (ex: "youtube" or even "youtube.com")
  • a start time (hour:minute)
  • an end time (hour:minute)

You can have several entries with the same URL chunk but different time ranges.

You cannot disable the website blocker in the settings while keeping the extension enabled because I feel that it will allow you to cheat. You can still update the time range you're blocking the

You can :

  • Add as many websites as possible
  • Allow to remove a single entry
  • Add as many time ranges as possible per website
  • Block any website browsed to in the current hour and minute falls between any of the entries
  • Use the autocomplete when typing url chunck value
  • See the blocked page with a random background changes pulled from Lorem Picsum.
  • Store entries in indexedDb
  • Edit each entry's start and end time
  • Add the blocked website URL and a button to open the settings.
  • Export and import configuration from a CSV file
  • Export and import configuration from a JSON file
  • Export and import configuration from Google Drive (#3)
    • Note: while this work for me, I have yet to publish the OAuth application on Google. You can ask me to add you a test user, if you want to try in the meantime.
  • Display a random quote about staying focused, indistractable or working on one task at a time (#2)
  • Display a random call-to-action as the heading about staying focused, indistractable or working on one task at a time (#15)
  • Add the ability to select the day(s) of the week when the time range applies (#16)
  • Show "Unsaved changes" message when editing (#17)
  • Add form validation when typing the times (see issue why I cancelled this > #5)
  • Implement the blocking feature to check the time and the day of week when blocking a URL (#18)
  • Add a calendar view of the blocked sites (#14)
  • Improve popup UI of blocked page (#10)
  • Warn user about overlapping time ranges for same website (#4)
  • Add a Pomodoro timer to the extension (#6)
  • Allow blocked websites during pomodoro short breaks (#7)
  • Add the ability to send desktop push notifications when a website becomes unblocked (#13)
  • Publish the extension to the Chrome Webstore (#12)
  • Publish the OAuth application (#11)
  • Convert to TypeScript (#8)
  • Add tests (#9)

Troubleshooting 🐞

If your blocked websites aren't blocked, try the following:

  1. Reload the extension
  2. Reinstall the extension
  3. Finally, submit a bug and as many details as possible to reproduce the issue.

Supporting this project 🙋

You can submit pull request for bugs at anytime. For new feature, please describe why you need it.

For financial support, please use my sponsor page.

Credits

Thanks to the team at Anthropic for developping Claude.ai. It helped me greatly to build this!

About

A web-extension for Chrome to filter what you see on the web to become less distractive.

Resources

License

Stars

Watchers

Forks

Packages

No packages published