DistractMeNot Chrome Extension

DistractMeNot is a productivity Chrome Extension app that allows Google Chrome Browser users to create a list of blacklisted URLs so that anytime the user visits those sites, Google Chrome will automatically close those tabs.

The problem I was facing was sometimes I catch myself going off task and visiting sites that wastes my time. I was then reminded by the idea of parental control tools. It was then I came up with the idea of why not create a Chrome Extension that automatically closes a list of blacklisted URLs?! Because I was confident I won't try to cheat the system, I kept the DistractMeNot Chrome Extension requirements pretty simple. Plus, it was a great excuse for me to dive deeper into the realm of creating Chrome Extensions, and I love creating productivity apps.

The DistractMeNot Chrome Extension is also available for download as open source software on my GitHub repository. You can check it out by clicking the button below.

• Source Code

• Web Design
• Web Development
• Chrome Extension

What I Did

To explain what I did, I must first explain the project requirements:

• User must be able to enter a unlimited amount of URLs to blacklist.
• Blacklisted URLs must automatically close when detected in the browser window tabs.
• The blacklisted URLs must be remembered by the browser in the next startup session.
• User must be able to clear all URLs stored via a "Reset" button.
• User must be able to toggle ON/OFF the Chrome Extension.

First I implemented a basic UI using HTML5 and CSS3 along with the interactive elements needed to satisfy the user's ability to enter URLs into the blacklist, buttons to process it, as well as a checkbox to toggle it. Then I proceeded by setting up event listeners to handle the interactive elements' state changes inside the file popup.js which will then trigger the chrome.runtime.sendMessage(); function which will send either a URL inputted by the user or a reset boolean to the backend javascript code which will handle all of the browser scope activity via the Chrome Browser API in the background.js file. While in the background.js file, its job is to handle all the URL blacklisting storage and management, as well as scanning the tabs via the following code:

          
            chrome.tabs.onUpdated.addListener(function() {
              chrome.tabs.query(params, tabRemover);
            });
          
        

What this does is it keeps an eye out on any changes that occur in the tabs of the Chrome Browser. This allows DistractMeNot to actively listen to whenever a blacklisted URL is detected, the tabs are then parsed via the chrome.tabs.query(); function. In the actual full code, it calls a function I made called "tabRemover()" which handles looping through the tabs and then calling the chrome.tabs.remove(); function to perform the actual closing of the blacklisted URL tab.

The Technology Stack

• HTML5
• CSS3
• Javascript

Challenges

Because this is my first official Chrome Extension project that had a useful purpose to it, I faced a few new challenges:

• Deciding how data should flow from the frontend to the backend.

Data Flow From Frontend to Backend

One main challenge I faced in this project had to be the data flow mainly due to the fact that all the browser scoped activities is handled by a background.js script file which is designated via the manifest.json file.

What I ended up doing in order to transfer the URL input from the user as well as other event actions is via the chrome.runtime.sendMessage(); function. A small json object is then sent to the background.js file which then catches the response via the chrome.runtime.onMessage(); function. From there, I extract the information, and processed it with if/else conditional statements.

To solve the issue of remembering the URL blacklist data for the next browser session, I stored the data inside the browser's localStorage. That way, on the next browser session, the DistractMeNot Chrome Extension will check if the urlBlacklist item exists, and if it does, it will parse it via the JSON.parse() and store it into a urlBlacklist array in memory.

There was one challenge I was unable to solve and that was whenever a new URL is entered, and if the tab containing that URL is already active, it won't close until after a new tab is made which is due to the chrome.tabs.onUpdated.addListener event listener function. One temporary solution I have thought of considering implementing is to have the extension automatically open a new tab, then closing the new tab immediately to trigger a tab update event. However, I ultimately abandoned that idea since it will seem suspicious to an end user.

What I Would Do Differently

Given the fact that this was just a personal side project, storing the URL blacklist in the browser's localStorage so it can persist in the next new browsing session is good enough. However, if I wanted to take this project to the next level for use by others, I would create a database on a remote server to store the URL blacklist on top of adding a simple user authentication/authorization system. That way, users can install the same plugin on a different computer and utilize their existing URL blacklist. Not only that, by doing this, it opens the possibility to building an equivalent extension for other browsers.