Distracted Duck

Inspiration

I wanted to make something for people who get distracted while working on school or other tasks. Instead of just blocking distracting websites, I thought it would be fun to have a duck that makes the distraction even more ridiculous until you want to go back to work.

What it does

Distraction Duck is a Chrome extension where you choose your task, focus websites, and distracting websites. When you visit a distracting site during a session, a bird appears with playful suggestions. There are three modes: Distracted Duck, Malicious Mallard, and Locked-in Loon. The extension also has a focus meter based on time spent on the websites you choose. It’s meant to be playful, not a measurement of your actual attention.

How I built it

I built the extension with HTML, CSS, JavaScript, and Chrome’s Manifest V3. I used Grok Bot to research Chrome extensions and help plan the project. I used Cursor to help write and test code, including the website lists, bird modes, and focus meter. I came up with the project idea and directed the features and design.

Challenges & What I Learned

One challenge was figuring out how to show the bird on selected websites while keeping the user in control of which sites the extension could access. I learned more about Chrome extension permissions, storing session information locally, and designing controls that can be used with a keyboard.

What's next for Distracted Duck

I’d like to keep improving the bird personalities and explore using Gemini to create more varied suggestions. I also want to continue testing the extension and its accessibility features.