Firefox usage tracker

The extension now also tracks what is happening in individual tabs. An instance of an class is assigned to each tab, which is used to store relevant information temporarily and write to the database. It saves a timestamp whenever a tab is opened or closed, the active tab is changed or when one navigates to a new webpage. It is not possible to display that data in a UI just yet, but that’s what I’ll work on next.

Changelog:
All commits since the last devlog

• Added a ‘website sessions’ object store to the database
• The usage of all open tabs is now tracked

The last thing I worked on before I bumped the version number to 0.1.1 is an About page that lists the third party licenses for the assets that I’m using. I really underestimated how annoying CSS can be and only managed to add a really simple page that has lots of room for improvement. It is accessible via a button in the popup, that uses an icon out of google’s material design icon library.
PS: If you look real close, you may notice that the icon is one pixel further to the right than I should be, but I couldn’t find a way to fix that.

Changelog:

• Added an About page listing third party licenses
• Added a button in the popup opening the About page
• Bumped the version to v0.1.1

I only found this bug, because I pushed myself to finish the changes for the previous devlog instead of wrapping up for the day. Let’s say I opened the browser at 23:50, some time goes by and I then check my usage time at 00:20 for the timeframe today. One would of course expect to see ‘20min’, but it displays NaN instead. When the extension tries to retrieve the data for the current day it will get no values returned, as the current session is technically still from the previous day. That was fixed by returning the duration between the beginning of the day and now, if no session can be found.

Another bug that I subsequently discovered was that the total duration of a specified timeframe was incorrectly calculated, as it was solely based on the start timestamp of a session. The result of that is that an session that starts outside but ends inside of the timeframe, does not get included in the total duration. You can find a visualisation of that issue below. To prevent this from happening, I now retrieve the sessions based on both their start and end timestamp.

Changelog:

• Fixed the popup not updating after a new day starts
• Fixed the total duration not being calculated correctly

I finally created the icon for the extension. I even learned how to use Inkscape, as I thought that it has to be a vector graphic (spoiler: It doesn’t). My idea was to create a stopwatch with a globe inside, as the extension measures how much time you spend on the internet. Below you can see the version I’m going to use for now. I’m still not sure if I like how the buttons look and if the icon is recognisable enough at a smaller scale.

I also added a proper light theme that’s automatically applied if light mode is enabled in your Firefox or system settings.

Changelog:

• Add icons
• Add light theme

I was tired of looking at a white popup with mismatched fonts, so I had to improve the UI a bit. I quickly decided upon a dark bluish-gray colour for the background and made some adjustments to the layout. Choosing a font proved more difficult, as the one I would’ve preferred is not freely available and a licence costs upwards of $70. I initially looked for fonts that closely resemble my first choice, but I also tried completely different ones later on. I settled for “Bai Jamjuree” as it has six different weights (twelve, including italics) and is similar enough to my preferred font. In the attachments, you can take a look at the different colours and fonts I considered, as well as the final design.

In the last devlog, I brought up that the extension doesn’t work on my main Firefox install, and that it’s caused by having too many extensions and tabs simultaneously loaded. I made some changes to prevent negative or null session duration’s from being saved, and that’s probably all I can do to address this issue.

Next up, I’ll probably add a graph to the popup and implement some functionality that tracks individual webpages.

Changelog:

• Reworked the design of the popup
• Prevented the saving of invalid session duration’s

I’ve been testing my extension on Firefox Developer Edition during development and everything worked as it should. For some reason it stopped working the moment I Installed it in the regular release version of Firefox. :(

PS: I tested it on a different device using Windows and it also worked there.
PPS: I figured out what’s causing this. My main Firefox installation has too many extensions installed. They are all simultaneously unloaded when I close the browser and that doesn’t leave enough time for my extension to save a timestamp.

I finally got the popup that displays your usage time working. It took me a bit longer than I expected as I scrapped my changes halfway through.
I had at first retrieved the data for the popup by getting every single entry that is saved in the database and iterating over them to check if they are within the specified time frame that is supposed to be shown. I did it that way, not knowing that I could specify an IDBKeyRange when getting the data, so that only values within that key range are returned, making everything I’ve written so far useless.
Once the popup seemed to work, I made sure that all the usage time is correctly displayed by using the debug function I made previously. The results I got matched my expectations, so I then set the version number to v0.1 and submitted it to Mozilla for signing.
But I forgot to add an icon beforehand, so it still uses the default puzzle piece symbol (•︵•).

Changelog:

• The popup now displays the usage time

When you want to test a Firefox extension, you can:

1. Install it in the normal release version of Firefox, after it has been signed by Mozilla. This is not really practical as the signing takes some time.
2. Install it in the Firefox Developer Edition, where you can disable the signing check.
3. Load it temporarily from the about:debugging page. This has the added benefit that reloading the extension will apply any changes made to the code without having to remove the extension first.
   I had always used the third option to test the changes made to my project, expecting the behavior to be the same for all three options. I didn’t know that, as the source code is fetched every time, a reload would be interpreted as a reinstallation. When I then, for the first time, installed the extension in the Developer Edition of Firefox, I encountered the issue that the database would not open after a reload. This was due to the database only opening when the extension is installed or Firefox is restarted. But as I had just moved the code responsible for the database into a separate file, I figured that I didn’t import the module properly. I reverted all the changes I had made, only to discover that my old code also never worked properly and that it only took one line to fix it.
   I also added a popup that will later display how long Firefox has been open. But I only finished the HTML before I ran into the issue described above.

Changelog:

• Fixed the database not loading on extension restart.
• Added the foundation for the popup that will later display collected data.

This time I wanted to make something that could actually be useful, and I had the idea to develop an extension for Firefox that allows me to track how I waste my time.

The first thing I wanted to implement was that the extension just saves a simple timestamp whenever Firefox is opened or closed. For that I had to decide where to save the data. One can choose between cookies, extension storage, local storage, and IndexedDB. I decided to go with the latter, hoping that it having more features will make it easier to sort and filter the collected data later on. But using IndexedDB caused me to run into my first roadblock: Me not understanding how asynchronous execution works.

I, at first, tried to create the database and immediately write to it. That didn’t work, as while the database was being created asynchronously, my code still continued executing. It tried to save a value before the database was ready and the console therefore spat out “Uncaught ReferenceError: db is not defined”. That really confused me, as I could access the database in the console. I triple checked everything, I had written so far, for any typos and other glaring issues. It took me a long time until I decided to take another look at the documentation. And right at the top it said that opening the database just returns a ✨Promise✨ that will inform me when the database is operational. After learning how to handle such a promise correctly, it was all smooth sailing.

Nah, who am I kidding. I ran right into the next issue that could have been easily avoided if I had just read the documentation properly.

After the saving of data was working properly, I started working on a way to display the saved data. But as there was barely anything that could be displayed anyways, I created a debug function, that fills the database with example data instead.

Changelog:

• A timestamp is now saved when opening and closing Firefox
• Added a function to fill the database with example timestamps