Productivity & Web Tech
Jitendra's Blog
PRODUCTIVITY HACK

Chrome Extension to Boost Productivity

Build your own website blocker that displays motivational quotes instead of distracting content

5h 16m
Daily Phone Screen Time (2026)
186x
Times Americans Check Phones Daily
2.5h+
Daily Social Media Usage
5.66B
Global Social Media Users

1 The Distraction Problem

Article Updated: February 2026

This article has been refreshed with the latest screen time statistics, updated alternative extensions, and current best practices. Originally published December 2023.

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.

Did You Know? Nearly 46% of Americans consider themselves "addicted" to their phones in 2026, and 53% say they have never gone more than 24 hours without their phone.

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

Chrome Extension showing blocked website with motivational quote
Screenshot: When you try to visit a blocked website, you see a motivational quote instead

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
Pro Tip: Start with just 2-3 of your most distracting websites. You can always add more later as you identify your productivity killers.

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:

Extension Key Features Price
BlockSite Usage limits, focus mode, password protection Free / Premium
StayFocusd Time allowances, nuclear option, customizable schedules Free
Freedom Cross-device blocking, session scheduling, locked mode Paid
Cold Turkey Unbypassable blocks, scheduling, app blocking Free / Pro
Important: Building your own extension gives you complete control and privacy. Commercial extensions may collect browsing data for analytics.

6 Related Reading

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

7 Frequently Asked Questions

Create a manifest.json file with the required permissions (webRequest, webRequestBlocking), then write a background.js script that intercepts requests to blocked URLs and redirects them to a custom page showing motivational quotes. The full source code is available on my GitHub repository.
Yes! The extension allows you to edit the background.js file to add or remove websites from your block list. You can block specific domains like social media sites, news sites, or any distracting websites. Use wildcard patterns like *://*.facebook.com/* to block entire domains.
Americans spend an average of 5 hours and 16 minutes per day on their phones and check them approximately 186 times daily. This represents a 14% increase from 2024. Gen Z leads with 6 hours and 27 minutes daily, while Baby Boomers average around 4 hours.
Yes, this extension works on any Chromium-based browser including Google Chrome, Microsoft Edge, Brave, and Opera. Simply enable developer mode and load the unpacked extension in your browser of choice.
Link copied to clipboard!
Previous Post
Talk to any PDF document using AI
Next Post
Moving Authenticated Orgs in Salesforce CLI from One MacBook to Another (Secure Way)
Archives by Year
2026 13 2025 16 2024 2 2023 9 2022 8 2021 4 2020 18 2019 16 2018 21 2017 34 2016 44 2015 54 2014 30 2013 31 2012 46 2011 114 2010 162
Search Blog

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading