Inspiration
We’ve all experienced the "forest of tiny, unreadable tabs" that happens an hour into a deep-dive research session or a hectic workday. This digital clutter creates significant cognitive overload, often causing us to spend more time searching for our work than actually doing it. We wanted to create a solution that makes managing a digital workspace feel as natural as a wave of the hand, transforming "tab-hoarding" into a streamlined, gesture-controlled workflow.
What it does
pOpOp is a Chrome extension that provides a "Chaos vs. Order" management system for your browser. It features two distinct modes:
- Useful Mode: Automatically tiles all open windows into a perfect grid for easy review.
- Consolidation: Uses an "Open Paw to Close Fist" gesture to collapse all tabs into a single window for a clean workspace.
- Useless Mode: Designed for entertainment, this mode causes tabs to pop up randomly and creates "Dancing Man" window loops.
- Magician Moment: Allows users to move popup GIF windows across the screen simply by pointing and moving a finger.
How we built it
We developed pOpOp using a modern tech stack centered on JavaScript (ES6+), HTML5, and CSS3. To power our standout feature—the touchless interface—we integrated MediaPipe for real-time, 21-point hand landmark tracking. We utilized the Chrome Extensions Manifest V3 API, specifically leveraging windows, tabs, storage, and system.display to gain high-level control over the browser environment.
Challenges we ran into
One of the primary challenges was bridging the gap between high-fidelity AI motion sensing and the browser interface. We had to ensure that the MediaPipe gesture sensor could translate hand movements into immediate, low-friction browser commands without lag. Additionally, designing the logic for "Useless Mode" required careful handling of infinite loops and window popups to ensure the "Rescue" gesture remained functional to clear the chaos and return the browser to its usual state.
What we learned
Through this project, we deepened our understanding of the human-computer interface. We learned how to integrate sophisticated AI/ML libraries like MediaPipe directly into a Chrome extension environment. We also gained insights into browser state management, specifically how to manipulate multiple windows and tabs simultaneously using Manifest V3 APIs while maintaining a smooth user experience.
Accomplishments that we're proud of
We are particularly proud of our high-fidelity gesture recognition system:
- The "Magic" Pointing: Successfully allowing users to feel like a magician by moving popup windows with a finger.
- The "Thumbs Up" Grid: Automating the transition from a messy workspace to a perfect, organized grid layout.
- The "Paw to Fist" Reset: Creating a natural physical gesture to close "junk" windows and reset the workspace instantly.
What's next for pOpOp
While pOpOp currently focuses on window and tab management, we aim to expand its capabilities. We hope to introduce more nuanced gestures for specific browser actions and improve the AI's sensitivity in various lighting conditions. Our ultimate goal is to move beyond developer mode to make pOpOp available to anyone looking to eliminate digital friction through innovative AI integration.
Built With
- css3
- html5
- javascript
- mediapipe
Log in or sign up for Devpost to join the conversation.