WHY AND HOW I DEVELOPED A CHROME EXTENSION TO REDUCE SIGHT DEFECTS DEVELOPED AFTER WORKING IN FRONT OF A COMPUTER SCREEN FOR A LONG TIME

I noticed that i sometimes have strained or watery eyes after working on my computer for several hours and it sometimes hurts.

People who often work with computer screen can damage their sight productivity on the long run and this is due to the exposure of the eyes to UV rays which are projected from screens.

“WHY”

UV-A Rays can hurt your central vision and it can damage the Macular, a part of the retina at the back of your eye.

UV-B Rays are absorbed by the front part of your eye (the cornea and the lens) absorbs most UV-B rays, but these rays may cause even more damage to your eyes than the UV-A rays.

The UV rays also lead to other eye diseases such as Macular degeneration, Cataract, Pterygium, Corneal sunburn and even Skin cancer.

After i got aware of all of this, i was wowed, so i started looking up on solutions on how these problems could be prevented or at least it’s possibility reduced since computers are mostly what i work with in my everyday life as a Developer and for a lot of people out there just like me who often use computers.

Anti-glare filter glasses work, but not 100%, then i read up on the 20–20–20 rule which was popularized by Dr. Jeff Anshell, a specialist in “vision ergonomics.” The idea was to look away from your screen every 20 minutes of being in front of the computer, look at something 20 feet away for 20 seconds, it also helps to blink as many times as you can during the exercise.

That was when this brilliant idea came to me about writing a program that can help remind a me to take this exercise every 20 minutes, as well as leading me through the entire exercise procedure.

I built this Chrome extension using Vanilla JavaScript and the Chrome notifications API https://developer.chrome.com/apps/notifications

“HOW” -Project setup

The first thing to do is to create a manifest.json file. All extensions must have this file to inform chrome browser of all the basic information it needs to know about your extension.

{
  "manifest_version": 2,
  "name": "Blink Alert",
  "description": "A reminder for a computer user to take the 20-20-20 blinking exercise every 20 minutes",
  "version": "1.0.0",
  "icons": {
    "19": "images/eyeIcon.png",
    "128": "images/eyeIcon_128.png"
  },
  "browser_action": {
    "default_icon": "images/eyeIcon.png",
    "default_popup": "popup.html"
  },
    "background": {
        "scripts": [
      "js/background.js"
    ]
  },
  "permissions": [
    "tabs",
    "activeTab", 
    "notifications"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

The key fields to focus on are browser_action, permissions and background.

Our popup.html file simple includes basic UI contents like the 20–20–20 rule for user to view when icon is clicked and some social media links.

// // Chrome notification API
const options = {
  type: "basic",
  title: "Blink Alert! - Its been 20 minutes!",
  message:
    "Look Away From Your Computer, Look at something 20 feets away for 20 seconds. (CLICK HERE TO TAKE EXERCISE)",
  iconUrl: "images/eyeIcon_128.png"
};

// Create notifications every 20 minutes 1200000 millisecons
setInterval(function() {
  chrome.notifications.create(options)
}, 1200000);

// Create a new tab onclick of notification
chrome.notifications.onClicked.addListener(function() {
  chrome.tabs.create({url: "exercise.html"});
});

With the manifest.json file ready, what we really need to focus on are the concepts that take place under the hood which is implemented in our background.js, it is a simple concept to make the chrome APIs work in accordance to the result needed.

Firstly, an options object must be created to take the information we need to create when our chrome notification is displayed (kinda like a schema).

Then create the chrome.notifications.create function which takes out options object as an argument. Wrap the chrome.notifications.create function with a setInterval JavaScript function with the display time of 20 minutes passed as a second argument into it (in milliseconds), this will display our notification every 20 minutes.

The the final step in the background.js is to create a click event for our notification, this click event calls a chrome.tabs.create function which will take you to the new tab in chrome which leads you through the process of the exercise. (easy peasy).

// 20 minutes countdown timer
function countdown(elementName, minutes, seconds) {
  let element, endTime, hours, mins, msLeft, time;
  // Make countdown double digits when less that 10
  function twoDigits(n) {
    return n <= 9 ? "0" + n : n;
  }
  // Timer counter update
  function updateTimer() {
    msLeft = endTime - +new Date();
    if (msLeft < 1000) {
      element.innerHTML = "Exercise Complete";
    } else {
      time = new Date(msLeft);
      hours = time.getUTCHours();
      mins = time.getUTCMinutes();
      element.innerHTML =
        (hours ? "0" + ":" + twoDigits(mins) : mins) +
        ":" + twoDigits(time.getUTCSeconds());
      setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
    }
  } // updateTimer function end

  element = document.getElementById(elementName);
  endTime = +new Date() + 1000 * (60 * minutes + seconds) + 500;
  updateTimer();
} // countdown function end
countdown("countdown-timer", 0, 20);

As you can see, there is a countdown timer running in the exercise.html page as well as instruction for the user to take the exercise. Once time stops and changes to “Exercise Complete” your exercise is done and you can close the tab and get notified again in the next 20 minutes by the extension.

This completes the simple steps i needed to make my chrome extension and it’s really helping me.

You can kindly check it out on the Chrome web store and also install it if you’ll like to see it in action, i will really appreciate a review and feedback. https://chrome.google.com/webstore/detail/blink-alert/ecdcckdocbdegecfpmdgblfaiaplggob?hl=en-US

You can also check out the source code on github https://github.com/obayomi96/blinkalert

If you’d love to build an extension of your own and do lots of amazing stuffs with it you can reference the chrome extension APIs https://developer.chrome.com/extensions/api_index

I’m open to questions and other comments you might have.

Thanks for reading, Cheers!.