A chrome plugin to block Facebook

One day I stopped what I was doing and checked in my browsing history, and wasn't surprised to find multiple Facebook links in there. This wasn't helping because I had so many tasks to accomplish as soon as possible. I was addicted to Facebook, that I couldn't focus for 30min without opening it at least twice.

I seriously wanted to end this and rather increase my productivity.

Then I came up with an idea.

John Johnson said: First, solve the problem. then write the code.

I have never liked to install the Facebook app on my phone, so I had to figure out how to control it on my laptop. Two options were possible. To find a desktop app that can control my browsing habit, or find a plugin that does this job. I was ready to try to program any software that could solve this problem.

After trying several chrome plugins, I wasn't satisfied. So I decided to code it for myself. It was completed in 2 weeks and it was easier than I thought. I was happy. Then I started to use it for over a year and realised that I could even spend 3 days without opening it, the bad habit was no more. Do I mean that Facebook is bad? No, It's up to you. But personally, it had affected my attention span.

Here is a demo of the plugin. Later I added an additional section of opening chrome tabs automatically so that when I am focused on something else, the important tabs could open. I could also control the time frame for Twitter and Instagram. Does it mean that I like Twitter and Instagram? Yes.

https://youtu.be/wdw4MsuwzE4

If you would like to create a similar plugin here is a general concept:

I. Created the manifest.json file to have a hello world kind of beginning

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
}

Reference

Next step:

II. Having an HTML interface options.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

Remember to register your options page in manifest

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html"
}

In my case, I added Jquery and options.js files to support the options.html page

  "options_page": "options.html",
  "background": { "scripts": ["background.js","js/jquery.js", "options.js"] },
  "manifest_version": 2,
  "web_accessible_resources": [
    "48.png"
  ]

III. Then while the plugin was installed properly, I wanted to detect websites that I visit

If you verify all, you can use:

"content_scripts": [ {
  "matches": ["http://*"],
  "js": ["scripts.js"]
} ]

In my case:

  "content_scripts": [
    {
      "matches": ["https://web.facebook.com/*","https://twitter.com/*","https://www.instagram.com/*" ],
      "css": ["modal.css"],
      "js": ["modal.js"]

    }
  ],

IV. I needed to store some variables (time to block, links to open automatically)

 "permissions": [
    "notifications", "storage", "activeTab", "tabs"
  ],

Reference

V. Then if I can save the time to block, links to open, the rest is doing simple calculations

If the current time is not in between stored time periods then there is no problem

Else, cover the entire page with a message "Currently blocked"

 if (urls.match(/web.facebook.*/)) {
     if (currentTime>=storedTimeFrom && CurrentTime<=storedTimeTo){     
        chrome.extension.sendRequest("request message", function(response_str) {
        document.write("<div id='myModal' class='modal'>");
        document.write("<div class='modal-content'>");
        document.write("<h1> Currently blocked! </h1>");
        document.write(" </div>");
        document.write("</div>");
        var modal = document.getElementById('myModal');
           modal.style.display = "block";
              });
         }
    }

To hide the entire website.

Automatically opening a tab is quite simple:

  if(CurrentTIMe==StoredTimeFrom && StoredLink!=' '){
     window.open(StoredLink, '_blank');
   }

Conclusion:

It is always a good idea to solve the problem first, by analysing it, finding what is causing what, properly study the situation before starting to code. When you can identify the real issue, then it is time to find the optimal solution. It is also good to stay open because some solutions will require a different programming language or framework.

End.

How I came up with a chrome plugin that helped me to increase productivity