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

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:
- 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.
- 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.
- 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.
- 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).

- Some were collecting too much data about you.

- 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:
- Install the Extension
You can easily install the extension by following these steps:
- Clone or download the extension from the GitHub repository.

- 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
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.