wormhole

• 

  the wormhole screenshot

🌌 The Inspiration The modern web is a vast, interconnected landscape of information, yet browsing it often feels like a solitary experience. We visit the same pages, watch the same videos, and read the same news at the same time as thousands of others, but we remain invisible to each other—trapped in our own digital bubbles.

Wormhole was inspired by the desire to turn the passive act of browsing into a collective journey. The goal was to create a "digital water cooler" that exists on every URL—a space where you can instantly connect with anyone else occupying the same virtual coordinates in real-time.

🛠️ How It Was Built Wormhole is a Manifest V3 Chrome Extension engineered for high-performance, real-time synchronization using a serverless architecture.

Technical Stack Communication: WebRTC (Real-time Peer-to-Peer Data Channels). Signaling: Firebase Realtime Database. Frontend: Vanilla JS/CSS (Side Panel API). Automation: esbuild for bundling the Offscreen Document. Architecture To maintain stable connections in an environment as restricted as a browser extension, we utilized a tiered architecture:

Service Worker: Manages the global state and lifecycle. Offscreen Document: Acts as the stable "living room" for WebRTC connections, bypassing the 30-second termination limit of MV3 service workers. P2P Mesh: We implemented a Full Mesh Topology. For $n$ users in a room, the total number of connections $C$ is calculated as: $$C = \frac{n(n-1)}{2}$$ This ensures that no central server ever sees the content of your local chat messages. 🚧 Challenges Faced

1. The Ephemeral Service Worker The biggest hurdle was the transition to Manifest V3. Since service workers are terminated during inactivity, we couldn't keep Firebase listeners or WebRTC connections alive background. The solution was the Offscreen Document API, which provides a persistent environment as long as the side panel is active.

2. Perfect Negotiation In a peer-to-peer system, "glare" occurs when two peers attempt to initiate a connection simultaneously. We solved this by implementing the Perfect Negotiation pattern, which uses a "polite/impolite" state machine based on unique User IDs to resolve collisions gracefully.

3. Content Security Policy (CSP) Chrome's strict CSP for extensions often clashes with external SDKs like Firebase. We had to carefully bundle the Firebase SDK and force WebSocket transport to prevent unauthorized script-injection fallbacks.

🧠 What Was Learned Building Wormhole provided deep insights into the complexity of distributed systems:

State Sovereignty: Managing shared state across multiple asynchronous contexts (Side Panel, SW, Offscreen, and Remote Peers) requires a clean "Source of Truth" model. Exponential Backoff: We implemented an exponential backoff algorithm for reconnections to prevent network congestion during unstable periods: $$\text{delay} = \min(\text{base} \cdot 2^{\text{retries}}, \text{max_delay})$$ Privacy by Design: By leveraging WebRTC, we proved that social features don't have to come at the cost of data harvesting.

Built With

• antigravity
• chrome
• esbuild
• firebase
• gemini
• javascript
• webrtc