DevLensPro

The Challenge

A developer tools company wanted a Chrome extension that captures UI feedback and issues directly from the browser, paired with a web dashboard for project management, task tracking, and team collaboration. The challenge was twofold: Chrome extensions operate in a restricted security sandbox that limits communication with external services, and the data pipeline needed to handle high-frequency events from multiple users without impacting browser performance.

Discovery Phase

We analyzed the Chrome extension manifest V3 requirements and identified the key constraints: service workers have a 5-minute idle timeout, content scripts run in an isolated world, and cross-origin requests require explicit permissions. We designed the data flow to batch events locally and sync in micro-batches every 10 seconds, minimizing network overhead while maintaining near-real-time dashboard updates.

Our Solution

The Chrome extension uses a lightweight content script that captures element data, screenshots, and user annotations with minimal performance overhead. Events are batched in IndexedDB and synced to the Convex backend via the service worker. The dashboard is a full Next.js application with server-side rendering for fast initial loads and client-side real-time updates via Convex reactive queries. Clerk handles authentication across both the extension and the dashboard.

Architecture

The system follows an event-driven architecture. The extension captures events (element selection, screenshot, annotation) and stores them in a local IndexedDB buffer. A background service worker processes the buffer in 10-second micro-batches, sending compressed payloads to the Convex backend. The dashboard subscribes to real-time updates, so when a team member captures a UI issue in the extension, it appears instantly on the project board.