How to Develop a Blink Reminder Extension for Chrome: Easy Tutorial

I made this when I realized that I do not blink enough while I code. This is really a very bad habit because if you do not blink, your eyes go dry and you feel pain. So I thought about a chrome extension which will remind me to blink after some times. As we use browser a lot for coding resources, this can be very useful for us.

Project Setup

1. Open a folder in your computer and rename it : blink-reminder-extension.

2. Now open the folder in the vs code and create a file named : manifest.json

3. Then copy the code below of this line and paste it in manifest.json

{
  "manifest_version": 3,
  "name": "Blink Reminder",
  "version": "1.0",
  "description": "Reminds you to blink 5 times every 30 minutes.",
  "permissions": ["notifications", "alarms"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Blink Reminder"
  }
}

Now we have to understand what is written here. First of all, let me tell you what this file does.

This json file actually is an instrcution manual for Chrome . Chrome reads this to load and run your extension .

1. The first line tells us the manifest version which is very important. It just tells us the current version of manifest file format (which is now 3 ) and version 3 is different than version 2 . Why? Well, it is your home work . Google and you will learn more about it.

2. The next three lines tell Chrome information about the extension.

3. The permission property tells chrome what your extension needs to function properly .Here , “notifications” is needed to notify users to blink their eyes and the “alarms” is to schedule the reminder.

4. In the background property , there is “service_worker” which is the especial feature of manifest version 3 (you know it already if you googled it ). Here , background.js is the file which will be run in the background but as it is set by the service_worker , it will not run all the time, it wakes up only when needed.

5. “action” defines the icon beahivor of the extension , when users will hover on the icon , they will see the text “Blink Reminder” . It is necessary because it will help users to understand what is the icon about.

Now we need some other files . Create background.js file and download an icon from the Internet for our extension icon.

Write the functionalities

Next , write this code in the background.js file :

chrome.alarms.create("blinkReminder", { periodInMinutes: 30 });

chrome.alarms.create is a function provided by the API of chrome browser. It helps us to create an alarm to trigger our reminder. The first parameter of it is a string which defines the alarm’s name , the second property is a Javascript object which has some properties like when , delayInMinutes, periodInMinutes(these properties specify info about the alarm).

Now we see that we want to trigger the alarm in every 30 minutes .

So we will add this line in our code file :

chrome.alarms.onAlarm.addListener((alarm) =>{
})

This will listen to our alarm , when it will be triggered .Then it will help us to pop up the reminder to blink eyes in the browser.

Now we need to create a notification :

chrome.alarms.onAlarm.addListener((alarm) =>{
       chrome.notifications.create(

       )
})

Inside the chrome.notifications.create , we will make a javascript object with the basic info of the notifcations:

chrome.alarms.onAlarm.addListener((alarm) =>{
     chrome.notifications.create(
      {
        type: "basic",
        iconUrl: "icon.png", // Make sure this file exists in the root extension folder
        title: "Blink Reminder",
        message: "Time to blink 5 times! 👁️✨",
        priority: 2,
        requireInteraction: true, // Keeps the notification open until the user interacts with it
      },

    );
})

here, type is telling chrome that the type of the notifications is basic .That means they are simple notifications with icon, title and message. next we are setting icon , title, message . The priority is set to 2. requireInteraction is set to true , which means the application keeps notification open until someone clicks on it.

Now , we will add a callback function which will run after running the code which creates the notification .

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === "blinkReminder") {
    console.log("Alarm triggered:", alarm.name);

    chrome.notifications.create(
      {
        type: "basic",
        iconUrl: "icon.png", // Make sure this file exists in the root extension folder
        title: "Blink Reminder",
        message: "Time to blink 5 times! 👁️✨",
        priority: 2,
        requireInteraction: true, // Keeps the notification open until the user interacts with it
      },
      //callback function
      (notificationId) => {
        if (chrome.runtime.lastError) {
          console.error(
            "Notification error:",
            chrome.runtime.lastError.message
          );
        } else {
          console.log("Notification shown with ID:", notificationId);
        }
      }
// callback function ends here 
    );
  }
});

chrome.runtime.lastError is not null if any error happens. If there is any error,the console prints the error.

If there is no error , then console prints the notification id.

Overall, this is the full code of background.js:

// Create an alarm to fire every 30 minutes (set  6 seconds for testing)
chrome.alarms.create("blinkReminder", { periodInMinutes: 30 });

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === "blinkReminder") {
    console.log("Alarm triggered:", alarm.name);

    chrome.notifications.create(
      {
        type: "basic",
        iconUrl: "icon.png", // Make sure this file exists in the root extension folder
        title: "Blink Reminder",
        message: "Time to blink 5 times! 👁️✨",
        priority: 2,
        requireInteraction: true, // Keeps the notification open until the user interacts with it
      },
      (notificationId) => {
        if (chrome.runtime.lastError) {
          console.error(
            "Notification error:",
            chrome.runtime.lastError.message
          );
        } else {
          console.log("Notification shown with ID:", notificationId);
        }
      }
    );
  }
});

Now we need to set it in our chrome browser. Go to chrome://extensions/ . As I use brave browser , I go to brave://extensions/

In the screen, you can see a developer mode option in the top-right corner, click on it to enable it .

After that , you will see a button named Load unpacked in the top-left corner of the screen. Click on it and select the project folder. The extension will be loaded in the browser immediately . Next you need to enable the extension .

That’s it ! you have created your own chrome extension to remind you to blink your eyes when you will work in the browser.

(I have plans to add more features in this extension . So follow this blog to keep updated!)