Fantasy Focus Chrome Extension

Inspiration

Our inspiration came from a simple question. What if opening a distracting website did not pull you into endless scrolling, but instead brought you into a small fantasy adventure? We wanted to transform the moment of distraction into something playful and supportive. This idea led to the creation of Fantasy Focus Mode, a retro dragon-themed Chrome extension designed to help students stay focused without feeling stressed or punished. We also noticed that many students struggle with digital distraction because apps are intentionally designed to keep our attention. Traditional website blockers often feel too strict, which makes people disable them as soon as they feel pressure. We wanted a friendlier approach that uses imagination instead of guilt.

What it does

Fantasy Focus Mode changes distracting websites into a retro fantasy scene inspired by classic Game-Boy visuals. When a user opens a distracting site, a floating pixel-art dragon appears with a calm message such as “The Gate of Distractions is Sealed. Your quest continues.” This turns a distraction into a small moment of encouragement. The extension also includes a feature called “Defy the Dragon,” which gives the user a single override if they truly need access to a site. After one visit, the extension automatically protects the site again. Users can customize their own blocklist, toggle Focus Mode on or off, and explore a pixel fantasy castle background that matches the theme. The goal of Fantasy Focus Mode is to help students reclaim their attention through creativity, imagination, and self-control.

How we built it

We built Fantasy Focus Mode using HTML for the main structure, CSS for styling and pixel animations, and JavaScript for the logic that controls blocking, overrides, and user settings. We worked with the Chrome Extensions API to manage permissions, store data, and update tabs. For the visuals, including the retro pixel-art dragon and fantasy background, we used AI as a design tool. We provided detailed instructions, clear style preferences, and specific parameters to generate artwork that fit the retro fantasy theme. After the images were produced, we refined them to match the exact look we wanted. We organized our code across multiple files. The background script handles website blocking and the override system, the popup script manages settings, and the focus screen uses a combination of HTML, CSS, and a separate JavaScript file to show the dragon scene and handle interactions.

Challenges we ran into

One of the main challenges was learning how Chrome’s security rules work. Chrome does not allow inline JavaScript, so we had to separate all scripts into individual files and restructure parts of the extension. Creating the one-time override system was another challenge because it required the extension to temporarily remember a site and then block it again after a single use. Designing pixel-art animations and making them feel smooth was also a challenge, since retro art requires careful scaling and timing. Despite these challenges, we improved our skills and built a stronger, more organized project.

Accomplishments that we're proud of

We are proud that we created a functional and creative Chrome extension from scratch. We are also proud of the retro fantasy environment we designed, including the animated pixel-art dragon and the custom fantasy background. We are very proud of the “Defy the Dragon” system because it provides a balance between flexibility and focus. Most of all, we are proud that our project solves a real problem in a friendly and imaginative way.

What we learned

We learned how to build Chrome extensions and how to connect HTML, CSS, and JavaScript in a real application. We learned how to organize multiple files, follow security requirements, and create animations that fit a retro theme. We also learned how to use AI as a creative tool for generating pixel art while still guiding the style and making final design decisions ourselves. We gained experience in problem-solving, collaboration, and designing a consistent user experience.

What's next for Fantasy Focus Chrome Extension

In the future, we want to make Fantasy Focus Mode even more enjoyable and customizable. We plan to add more animations such as new dragon movements, fire-breathing effects, and backgrounds that change smoothly as users stay focused. We also want to allow users to choose different fantasy themes such as a sky kingdom, an enchanted forest, or a crystal cave. We hope to add custom dragon designs that unlock through consistent focus, as well as more sound settings so users can decide whether they want music or sound effects. We are also interested in adding focus streaks, XP points, and a progress page that shows time saved and distractions avoided. Our vision is to turn Fantasy Focus Mode into a complete gamified focus experience that helps students stay productive while enjoying a world they can customize and grow with.