What?
Octopus Focus is a Chrome extension designed to enhance focus by mimicking the vision abilities of octopuses. The extension applies a focus effect by filtering out distractions from the page, allowing users to engage fully with the main content. As an added benefit, it also automatically rearranges certain intrusive elements, such as in-article ads, making the browsing experience cleaner and more focused.
What it does
The extension observes the page's content and applies a grayscale filter to all elements except for the main content (like videos). On video pages, only the video remains in full color, while everything else is desaturated. Additionally, Octopus Focus naturally adjusts some page layouts by repositioning intrusive elements, such as ads, to less obtrusive locations like the top or bottom of the page.
It dynamically updates when the user navigates between pages or enters/exits fullscreen mode, ensuring that focus is always maintained on what truly matters.
How we built it
We used JavaScript to develop the extension, leveraging:
MutationObserver to monitor DOM changes and detect when elements are added, removed, or repositioned. A global grayscale filter applied across the page, selectively removed from key elements such as videos or main content blocks. Event listeners to respond to page navigation, fullscreen toggles, and other user actions, ensuring a seamless experience. Unexpectedly, our approach also influenced the layout of certain elements, such as ads, by disrupting their placement scripts—an emergent feature that enhances focus further by reducing visual clutter.
What's next for Octopus Focus
Introducing focus modes for different content types, such as highlighting article text for readers or specific areas for web apps. Adding user customization options, like adjustable filter intensities or the ability to prioritize certain elements. Optimizing performance on complex pages to ensure smooth user experiences. Exploring accessibility features, such as support for users with visual impairments.
How it does biomimicry
Octopuses possess remarkable vision abilities, allowing them to focus on specific objects and adapt quickly to environmental changes. Inspired by this, Octopus Focus filters out visual distractions, directing the user's attention to key content, just as an octopus can selectively focus its vision. The extension also mimics nature's efficiency by adapting to user interactions and page layouts dynamically, ensuring a clutter-free and productive digital environment.
By combining biomimicry with functional innovation, Octopus Focus demonstrates how nature-inspired design can create a more engaging and less distracting online experience.
Log in or sign up for Devpost to join the conversation.