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
