Astrodoro - Space Productivity Timer

#🚀 Astrodoro Devlog

🧱 Where I Started
Okay so at first, Astrodoro was super basic:

Just a popup that said “Astrodoro Timer”
Start + reset buttons only
Timer didn’t save anything
Plain black & white, no space vibe 😅

It worked… but felt super boring.

✨ What I Made

Fast forward to the final version — now it’s basically a mini space mission in your browser:

Full space/glass theme with gradients + stars ✨
Rocket that can float, rumble, or launch 🚀
Exhaust/fire effects + twinkling star background
Buttons look fancy with hover + click effects
Status text so it actually feels alive
⏱ Timer Upgrade

Before: start + reset, no pause, no persistence
Now:

Pause / Resume
Timer saves in Chrome storage
Keeps running even if popup closes
Restores correctly on startup
🔔 Cool Features
Chrome alarms = accurate timing
Notifications when mission ends
Background + popup synced properly
Permissions expanded for real extension stuff
🚀 Favorite Part

When the timer ends → rocket launches and even animates in the active tab 👀
This part was SO fun to build lol

🧠 Big Takeaways
State-driven UI > just showing numbers
Popup + background actually talk to each other
Feels like a real app now, not just a timer

⚡ Final Thoughts

Went from “meh timer” → full interactive space mission 🚀
Rushed near deadline, but honestly one of the most fun projects I’ve done so far.

Next up: maybe stats, sounds, and more missions 👀

Wow, that was the hardest hour yet. It turns out Chrome puts extensions to sleep to save RAM. If you want a countdown timer to survive closing the popup window, you have to use a Service Worker background script and the chrome.alarms API.

I totally ripped out the setInterval in my popup.js and moved the logic to background.js. Now the popup just asks the background script “Hey, what time is it?” and updates the UI. It’s a lot more code, but it’s bulletproof. Next, I want to make an actual reward when the timer hits zero!

I finally added popup.js to make the timer work! I added “Ignition” and “Abort” buttons.
I used setInterval which basically runs a chunk of code every 1000 milliseconds (1 second), subtracting 1 from the total seconds left.

BUT I noticed a massive bug… When I start the countdown, close the popup, and open it again, the timer resets! 😭 Chrome extensions basically die the moment you close the popup box. I’ll need to figure out “Background Scripts” for the next hour to fix this.

Okay, the plain text timer was sad. I spent this 30minutes learning how CSS @keyframes work!(of course AI helped me !).
I added a div for the rocket emoji and made a custom animation called float that just moves the rocket up and down slightly so it looks like it’s hovering in space. I also added a radial gradient to the background to make it look like deep space.

Who knew CSS could do so much without any JavaScript? Next up: making the numbers actually tick down.

White backgrounds are boring. I spent this time linking up a style.css file and bringing in the “Space Grotesk” font from Google Fonts to make it feel futuristic.

I also added the basic HTML structure (<div class="container">, header, etc.) so it doesn’t look terrible. Right now, the timer just says “25:00” in plain text, but the dark navy blue background definitely makes it feel a tiny bit more premium!

so I just got this idea for the Hack Club Challenger sidequest! I don’t have much time left before the deadline, and I wanted to build something that covers both the space theme project and a Chrome extension …so I came up with this.

I’m making a simple Chrome extension called Astrodoro, a space-themed productivity tool. Pretty cool idea, right?

So far I’ve literally just set up the manifest.json so Chrome recognizes it, and created a super basic popup.html that just says “Astrodoro Timer.” Nothing fancy yet I’m forcing myself to learn extension architecture from scratch, no frameworks, just raw files.

Next up, I’m going to make it actually look like space instead of plain black text on white. I’m working on it right now and racing against the clock to finish before the timeline ends. I’ll post it as soon as I can—gotta hurry and code this thing! 🚀