Writing an extension for Firefox has been in my mental to-dos for a while. I like the idea of having my own new tab page. I used to use an extension called Momentum which displayed a nice image alongside the time. For my purposes, Momentum was a bit verbose. Every time I loaded a new tab, I had to render an image. Sometimes it took a second for that image to render. There were many customization features that I did not need.
Earlier this year, I looked into how I could write a new tab extension. I was discouraged because I couldn’t find a good resource on how to write an extension. Most of what I found was extensions people had written that let you replace your new tab page. I wanted to write an extension to replace my own new tab page, not rely on another extension to do it for me. I left the idea for a few months.
A Home for My Browser
I came back to the idea a few days ago. After doing some research, I found out that writing an extension was within my reach. A browser extension can be as simple as a HTML page with a file called
manifest.json. This file provides the configuration for an extension.
My intentions for the new tab extension were to keep the design as simple as possible. I wanted to display the time but not in a way that takes up the entire middle of the web page. I wanted to have a friendly message that said “hello” to me whenever I open a new tab.
What inspired me to work on a new tab extension is that I’ve been in a bit of a, for lack of a better word, pickle, since new lockdown restrictions were announcd in the UK. I came up with the idea of making a web page that lists all the fun activities that help me stay positive. I decided that this may be a bit much for me to take on. A new tab extension would be simpler.
I started simple. The goal was to display my name and a hand-written message on my page. To do this, I created an
index.html file and modified its contents. I was not thinking about how to bundle my extension or install it into Firefox. I just wanted to get a page working. I created a
styles.css file for the style sheet and I thought about what aesthetic I’d like to use.
This project is supposed to be simple. That’s why I went with a simple design. I took inspiration from my blog and gave all of the headings colors and a colored underline. 1 The background remained white. I used a web safe font so that I would not have to load a new font every time the page loaded. That was it. To make the page a bit nicer, I added in a countdown to my birthday and International Coffee Day. They are the same day.
This counter was not operational yet. I was fine manually changing the numbers. I just wanted something that looked good so I knew what final details should be implemented on the new tab extension.
<span> tag on the web page. This lets me display a functional clock on the web page. I did consider updating at different increments but this would not work. If I updated the page every minute and the user loaded the page at XX:59, the minute counter would not update until the next minute had passed. The clock would be off.
The final feature that I added displayed a quote on the page. I am proud of the code I wrote to support this function. When the new tab page is loaded, Firefox checks for a value inside the Firefox extension storage. This value contains the Quote of the Day taken from quotes.rest, a REST API that stores quotes. If the quote is not saved in local storage, I call the quotes.rest API and retrieve a quote. This quote is saved in local storage.
This means that I don’t have to retrieve the quote from a web API every time I load the page. This helps me keep my extension lean. Loading a HTTP request every time I open a new tab is not convenient. I also found out that quotes.rest has a rate limiting feature (which is no surprise given they are an API). I’d easily hit that rate limit if I kept opening new tabs. I open new tabs often, especially when I am working.
I save each quote alongside the date on which that quote is retrieved. If there is a quote in local storage, my extension checks whether that quote was retrieved on the same day as I am viewing the page. If yesterday’s quote is still in storage, a new quote is retrieved.
A Small Project
I’m going to keep this extension simple. I had visions of creating multiple browser extensions. One would show the time in a way like Momentum, without all of the features that I don’t need. Another extension would display stats from the IndieWeb wiki. This is a classic case of planning out work that I don’t need to do. I can only have one new tab page. I am happy with the one that I have.
The design is simple and I like it that way. The color makes me feel happy. The countdown reminds me of the exciting events to come. I’ll probably manually change the birthday countdown to a Christmas countdown later this week.
I feel much better now that I have a more aesthetically pleasing new tab extension. I haven’t signed the extension or released it into the public over the Mozilla App Store. It only runs in the Firefox debugging environment for now. I do want to make my extension run as an add-on rather than a debugging add-on but I am having a few issues. I’ll come back to this when I am ready.
The colored underline is a bottom border because I cannot change the color of the
text-decorationproperty as far as I know. ↩
Other posts in this series
Check out the other posts I have written as part of this series.
- Writing a New Tab Extension: Part II
- Writing a New Tab Extension (this post)
Comments and reactions
Respond to this post by sending a Webmention.