10x-Anit

Universal Browser Extension - Quick Start

Development community intermediate

SOURCE https://github.com/10x-Anit/10x-browser-extension

Description

Universal Browser Extension - Quick Start skill

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for 10x-Anit/10x-browser-extension, shared by 4 entries in this directory. It describes the repository, not this entry specifically.

Universal Browser Extension - Quick Start

What Was Created

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

Features

WebSocket Integration: Connects to your existing canvas server (localhost:3000/ws)
Universal Browser Control: Works on ANY website (LinkedIn, Instagram, Twitter, Google, etc.)
Real-Time Communication: Instant command execution and activity tracking
Zero Cloud Dependency: 100% local, no external servers
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