🤖 Chrome Tab Control

Give your AI agent eyes and hands on your browser — one tab at a time.

A Chrome extension + CLI + AI skill that lets you selectively share browser tabs with AI agents (like Claude Code) for real-time inspection, interaction, and debugging. Install the skill, share a tab, and let your AI agent take it from there.

✨ Features

• 🔒 Per-tab access control — only explicitly shared tabs are accessible
• 🌐 Remote hosts — let an agent on another machine (over SSH) reach the tabs you choose, with a per-tab Remote switch
• 🔑 Secret tab handles — shared tabs are never listed; each gets a random handle, and only agents you give it to can reach the tab
• 📸 Screenshots — capture viewport with coordinate mapping
• 🌳 Accessibility tree — structured page snapshot for AI understanding
• ⌨️ Interaction — click elements, type text, navigate pages
• 📜 Scripts — run many steps against a tab in one call (run), returning only the result the agent needs
• 🔍 Console monitoring — capture console.log, errors, warnings in real time, with history buffer
• 🌐 Network monitoring — watch requests/responses with POST bodies
• 🧭 Navigate + watch — monitor console and network during page load in a single command
• 👁️ Visual indicator — shared tabs show flashing ⚪🟡 in the tab title
• 🖱️ Right-click to share — share/unshare from the page context menu
• ✏️ Annotation — draw circles, rectangles, arrows, and text to communicate with the agent
• 🎯 Element selector — hover and click to pin specific DOM elements for the agent to inspect
• 📷 Screenshot — select an area, resize, and save to disk (Cmd+Shift+S)
• 📋 Extract text — drag-select an area to copy all visible text within it
• 🚀 Zero npm dependencies — uses Node.js 22+ built-ins only

🤔 Why Chrome Tab Control?

There are other ways to connect AI agents to Chrome. Here's how they compare:

	Chrome Tab Control	chrome-cdp-skill	Chrome DevTools MCP	Claude in Chrome
Control existing tabs	✅ Shared tabs only	✅ All tabs	✅ All tabs	❌ Opens new tabs
Per-tab access control	✅ User chooses	❌ All tabs exposed	❌ All tabs exposed	N/A
No --remote-debugging-port	✅ Not needed	❌ Required	❌ Required	✅ Not needed
Annotation	✅ Draw on page	❌ No	❌ No	❌ No
Console/network monitoring	✅ Real-time streaming	❌ No	✅ Via MCP tools	❌ No
Works with any AI agent	✅ Any CLI-capable agent	✅ Any CLI-capable agent	✅ Any MCP client	❌ Claude only
npm dependencies	None	None	Yes	N/A (extension)
Setup complexity	Extension + one command	Enable debug port	Debug port + npm install	Extension only

The problem with --remote-debugging-port

Chrome DevTools MCP and chrome-cdp-skill require Chrome to be launched with a special flag or remote debugging enabled. This exposes every tab — your banking site, your email, your private messages — to any process that connects to the debug port. It's a security risk that most developers are uncomfortable with.

The problem with new-tab-only

Claude in Chrome opens fresh tabs for tasks. But often you want your AI agent to work with a page you're already looking at — debug a form that's misbehaving, extract data from a dashboard, or monitor network requests while you interact with the page.

The problem with "just describe it"

With every other tool, you have to describe what you're looking at in words: "the button in the top-right corner", "the third row in the table", "that error message". It's slow, ambiguous, and frustrating — like a remote pair programming session without screen sharing.

Chrome Tab Control: point, draw, and tell

Share only the tabs you want. Draw directly on the page — circle a bug, arrow to a button, type "fix this" next to a broken layout. Your agent sees the annotations in screenshots and can programmatically query what you're pointing at:

tc annotations <tab>
[rect] red at=(56,120) size=733x92
  -> span "Minor UI changes for noise filter monitoring"
  -> a[href="/dagang-w"] "dagang-w"

No debug port, no new tabs, no describing things in words — just point at your screen and say "help me with this."

🏗️ How It Works

┌─────────────────┐
│    AI Agent     │
│  (Claude Code)  │
└────────┬────────┘
         │ reads SKILL.md
         ▼
┌──────────────┐     ┌───────────────────┐     ┌──────────────────┐
│   CLI Tool   │     │    Tab Proxy      │     │ Chrome Extension │
│              │◄───►│                   │◄───►│                  │
│ tab-control  │Unix │  tab-proxy.mjs    │stdio│  background.js   │
│  -cli.mjs    │sock │                   │     │                  │
└──────────────┘     └───────────────────┘     └──────────────────┘
                                                       │
                                                       ▼
                                               chrome.debugger API
                                                       │
                                                       ▼
                                                ┌─────────────-┐
                                                │   Chrome     │
                                                │  (shared tab)│
                                                └─────────────-┘

1. 👤 User shares a tab (extension popup or right-click)
2. 🔗 Extension attaches chrome.debugger to that tab
3. 🔑 Extension generates a random tab handle (e.g. K7QM-4XRT-AB12) and copies it to your clipboard
4. 🤖 AI agent gets the handle when you paste it, attaches to the tab through the tab proxy's Unix socket, and runs CLI commands
5. ✅ Results flow back through the same chain

This is the beginning of the README. Read the rest at the original. Read the full README ↗