Universal Browser Extension - Quick Start — Development skill for Claude Code

Universal Browser Extension - Quick Start

What Was Created

✅ **Universal Browser Extension** that replaces Browser-Use MCP with direct WebSocket control

Features

1. WebSocket Integration: Connects to your existing canvas server (localhost:3000/ws)
2. Universal Browser Control: Works on ANY website (LinkedIn, Instagram, Twitter, Google, etc.)
3. Real-Time Communication: Instant command execution and activity tracking
4. Zero Cloud Dependency: 100% local, no external servers
5. Activity Tracking: Automatically tracks user actions across all platforms

Files Created

10x-Outreach-Skill/.claude/skills/
├── browser-extension/
│   ├── manifest.json                  # Extension configuration
│   ├── background.js                   # WebSocket service worker (500+ lines)
│   ├── IMPLEMENTATION-GUIDE.md         # Complete implementation guide
│   └── QUICK-START.md                  # This file
│
└── linkedin-lookback/                  # Copied from 10x-Team
    ├── SKILL.md                        # Full documentation
    ├── README.md                        # Quick start
    ├── INTEGRATION-SUMMARY.md          # Integration summary
    ├── UNIVERSAL-EXTENSION-PLAN.md     # Universal extension plan
    ├── scripts/
    │   ├── sync-lookback-data.js      # Data sync
    │   └── enrich-prospects.js        # Prospect enrichment
    └── references/
        ├── linkedin-rate-limits.md
        └── automation-best-practices.md

Installation

1. Load Extension in Chrome

1. Open Chrome
2. Go to: chrome://extensions
3. Enable "Developer mode" (top right)
4. Click "Load unpacked"
5. Select: C:\Users\Anit\Downloads\10x-Outreach-Skill\.claude\skills\browser-extension

2. Start Canvas Server

cd C:\Users\Anit\Downloads\10x-Outreach-Skill\canvas
npm install
npm start

Server will run on:

• HTTP: http://localhost:3000
• WebSocket: ws://localhost:3000/ws

3. Verify Connection

Open extension popup:

• Look for green "✓" badge = Connected
• Red "✗" badge = Not connected

Check browser console (F12):

[10X.in Browser] ✅ Connected to Canvas WebSocket

How It Works

10X.in automation (CLI)
    ↓ Command
Canvas Server (localhost:3000)
    ↓ WebSocket
Browser Extension
    ↓ Execute
Target Website (LinkedIn/Instagram/etc.)
    ↓ Result
Extension → Canvas → 10X.in automation

Replacing Browser-Use MCP

Before (Browser-Use)

# Used cloud-hosted Browser-Use MCP
result = mcp__browser-use__browser_task({
    "task": "Go to LinkedIn and view profile",
    "max_steps": 8
})

**Problems:**

• ❌ Cloud-hosted (latency, cost)
• ❌ Limited control
• ❌ No activity tracking
• ❌ Temporary sessions

After (Extension)

# Direct WebSocket control
websocket.send({
    "type": "linkedin-action",
    "payload": {
        "type": "view_profile",
        "profile_url": "https://linkedin.com/in/john-doe"
    }
})

result = await websocket.recv()

**Bene