• 

  Porductive Page Example

Focus Goblin

Inspiration

Traditional website blockers treat all content on a platform the same. However, watching a programming tutorial and endlessly scrolling YouTube Shorts are completely different activities. I wanted to build a tool that could recognize this difference while making the experience fun rather than frustrating.

What It Does

Focus Goblin is a Chrome extension that analyzes YouTube content and estimates whether it is productive or distracting. Instead of blocking YouTube entirely, it classifies videos and intervenes only when it detects potential procrastination.

A friendly goblin first warns the user. If the user promises to get back to work but continues watching distracting content, the goblin returns and redirects them to a McDonald's job application page as a humorous consequence.

How It Was Built

The project was built using:

• Chrome Extension Manifest V3
• JavaScript
• HTML/CSS
• Chrome Tabs, Storage, and Notifications APIs

The extension monitors YouTube pages, detects Shorts, tracks viewing sessions, and displays in-page goblin interventions.

Challenges

The biggest challenge was handling YouTube Shorts. Since each swipe changes the URL, the extension initially reset its state and repeatedly showed warnings. This was solved by treating all Shorts as a single continuous session.

Another challenge was designing an intervention that was funny without becoming annoying. After several iterations, a simple goblin character proved much more effective than complex animations.

What I Learned

This project taught me how to build browser extensions with Manifest V3, manage state across dynamic websites, and design user experiences that balance functionality with humor.

Focus Goblin explores a simple idea: productivity tools should understand what you're doing, not just where you're doing it.

Built With

• chrome-extensions-manifest-v3
• chrome-notifications-api
• chrome-storage-api
• chrome-tabs-api
• content
• css
• html
• javascript
• script