Rabbit Hole

Inspiration

RabbitHole was born from a familiar frustration: the chaotic sprawl of browser tabs that accumulates during research. We've all experienced that moment – you start exploring a topic on Wikipedia, and suddenly you're juggling 20+ tabs, losing track of how you got from quantum physics to ancient pottery. Rather than fighting against our natural curiosity, we embraced it. RabbitHole transforms that scattered tab explosion into an elegant, visual journey. By creating an interactive flowchart that maps connections between topics, we've eliminated tab overload while preserving the joy of discovery. The name reflects both the experience of falling deeper into fascinating topics and our solution – instead of disappearing down separate rabbit holes, your exploration path becomes visible, organized, and contained in a single space. Research becomes not just more efficient, but more meaningful as you visualize the connections between ideas.

What it does

RabbitHole transforms Wikipedia exploration by creating an interactive flowchart of your research journey. When you highlight text on any webpage, it fetches relevant Wikipedia information and displays it in a popup. As you click to explore related topics, the extension builds a visual tree showing connections between articles. The flowchart features expandable/collapsible nodes with toggle buttons, allowing you to manage complex research paths without opening multiple tabs. Each node represents a Wikipedia article, with clean visual connections showing how topics relate to each other.

How we built it

RabbitHole was built as a Chrome extension using vanilla JavaScript, HTML, and CSS. The extension connects to Wikipedia's API and Dictionary.com API to fetch article data on demand. When a user highlights text or clicks on a related topic, our custom parser extracts the relevant query and retrieves the corresponding Wikipedia content. We implemented a carefully designed UI that overlays the flowchart visualization on any webpage, with nodes that can be expanded or collapsed via toggle buttons along the connecting lines. Each node stores its relationship to other articles, enabling the extension to construct a coherent knowledge graph as users explore.

Challenges we ran into

Our biggest hurdle was implementing the interactive knowledge map. We struggled with rendering the tree visualization correctly, particularly with managing the expand/collapse functionality for subtrees. Connection lines between nodes often rendered incorrectly, and we faced persistent DOM manipulation issues that caused unexpected behavior. Getting the tree to dynamically update as users explored new topics required complex event handling and state management.

Accomplishments that we're proud of

We successfully created a seamless, intuitive visualization of the Wikipedia rabbit hole phenomenon that actually enhances research rather than just documenting it. Our interactive flowchart not only maps connections between topics but makes them navigable in a way that feels natural and engaging.

What we learned

Developing RabbitHole taught us valuable lessons about browser extension architecture and the challenges of integrating third-party visualization libraries. We gained deep expertise with the Chrome Extension API and learned to navigate its unique constraints.

What's next for Rabbit Hole

Our immediate goal is to publish RabbitHole on the Chrome Web Store, making it accessible to researchers, students, and curious minds worldwide. We're also exploring how machine learning could enhance the experience by suggesting potentially relevant branches based on a user's exploration patterns