01 / ENGINEERING CASE STUDY
Browsight
A published npm package and local MCP server that gives AI agents access to signed-in Chrome tabs through a Chrome extension. All tab access is blocked by default until explicitly approved per origin in the extension popup.
Active Maintenance & CLI
Actively updated to solve real-world edge cases. Distributed globally via npm with over 600 weekly downloads and a zero-config `npx -y browsight setup` CLI installer.Context Optimization
Drastically reduces LLM token costs by translating the visible Accessibility Tree instead of passing raw HTML DOM.CI/CD Pipeline
TypeScript, Biome, and the test suite run first. Snyk covers SCA and SAST. SonarCloud enforces code quality gates. npm publish only fires when all five are green, signed with OIDC provenance to block supply chain attacks.Browser Permission Scope
Uses Manifest V3 declarative host permissions so the extension only touches origins the user explicitly grants. It never runs on sites it was not given access to, and ships zero `debugger` permissions.PRODUCT, IN PLAIN ENGLISH
Browsight is a local MCP server and Chrome extension that gives AI agents secure access to your authenticated Chrome sessions. It is built for admin, subscriber-only, or Stripe-gated work that standard headless browsers cannot reach. A single `npx browsight setup` CLI command instantly registers it with Cursor, Windsurf, Claude Code, and Codex. The extension serves as a strict trust boundary: every site is blocked by default, and you grant per-origin read-only or full control. The agent receives only four tools, preventing any rogue actions while keeping your private tabs completely isolated.
REQUEST / EVENT LIFECYCLE
TECHNICAL ARCHITECTURE
How it is built.
The MCP client invokes exactly four tools over `stdio`, completely eliminating exposed network servers. A Node.js server opens a bearer-authenticated loopback bridge to the Chrome MV3 extension. Commands flow out via Server-Sent Events (SSE). Results return via the HTTP `QUERY` method, a deliberate architectural choice that allows passing large, structured JSON payloads in the request body rather than cramming them into URL query string limits. The extension strictly enforces per-origin grants and automatically strips sensitive secrets.
FULL STACK / CLOUD / DEVOPS
The stack, organized
by responsibility.
Frontend & extension
Chrome Manifest V3, service worker, extension popup, content scripts, zero `debugger` permissions for strict isolation.
Backend & Protocol
Node.js, TypeScript, `@modelcontextprotocol/sdk`. Transport runs entirely over local `stdio` and HTTP `QUERY` + SSE on `127.0.0.1`.
Agent-safe data layer
Accessibility-tree extraction, durable element references, synthetic React/Vue events, and server-side secret stripping.
Testing & DevSecOps
249 `node:test` + jsdom tests, ~96% line coverage. Security scanning via Snyk SCA, Snyk Code (SAST), Gitleaks, and SonarCloud SARIF uploads.
CI/CD & Supply Chain
Builds are gated by SHA-pinned actions, `npm ci --ignore-scripts`, and Dependabot. Published natively with strict npm `--provenance` attestations.
ENGINEERING DECISIONS
Why these choices matter.
Raw HTML is too bloated for LLMs. Browsight instead walks the browser's Accessibility Tree, slashing typical authenticated dashboards from 100,000+ tokens of hidden scripts/nodes down to just ~34 clean tokens. For actions, it fires full synthetic event chains including `pointerover`, `mousedown`, `click`, `input`, and `change` so modern React and Vue state handlers trigger correctly without desyncing. The project is actively maintained. I continuously monitor for real-world edge cases such as hardened Shadow DOMs or strict bot-protection, diagnose underlying protocol issues, and ship fast updates to keep the bridge bulletproof.