4 devlogs
17h 45m 41s
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.
0
Log in to leave a comment
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
0
Log in to leave a comment
When you want to test a Firefox extension, you can:
- 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.
- Install it in the Firefox Developer Edition, where you can disable the signing check.
- 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.
1
Log in to leave a comment
Comments
just a tip - you can turn off xpinstall.signatures.required in about:config if you want to properly install the extension and keep it upon browser restarts (rather than loading through debugging which is only one-time)
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
0
Log in to leave a comment