Ethan Huang

Dynamic Website Blocker

Dynamic Website Blocker

  • You can also read the article on Medium.
  • Check out the project here.
  • Install the extension here.

The Project

The Dynamic Website Blocker is a browser extension that uses the concept of “rewarding” users a certain amount of time on demerit sites rather than outright banning them. This project came to fruition after discovering that most applications that help eliminate distractions are too rigid and inflexible. For example, instead of punishing users by removing access to a website, the Dynamic Website Blocker rewards users with time to access demerit sites, given they have spent enough time on merit sites. A significant problem I encountered was learning JavaScript and the chrome extension API from scratch while fixing occasional bugs and developing workarounds due to the limitations of the newly released Manifest V3 required for chrome extensions.

Problem

As stated earlier, this project was created to allow users to stay on task but also have the freedom to visit demerit sites, if necessary, for fun or actual purposes. This project attempts to solve some limitations that other “anti-distraction” applications might have.

These applications block a website or allow a specific time frame to access these demerit sites. However, these methods come with some severe limitations. For this brief case study, YouTube will be used as an example of a demerit site.

Completely Blocking Access

Although this method is the most effective at eliminating distractions, it is also flawed. Sometimes the user has to use YouTube as their teacher may have assigned them work to do relating to a particular video, or the user may want to learn new skills. By completely blocking access to YouTube, the user cannot complete the necessary tasks and is forced to unblock this site. However, this poses a risk that once liberated, the user might eventually get distracted and still waste time, thus making this method useless.

Time-frame For Site Access

This method allows the user to access the site from time x to time y, and the site will be blocked otherwise. This method is also flawed; if the user is beyond the time-frame, the same problem with completely blocking access to a website also applies. However, another issue arises during the time-frame. Nothing stops the user from browsing other content on YouTube during the time-frame and thus being distracted.

Solution

The Dynamic Website Blocker has a unique implementation for blocking sites. Like both applications, the user will specify the website they want to spend less time on. However, the distinguishing feature is that the user can visit these demerit sites as long as they want and as much as they want, given they have enough points. The user initially starts at zero points, and they can earn points by being on merit websites (in this case, any website that is not on the demerit site list), and the rate they earn these points could be adjusted in a setting called Merit Weight. Having earnt a certain number of points, the user could visit the demerit sites, but for every second they spend on demerit sites, a certain number of points determined by the Demerit Weight will be deducted. Once the user reaches zero points, the demerit sites will be blocked, and to re-access them, the user has to go on merit sites to regain their points. This is the Dynamic part of the Dynamic Website Blocker.

In this way, this implementation eliminates the limitations of traditional website blockers as it allows viewing the demerit sites while banning them when such viewing becomes excessive. settings

Features

There are additional features which help allows for better ease of use.

  1. Auto-fill Common Sites: Auto fills block sites with common distractors.
  2. Merit Weight: Points added per minute on merit sites.
  3. Demerit Weight: Points subtracted per minute on demerit sites.
  4. Enable/Disable Settings: Makes the settings editable or not. Once enabled, to edit the settings, the user has to disable this, which resets their points to zero. This prevents people from abusing the extension and editing the settings to suit themselves.
  5. Maximum Points Accumulated: A limit on points accumulated, preventing them from leaving their devices overnight to accumulate points.
  6. Reset Points After Closure: Once enabled, points will reset if browser is closed.
  7. Permanent Block List: Permanently blocks websites.
  8. Block By Category: Permanently block websites by category (adult websites).
  9. Whitelist: Allows the user to unblock certain links like specific videos on YouTube. alt text

Conclusion And Acknowledgements

The core of the project functions as I wished it to perform. However, I have to acknowledge that this implementation still has some flaws. First, the Merit Weight has to be less than the Demerit Weight. This means that the user must spend more time on merit sites to earn time to access demerit sites. If Merit Weight is greater than Demerit Weight, then it defeats the purpose of blocking the demerit sites as the user gains more time to access demerit sites for every second, they visit merit sites. Furthermore, the target audience of this project is people who wish to improve their productivity and occasionally. The Dynamic Website Blocker will be ineffective for those addicted to any demerit websites due to the “open trust model” no matter how much hassle I create for them, those who are determined to find a way to access demerit sites will always find a way.

I also want to acknowledge the original creator of block-site https://github.com/penge/block-site, Pavel. Without any JavaScript and extension-creating knowledge, I needed a starting ground to understand the gist of how things worked. Block-site was released under the MIT license, allowing one to “use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software” given they are credited. Without block-site, none of this would have been possible.