I stopped wasting time while browsing

23 Jul, 2023

This weekend, I went down a nostalgic rabbit hole that revolved around the old internet. For this post, I'll focus on one segment of that rabbit hole and that's forums.

Man, I miss forums. If, back in the approx. 2005s, you were like me, chances are you've been part of a forum or two. In my case, I was part of a car forum & a meteorology forum. Now, cars are my passion, so that first one makes sense, but for some reason, I was also part of a meteorology forum.

Back then, I was in school, and of course, I didn't have access to internet until I came back home from school. And even then, I had a small gap where I would be able to use the internet because the electricity was expensive until 8pm when it switched over to a 'cheaper' tariff. I don't remember exactly how that worked, but trust me.

I'd come home and I'd read up on all the stuff I've missed. I felt like all those people were friends, in one way or the other. I learned so much. Everyone was putting tons of effort into sharing their stories/experiences/work they did. The posts were, in most cases, quality. For example, with that car forum, people would document their restorations from the beginning, till the finished product. And, you might say, well YouTube has that. Yes, it does, but all those videos are "engineered" to bring in money. On the forum, the story was different. People put all their effort into doing the right write-ups and capturing the right pictures because they cared. Money was no motivator.

Anywho, I digressed a bit but I'll do a proper article on this at a later day.

So, how I stopped wasting time while browsing. Back in the 2005s, it was quite common to see websites down. Especially when they've had maintenance. And back then, you were used to having internet access only at specific times in the day, mainly in the evening.

That got me to build a non-spectacular extension. It simply blocks the websites for certain periods of the day, but what makes it different is that it shows you that that page is under maintenance and tells you when it'll be back up. Dumb, isn't it? There's a million other extensions that let you block sites for specific periods of the day, but for some reason, the 'maintenance' fact makes it successful for me.

If anyone wants it, I'm dropping the code below. Put everything in a folder, then install it via Google Chrome extensions.

blocked.html

<!DOCTYPE html>
<html>

<head>
    <title>Blocked</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #0c1c2a;
            color: #fff;
            text-align: center;
            padding: 50px;
            max-width: 600px;
            margin: 0 auto;
        }

        h1 {
            font-size: 36px;
            margin-bottom: 30px;
        }

        p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .quote {
            font-size: 20px;
            font-style: italic;
            margin-top: 40px;
        }

        .message-container {
            border: 2px solid #fff;
            padding: 30px;
            border-radius: 10px;
            background-color: #0c1c2a;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
        }

        table, th, td {
            border: 1px solid #fff;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #1a2a3a;
        }

        td {
            background-color: #0c1c2a;
        }
    </style>
    <script src="blocked.js"></script>
</head>

<body>
    <div class="message-container">
        <h1 id="title"></h1>
        <p id="message"></p>
        <p class="quote">"We cannot really save time. We can merely avoid wasting it."</p>
        <!-- Add a button to notify the user when the website becomes available -->
        <button id="notificationButton">Notify Me</button>
    </div>
    <div id="timeSlotsTable"></div>
</body>

</html>

blocked.js

window.onload = function () {
    // Get the stored data
    chrome.storage.local.get(['blockedSite', 'timeSlot'], function (result) {
        // Update the title and message
        document.getElementById('title').innerText = result.blockedSite + ' is down for maintenance';
        document.getElementById('message').innerText = 'Please check back at ' + result.timeSlot.start + ':00 PM.';

        var timeSlots = {
            'www.youtube.com': { start: 15, end: 16 },
            'youtube.com': { start: 15, end: 16 },
            'www.google.com': { start: 8, end: 10 },
            'google.com': { start: 8, end: 10 },
            'www.gmail.com': { start: 15, end: 16 },
            'gmail.com': { start: 15, end: 16 },
            'duckduckgo.com': { start: 8, end: 10 },
            'www.reddit.com': { start: 15, end: 16 },
            'reddit.com': { start: 15, end: 16 },
            'twitter.com': { start: 15, end: 16 },
        };

        // Sort the timeSlots by start time
        var sortedTimeSlots = Object.keys(timeSlots).sort(function(a, b) {
            return timeSlots[a].start - timeSlots[b].start;
        });

        // Remove duplicates and calculate time until access
        var currentTime = new Date().getHours();
        var uniqueTimeSlots = {};
        sortedTimeSlots.forEach(function(site) {
            var baseSite = site.replace('www.', '');
            if (!uniqueTimeSlots[baseSite]) {
                var timeUntilAccess = timeSlots[site].start - currentTime;
                if (timeUntilAccess < 0) timeUntilAccess += 24;  // adjust for next day
                var hoursUntilAccess = Math.floor(timeUntilAccess);
                var minutesUntilAccess = Math.round((timeUntilAccess - hoursUntilAccess) * 60);
                uniqueTimeSlots[baseSite] = { 
                    start: timeSlots[site].start, 
                    end: timeSlots[site].end, 
                    timeUntilAccess: hoursUntilAccess + 'h ' + minutesUntilAccess + 'm'
                };
            }
        });

        // Create the table
        var table = '<table><tr><th>Website</th><th>Start Time</th><th>End Time</th><th>Time Until Access</th></tr>';
        for (var site in uniqueTimeSlots) {
            table += '<tr><td>' + site + '</td><td>' + uniqueTimeSlots[site].start + '</td><td>' + uniqueTimeSlots[site].end + '</td><td>' + uniqueTimeSlots[site].timeUntilAccess + '</td></tr>';
        }
        table += '</table>';

        document.getElementById('timeSlotsTable').innerHTML = table;
    });
};

// Show notification function
function showNotification(title, message) {
    // Use the chrome.notifications API to display a notification
    chrome.notifications.create({
        type: 'basic',
        title: title,
        message: message,
    });
}

background.js

// background.js
chrome.webNavigation.onBeforeNavigate.addListener(
  function (details) {
    var currentTime = new Date();
    var currentHour = currentTime.getHours(); // Get the current hour in local time (CET)
    var currentMinutes = currentTime.getMinutes();
    var currentTimeInMinutes = currentHour * 60 + currentMinutes;

    // Handle negative minutes and hours if any
    if (currentMinutes < 0) {
      currentHour--;
      currentMinutes += 60;
    }

    if (currentHour < 0) {
      currentHour += 24;
    }

    currentTimeInMinutes = currentHour * 60 + currentMinutes;

    var timeSlots = {
      // Time slots for websites in CET timezone
      'www.youtube.com': { start: 15, end: 16 },
      'youtube.com': { start: 15, end: 16 },
      'www.google.com': { start: 8, end: 10 },
      'google.com': { start: 8, end: 10 },
      'www.gmail.com': { start: 15, end: 16 },
      'gmail.com': { start: 15, end: 16 },
      'duckduckgo.com': { start: 8, end: 10 },
      'www.reddit.com': { start: 15, end: 16 },
      'reddit.com': { start: 15, end: 16 },
      'twitter.com': { start: 15, end: 16 },
    };

    var hostname = new URL(details.url).hostname;

    var timeSlot = timeSlots[hostname];
    if (timeSlot && !(currentTimeInMinutes >= timeSlot.start * 60 && currentTimeInMinutes < timeSlot.end * 60)) {
      var minutesUntilAvailable = timeSlot.start * 60 - currentTimeInMinutes;

      if (minutesUntilAvailable <= 5) {
        // Show notification 5 minutes before the website becomes available
        chrome.notifications.create({
          type: 'basic',
          iconUrl: 'icon.png', // Replace 'icon.png' with the path to your extension's icon
          title: 'Website Becoming Available',
          message: 'The website ' + hostname + ' will become available in 5 minutes!',
        });
      }

      // Store the hostname and time slot in chrome.storage.local
      chrome.storage.local.set({ blockedSite: hostname, timeSlot: timeSlot }, function () {
        // Redirect to the blocked page
        chrome.tabs.update(details.tabId, { url: chrome.runtime.getURL('blocked.html') });
      });

      // Prevent the original navigation
      return { cancel: true };
    }
  }
);

manifest.json

{
    "manifest_version": 2,
    "name": "Website Blocker",
    "version": "1.0",
    "description": "Blocks access to certain websites during specific time slots.",
    "permissions": ["webNavigation", "notifications", "storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "content_scripts": [
      {
        "matches": ["*://*.youtube.com/*", "*://*.google.com/*", "*://*.duckduckgo.com/*", "*://*.reddit.com/*", "*://*.twitter.com/*"],
        "js": ["blocked.js"]
      }
    ],
    "web_accessible_resources": ["blocked.html"]
  }

(change up the URLs I'm blocking to the ones you want to block)