activeApe (3 Reasons Not To Pursue CS)

main ui
timer
challenges
xp and leaderboard
silly gifs

(silly-language used 😭✌️)

Yo, so here’s the deal: staying focused when you’re trying to study online is a pain. Most website blockers just shut down your access, but let’s be real—they get turned off quick when you get annoyed. We wanted to make something that keeps you in line but in a fun, cool way.

But there’s another problem too: when you lock in for hours studying, you can easily forget to move. Next thing you know you’ve been sitting for 3 hours straight like a statue. That’s not great for your health.

So we thought — what if a productivity tool also made sure you don’t become a sedentary potato?

Boom, activeApe was born.

It’s like a mix of game stuff and AI magic. Instead of just blocking sites, you gotta do a quick goofy physical challenge to get back to your blocked sites. Keeps ya moving, keeps ya focused, and makes sure your body doesn’t get ignored while your brain is grinding.

So, what’s it do?

It’s a Chrome extension that helps you stay on track by tossing tricky websites (like YouTube or TikTok) outta your way when you’re supposed to be working.

Here’s the scoop:

Focus Timer: Set your work/study session (like 25 mins or whatever).
Website Blocking: It automatically zaps those annoying distraction sites.
AI Challenge Unlock: When you try to get to a blocked site, you gotta do a silly GIF challenge by copying goofy moves on screen.
Pose Tracking: The AI watches your body to see if you’re doing the moves right — about 65% spot on.
Game Mode: You earn points, level up, and see how much you’ve crushed it.
Active Breaks: Instead of doom-scroll breaks, you get quick movement breaks to stretch and stay healthy.

So instead of just saying “no distractions”, activeApe says:

👉 “Sure, you can open that site… but first give me 10 seconds of monkey moves.”

How we built it

It’s a Chrome Extension using Manifest V3, with vanilla JavaScript, HTML, CSS, and Chrome APIs. It saves your settings and XP locally.

For the body moves, we used MediaPipe Pose Landmarker with GPU acceleration. Then we compared your pose to the reference animation using cosine similarity to check if the movements match.

Everything runs fully inside the browser — no external servers needed.

Architecture

background.js → handles timers, website blocking, and session tracking
popup/ → main extension UI
blocked/ → page showing the challenge and unlock system
lib/ → stores AI models and pose detection tools

Some headaches we faced

Making real-time pose detection run smoothly inside a Chrome extension without lag
Tuning movement matching so it’s not too easy but not impossible
Getting the background scripts, popup, and challenge pages to communicate properly