Sizzle: Web Time Tracker

HI!!!
So , in this devlog, i also added milliseconds tracking on the pomodoro! and I used this extension for weeks to figure out if its working correctly or not. I think, I have added the most of features i could in it!!!
I am glad how it turns out <3

Hi!!!!
So, this is my last devlog of this project!
In this devlog, I finally added the feature of blocking distraction sites while having the pomodoro Focus Session. Whenever you try to open the distraction sites e.g instagram, Facebook etc, it will block it and take you to page that says KEEP SIZZLING.
Also, user can also add or remove sites that he want to block during focus sessions! This made it easy for users to add anime/series pirated sites that i might have skipped TT.
The blocking system was actually pretty tricky to implement! I had to use Chrome’s content scripts to inject code into every single page you visit. The script runs in the background and constantly checks if you’re in an active focus session. If you are, it matches the current website against your block list using proper domain matching (so it catches instagram.com, www.instagram.com, m.instagram.com - all of them!). The overlay I made is persistent too - even if you try to delete it using inspect element, it respawns every 2 seconds
But here’s the thing - I also added a checkbox in the focus tab that says “Block distraction sites during focus” because I realized not everyone wants this feature all the time! Maybe you’re doing study that requires YouTube Lectures, or maybe you just want the timer without the blocking. So now you can toggle it on/off per session!
I made this for myself mainly! because i wanted a platform that can track my study time and can block distractions during my focus sessions! This project also taught me so much about Chrome extension APIs, content script injection, and state management across multiple contexts.

Also , cooking time is for flavortown!!!!

HI
Well!!! I renamed my extension to Sizzle: Focus & Habit Time Tracker.
Also renamed the tabs. Focus is now Power Sizzle and Stats is now Hottest Streaks.

Then I submitted my extension to Firefox since it is free of cost. I originally made the extension for Chrome, so yeah, I got a lot of errors in manifest.json. I spent around an hour just figuring out their documentation and fixing the manifest. After that, I also had to change other files like background.js and popup.js. VS Code tracked only 1 hour 29 minutes, but honestly it took me almost 3 hours to understand Firefox docs and then code everything. SIGH!!!

Anyways, once my extension gets approved, I will share the link in the next devlog. My GitHub will also have files that support both Chrome and Firefox. Since manifest.json can only support one browser, I made a manifest-firefox.txt file on GitHub. If anyone needs the Firefox manifest, they can just copy paste that file into the original manifest.json.

I also spent another 20 minutes making the logo. Graphic designing is not my thing, so the logo turned out pretty meh, but I did my best.

Future Update:
I tried adding a 3 beeps sound when a focus session or break ends, but it is not noticeable. I will try to find some free sounds and update it. I also have other features in mind, like blocking distraction sites during a focus session. I will try to add that in the future.

HI!!!
In the last update, I only have made the tabs for the Compare and Records.
But now, I made the Compare and Records tabs fully functional! The Compare tab now actively tracks your progress by comparing your current week’s usage against the last, giving you a percentage breakdown of how much your productivity has increased or your procrastination has dropped.
While the Records tab tracks your current and longest streaks, your best study day, total study time, and total focus sessions. To make the progress visual, I added some logic that assigns a fun “level-up” emoji to your streak: it starts at a sleepy 💤 if you’re just beginning, but as you hit 1, 3, or 7 days, it evolves into a full 🔥🔥🔥 to show YOU ARE DOING GREAT!!!

Next update: I still have to think about what new features I will add!!! But I think a feature for blocking entertainment sites while you are in a focus session would be great. However, I can only block things like Instagram, Facebook, or pirated drama/anime sites lol; I will have to figure it out because I can’t just block YouTube since some people watch lectures there. Also, I mainly made this extension because I couldn’t find any that combined a focus pomodoro with time tracking. Enough with the yapping!!! Have a great day everyone!

Hi
Today, I added the cards for the Leaderboard functionality.
The Leaderboard shows your top 10 websites for the week, plus some champion cards - most frequently visited site, top study site, and top entertainment site. I reused my existing renderThisWeek function to display the top 10, and wrote new logic to track the most frequent site.
For future work, I still need to add the Compare and Records tabs. Compare will show your study time vs entertainment time for this week compared to last week, and tell you if you’re being more or less productive. Records will track stuff like your longest streak, most productive day, and other personal bests.
Note: I know I am naming it as stats for my tab, I tried putting Leader Board there but it takes too much space and look congested so I decided to just write Stats instead :”)
Also, I had to reinstall the extension because of an annoying error, which means all my tracking data got wiped and the timer restarted from zero :”) I should probably add a backup/export feature so this doesn’t happen again!

Spent 1hr 14m making focus pomodoro sessions, user now can set pomodoro timer of any durations for their work, all the focus session time will go into the user study/work time. User will also get long break after 4 sessions.
Also , streak badge will also be shown for focus sessions
Now, i think instead of showing the number of sessions in a day, i should show the time spent in focus sessions per day.
Note: (integrated my previous pomodoro code and make it work with the extension)

Moved the this week and this month time tracked tab in the time travel tab
Time travel tab is basically showing the time one spend on a certain day, week or month.
User can see their past data through time travel tab now
Next Feature:
Integration of the Focus pomodoro timer, all the focus time will be counted as study time

Made a pie chart , that shows the percentage of all the websites you are using.
Also made the stats for the sites in descending sorted order, so user can know the sites they use the most. Also added the month and week section ,where user can see the time they spend this week or month.
Added the study and procrastination cards, user will mark the websites they use for study and for entertainment ,and that data will be updated in respective card.
Upcoming feature:
now i will make new feature where user can find the time spent on specific day, week, or month.

I just finished the UI for my new extension and matched the design to the Flavortown dashboard.. It is a web time tracker that stays on your computer, but I added a special “Cooking Time” feature that specifically tracks how long you spend on flavortown.hackclub.com.
Btw, i really like cute UI of flavortown hack club and want to make websites like this one, i will probably make a focus app next with cute ui. I know my skills aren’t good, but i should try :”)

I setup the manifest.json (the heart of any Chrome extension) and initialized the project environment in VS Code. I also made the GitHub repository to track my progress and began coding the background script to detect when a user switches between tabs.