Chrome Extension to Boost Productivity

1 The Distraction Problem

How many times do you find yourself at the end of the day realizing you did nothing productive? In this age of technology, we have a new challenge that our predecessors didn't have: DISTRACTION.

According to Fortune, Americans spend an average of 5 hours and 16 minutes on their phones daily in 2026 - a 14% increase from 2024. We check our phones approximately 186 times per day.

Additionally, people now spend over 2.5 hours daily on social media, hopping between an average of 6.75 different social networks per month. We all are trying to counter this habit in multiple ways.

2 The Solution: Website Blocker Extension

One solution that works for me is to block websites. There are paid solutions available, but why pay if we can write one ourselves?

In this tutorial, I share a Chrome extension that not only blocks distracting websites but also presents motivational quotes every time you try to visit a blocked website.

The full source code is available on my GitHub repository.

Key Features

• Custom Block List: Add any website you want to block
• Motivational Quotes: See inspiring messages instead of distractions
• Open Source: Customize it however you like
• Free: No subscription fees or premium tiers

3 How It Works

The extension uses Chrome's webRequest API to intercept requests to blocked domains. Here's a simplified view of the core blocking logic:

// background.js - Core blocking logic
const blockedSites = [
    "*://*.facebook.com/*",
    "*://*.twitter.com/*",
    "*://*.instagram.com/*",
    "*://*.reddit.com/*"
];

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        return { redirectUrl: chrome.runtime.getURL("blocked.html") };
    },
    { urls: blockedSites },
    ["blocking"]
);

Installation Steps

1. Clone or download the repository from GitHub
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked" and select the extension folder
5. Edit background.js to customize your blocked websites

4 Video Tutorial

The video below explains how to set up the extension and demonstrates how it works in practice:

5 Alternative Extensions (2026)

If you prefer a ready-made solution, here are some popular website blocker extensions available in 2026:

6 Related Reading

Continue your productivity and web development journey with these related guides:

• Top Google Chrome Extensions for Salesforce - Curated list of 18 productivity-boosting Chrome extensions for Salesforce developers
• Tips to Effectively Use Google Chrome Developer Tools - Master debugging with Console API and Command Line API techniques
• Getting Started with Jasmine Test Framework - Learn JavaScript testing fundamentals for better code quality

7 Frequently Asked Questions