Shipping a Browser Extension That Talks to Your Backend: The eEagle VPN Chrome Extension
What it takes to extend a production backend to the browser with a Manifest V3 Chrome extension: auth, service workers, and connection state.
Decide what the extension actually owns
What does a browser extension add on top of an existing backend?
The eEagle VPN Chrome Extension extends the platform's existing backend connectivity to browser-level access. The extension owns UI, connection state, and the proxy configuration; the backend still owns auth, server allocation, and lifecycle.
The extension is a thin client over the same APIs the mobile apps use. It authenticates the user, asks the backend which server to use, and applies browser proxy settings — it does not reimplement account logic or server management.
Being explicit about that boundary kept the extension small and made it safe to ship alongside the existing platform rather than as a fork of it.
Work with Manifest V3 constraints
How do you handle authentication and state in a Manifest V3 extension?
Service workers are ephemeral, so persist tokens and connection state in extension storage, restore them on wake, and treat every backend call as something that may run after the worker restarted.
Manifest V3 replaced long-lived background pages with service workers that the browser can stop at any time. Auth tokens and the current connection state live in chrome.storage, and the worker rehydrates from there whenever it spins back up.
Network calls to the backend are written to tolerate a cold start: refresh the token if needed, re-read the selected server, and reconcile the proxy configuration with what the backend currently expects.
Make connection state observable to the user
How should a VPN extension communicate connection state?
Surface a single, honest status — connected, connecting, disconnected, error — driven by real checks against the proxy and backend, and update the toolbar icon so the state is visible without opening the popup.
Users need to trust that the extension is actually routing traffic. The popup shows one clear status derived from the applied proxy settings and a lightweight backend check, and the toolbar icon reflects the same state.
Errors are specific rather than generic: an expired session, an unreachable server, or a proxy permission problem each lead to a different message and a different recovery action, which cuts down on support load.
References
Related reading
- How I Build Scalable MERN Stack Applications for Real Clients
- What It Takes to Manage Production APIs and Cloud Infrastructure
- Designing SaaS Backends That Are Flexible, Secure, and Easy to Extend
- Running a 45-Server WireGuard VPN Fleet: Provisioning, Monitoring, and Failure
- Integrating Payments Across Stripe and MAIB Without Coupling Your Domain
- Real-Time Messaging at Scale with Socket.io: Rooms, Delivery, and Backpressure
Need this built? See services or start a project.