Tab Booster

The intro

As the title suggested, I recently joined a hackathon hosted by Webdevcody. The theme this time is to build any application using Convex - a backend as a service. I had heard of this hackathon at the time it was announced, however, I only decided to join it at the last minute. Therefore, the time for me to come up with an idea and implement it wasn’t much. But overall, I think I could say that I am happy with my final product.

The idea

In the beginning, I had a few ideas that I wanted to do. One of which was to recreate skribbl.io which is a favorite game of mine. After taking a quick look at the site now, I was in sadness to see how much bots have ruined the game. However, I decided not to proceed with that just because I wanted something more original, something more practical, something more me ?? … Something that I could actually use on a daily basis

Tab Booster

… And so, Tab Booster (the name of my Chrome extension) came to me as I realized I have a really bad habit of keeping all my unused Chrome tabs around. It’s always the feeling of “I-will-use-later” that prevents me from closing them and now I have big trouble with all my RAM dedicated to Chrome. Also, I wanted to add a tracking tool to this Chrome extension so that I know how much time I have spent on certain things And in order to do that, I also need to categorize different websites. Obviously, I can’t manually do it for every website and so that’s where the idea of using ChatGPT comes in.

The struggles

Things weren’t as easy. I have created a Chrome extension before, but not one with a database. I also just realized, it’s really a pain to switch between Chrome and vscode and manually refresh the page after every update. I also wanted to use NextJS but Chrome extension isn’t a really great place for Next to shine. After hours of researching, I came across Plasmo, which is a framework for the extension world. They even call themselves, the NextJS of the extension, which at this point, I can totally agree with.

The features

So I came up with some basic features. The app needs to keep track of all current tabs. Then OpenAI needs to categorize them and a timer needs to be run to keep track of how much time I have spent. On top of that, I also want to add a limit to each category so every time I have reached a limit, a notification will be sent to tell me to switch to other work. Another important feature is to save all my tabs into a list so that I can revisit them later without having Chrome save them in the memory. And last but least, top it up with some visualizations of my data.

The outcome

No, I didn’t win in any categories. But I learned a lot from building this project. I hope this whole journey will also help other people to avoid some of the struggles that I went through making this app. This was my first application to use OpenAI and I can see a lot of potential ideas I can play with it. I also learned how to build a Chrome Extension with React, but maybe next time I will try it without using any frameworks.