Stay Focused and Accomplish More with Focus-Mode: A Chrome Extension for Productivity

Anirudh @ krysins.com
4 min readMay 15, 2023

--

AI generated image of text: “inside a library”

Introduction

In today’s digital world, distractions are everywhere, and staying focused on our tasks can be challenging. Whether it’s social media, news websites, or online games, these distractions can significantly impact our productivity.

Focus-Mode Chrome Extension is designed to help you take control of your browsing habits and boost your productivity.

Overview and Key Features

The Focus-Mode Chrome Extension is a user-friendly and customizable productivity tool that empowers you to temporarily block distracting websites. Here are some of its key features:

  1. Easy Management of Blocked Websites: With the extension’s intuitive options page, you can effortlessly add, delete, and view a list of websites that you want to block. This ensures that you have full control over the websites that can potentially distract you.
  2. Seamless Blocking Across Tabs: The extension works seamlessly across all open tabs, ensuring a distraction-free browsing experience. No matter how many tabs you have open, the blocked websites will remain inaccessible, enabling you to maintain your focus on important tasks.
  3. Customizable Blocking Duration: You can set the duration for which the websites will be blocked according to your needs. Whether it’s 25 minutes, 1 hour, or any other time period between 1 minute and 1 hour, the choice is yours. Once the timer expires, the blocked websites will become accessible again.
  4. Visual Reminder with “Blocked Temporarily” Overlay: When you visit a blocked website, the extension displays a visual reminder “Blocked Temporarily” overlay page. This friendly reminder serves as a visual cue to stay focused and avoid distractions.

Aren’t there many such extensions in the market?

Yes there are! However, when we explored similar chrome extension library we saw things we were not comfortable with.

  • Some requested for too much access rights permissions (was not aware that key-logging was a possibility).
One of the extensions claimed to be logging keystrokes!
  • Some were collecting too much data about you.
Another extension collects all highlighted details!
  • Some were expensive i.e. there was monthly subscription fee per user.

These were self disclosures and difficult to ascertain without reviewing the code which of these information they actually collect and which not.

Finally, we decided it’s not too difficult to quickly build something that suits our purpose and does not have above limitations. Moreover, we shared the code for others to inspect for data security issues.

How to Get Started with Focus-Mode

Getting started with the Focus-Mode Chrome Extension is simple:

  1. Install the Extension

You can easily install the extension by following these steps:

Github clone / download option
  • Open Google Chrome and navigate to chrome://extensions.
  • Enable the “Developer mode” option.
  • Click on “Load unpacked” and select the cloned/downloaded folder.
  • The Website Blocker Chrome Extension will be installed and ready to use.
  • Pin the extension to the toolbar by clicking on pin icon

2. Customize Your Blocked Websites List

Access the extension options page by right-clicking on the extension icon in the Chrome toolbar. From there, you can add the URLs of the websites you want to block temporarily. You can also delete or view the existing list of blocked websites.

3. Set the Blocking Duration

On the options page, you can set the desired duration for which the websites will be blocked. Choose a time period that suits your workflow and helps you maximize your productivity.

4. Enjoy Uninterrupted Focus

Once you start the timer, the extension will block the designated websites across all open tabs. Focus on your tasks without worrying about digital distractions. When the timer expires, you’ll be notified with a chrome notification, and the blocked websites will become accessible again.

Below is a video showing steps of installation and usage

Video link showing how to install and use Focus-Mode

What to expect next?

  • For the technically savvy we will write another article to explain the architecture of this chrome extension with detailed steps on how to build this app. We hope this article will help users write their own chrome extension.
  • Create a chrome extension that uses OpenAI to perform tasks like summarization of the text on the active chrome tab.

--

--

Anirudh @ krysins.com

To use my passion for learning and problem-solving to create innovative solutions that improve productivity and share my learnings to help others.