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
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!).
html head title Beautiful Clock link(href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet") body .display .centered #hello h2#clock
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.
- Getting Started: Building a Chrome Extension
- How to Make a Chrome Extension
- The Beginner’s Guide: Build a Simple Chrome Extension in Minutes
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!