Chrome Extension: Digital Clock

About the Project

I personally tend to use multiple tabs in Google Chrome. But I felt like the New Tab extension I was using had way too many features (they're great but just too much on the screen). I wanted something light, fresh, and vibrant each time I clicked on the New Tab button.

So I designed my very own new tab page that would display a digital 12-hour format clock.


Click here to view the extension in Google Chrome Web Store.


  • Modern and simple in design
  • Allows you to provide your name so that it feels more personal
  • Tells the time (12-hour format)
  • Vibrant background colors

Thought Process

This was my first project creating a Google Chrome Extension! I used SCSS for modern CSS styling. I also used Pug to create the necessary HTML (just only 10 lines!).

    title Beautiful Clock
    link(href="" rel="stylesheet")


The challenge was writing the necessary JavaScript code.

Here's the breakdown of the core components:

  • Asks the user for a name and caches it to local storage (via
  • Finds a random background color
  • Displays the clock (converting local time to hours, minutes, seconds, and assigning either "AM" or "PM")

What I Learned

Creating a basic Google Chrome Extension wasn't as hard as I had imagined. I read three articles to help me get started.

Having launched my first extension, I am now a part of the Google Chrome community of developers, which I am very proud of.

At the moment of writing, there's 8 people using my extension. Thank you random people!