npm - claude-chrome-parallel - Versions diffs - 3.0.0 → 3.0.2 - Mend

claude-chrome-parallel 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -1,596 +1,406 @@
 # Claude Chrome Parallel
-> **Run multiple Claude Code browser sessions in parallel - no more "Detached" errors.**
+> **Run 20+ Claude Code browser sessions simultaneously, without conflicts.**
 [![npm version](https://badge.fury.io/js/claude-chrome-parallel.svg)](https://www.npmjs.com/package/claude-chrome-parallel)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-## The Power of Authenticated Browser Sessions
-Unlike traditional web scraping or automation tools, Claude Chrome Parallel operates within **your already logged-in Chrome browser**. This means:
-- **Access authenticated services** - Gmail, Salesforce, LinkedIn, banking portals, admin dashboards
-- **No credential management** - Session cookies and OAuth tokens are already active
-- **Bypass bot detection** - Uses your real browser profile, not headless automation
-- **Access personalized data** - Dashboards, account settings, member-only content
-**This is not just a development tool.** While the parallel session feature solves a technical problem for developers, the real power lies in automating *any* web task that requires authentication - tasks that were previously impossible to automate without building complex auth flows.
+<p align="center">
+  <img src="https://raw.githubusercontent.com/shaun0927/claude-chrome-parallel/main/assets/demo.svg" alt="Chrome Extension vs Claude Chrome Parallel - Animated comparison showing how Chrome Extension fails with 'Detached' error while Claude Chrome Parallel runs 5+ sessions simultaneously" width="100%">
+</p>
 ---
-## Why This Exists
-[Claude Chrome](https://claude.ai/chrome) lets you debug **production environments while logged in**. But when you try to run multiple Claude Code sessions with browser automation simultaneously:
-```
-Error: Detached while handling command
-```
-This happens because the Chrome extension uses **shared internal state**. When Session A takes a screenshot, Session B's connection gets "detached."
-**Claude Chrome Parallel** solves this by creating **independent CDP connections** for each session:
 ```
-Claude Code 1 ──► Process 1 ──► CDP Connection 1 ──┐
-                                                    ├──► Chrome (port 9222)
-Claude Code 2 ──► Process 2 ──► CDP Connection 2 ──┘
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│   Claude Code 1 ─► Worker A ─► [Tab1] [Tab2] ─┐                            │
+│                    (Google account)            │                            │
+│                                                │                            │
+│   Claude Code 2 ─► Worker B ─► [Tab3] [Tab4] ─┼─► Chrome (single instance) │
+│                    (Naver account)             │     Port 9222              │
+│                                                │                            │
+│   Claude Code 3 ─► Worker C ─► [Tab5] [Tab6] ─┘                            │
+│                    (Amazon account)                                         │
+│                                                                             │
+│   ✓ Each Worker has isolated cookies/session/storage                       │
+│   ✓ No more "Detached" errors with concurrent sessions                     │
+│   ✓ Multiple account logins on same site simultaneously                    │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
 ```
-Each session gets isolated browser control. No shared state = No conflicts.
 ---
-## Use Cases
-### Beyond Development: Real-World Automation
-The combination of **authenticated sessions** + **natural language control** + **parallel execution** enables automation scenarios that were previously impractical:
+## Core Features
----
+<table>
+<tr>
+<td width="33%" valign="top">
-### 1. Business Process Automation
+### 🔀 Worker Isolation
-#### ERP/SaaS Dashboard Data Collection
-Extract reports from login-required services (Salesforce, HubSpot, Zendesk):
+Each Worker has a **completely isolated browser context**.
-```
-You: Navigate to our Salesforce dashboard and extract this month's sales pipeline data
+- Separate cookies/sessions
+- Separate localStorage
+- Separate login states
-Claude: [Navigates to authenticated Salesforce, parses tables, extracts structured data]
-```
+**Log into multiple accounts on the same site simultaneously!**
-#### Invoice & Receipt Collection
-Automatically download monthly invoices from multiple services:
+</td>
+<td width="33%" valign="top">
-```
-You: Go to AWS billing console and download last month's invoice PDF
-Claude: [Navigates to authenticated AWS console, finds invoice, triggers download]
-```
+### ⚡ Parallel Execution
-#### Repetitive Admin Tasks
-Process approvals, submit forms, update records:
+Run tasks across multiple tabs/Workers **at the same time**.
 ```
-You: Go to our HR portal and approve all pending time-off requests from my team
+Sequential: 1500ms
+  Tab1 ████░░░░ 500ms
+  Tab2     ████░░░░ 500ms
+  Tab3         ████░░░░ 500ms
-Claude: [Navigates to HR system, finds pending items, processes each approval]
+Parallel: 500ms
+  Tab1 ████░░░░
+  Tab2 ████░░░░
+  Tab3 ████░░░░
 ```
----
-### 2. Research & Data Collection
-#### Competitive Analysis (Login-Required Platforms)
-Gather intelligence from premium platforms:
+</td>
+<td width="33%" valign="top">
-```
-You: Search LinkedIn Sales Navigator for CTOs at fintech startups in NYC and list their profiles
-Claude: [Uses your LinkedIn Premium session to search and extract profile data]
-```
+### 🔄 Workflow Orchestration
-#### Academic Database Research
-Access institutional databases that require authentication:
+**Automatically distribute** complex multi-site tasks.
 ```
-You: Search IEEE Xplore for papers on "transformer architecture" from 2023 and list titles with citations
-Claude: [Uses your university library login to search and extract paper metadata]
-```
-#### Financial & Real Estate Data
-Access member-only pricing and transaction data:
+workflow_init({
+  workers: [
+    {name: "amazon", ...},
+    {name: "ebay", ...},
+    {name: "walmart", ...}
+  ]
+})
+→ 3 sites run in parallel
+→ Results auto-collected
 ```
-You: Check my Schwab portfolio and summarize today's gains/losses by sector
-Claude: [Navigates authenticated brokerage account, extracts and analyzes positions]
-```
+</td>
+</tr>
+</table>
 ---
-### 3. Social Media Management
-#### Multi-Account Content Publishing
-Post content across platforms:
-```
-You: Post this announcement to our company LinkedIn, Twitter, and Facebook pages
-Claude: [Navigates to each platform with saved sessions, composes and publishes posts]
-```
-#### Message & Inquiry Management
-Handle customer messages with templates:
-```
-You: Check our Instagram business inbox and reply to product inquiries with our standard response
-Claude: [Reads DMs, identifies product questions, sends templated responses]
-```
-#### Analytics Collection
-Gather engagement metrics across platforms:
-```
-You: Get our Twitter analytics for the past week and summarize engagement trends
+## Comparison
-Claude: [Accesses Twitter Analytics dashboard, extracts metrics, provides summary]
-```
+| | Chrome Extension | Claude Chrome Parallel |
+|---|:---:|:---:|
+| **Concurrent Sessions** | ❌ 1 (Detached error) | ✅ **20+** |
+| **Worker Isolation** | ❌ | ✅ Isolated cookies/sessions |
+| **Multi-account Login** | ❌ | ✅ |
+| **Parallel Execution** | ❌ | ✅ |
+| **Network Simulation** | ❌ | ✅ 3G/4G/offline |
+| **Workflow Orchestration** | ❌ | ✅ |
+| **Auto Chrome Launch** | ❌ | ✅ |
 ---
-### 4. E-Commerce Automation
-#### Member Price Monitoring
-Track prices that require membership login:
-```
-You: Check the member price for this Costco item and compare with last week
-Claude: [Logs into Costco account, finds item, extracts member-only pricing]
-```
-#### Inventory & Order Management
-Manage seller accounts across marketplaces:
+## Why It Matters
-```
-You: Check our Amazon Seller Central for any new orders and list items running low on inventory
-Claude: [Navigates seller dashboard, extracts order and inventory data]
-```
+### The Problem
-#### Review Management
-Respond to customer reviews at scale:
+The official Chrome extension has a fatal flaw: **shared internal state**.
 ```
-You: Find all unanswered 4-star reviews on our Shopify store and draft personalized thank-you responses
-Claude: [Navigates store admin, identifies reviews, generates contextual responses]
+Claude Code 1 ─┐
+               ├─► Chrome Extension (shared state) ─► "Detached" error!
+Claude Code 2 ─┘
 ```
----
+When Session A takes a screenshot, Session B's connection breaks. You can only run **one session at a time**.
-### 5. Personal Productivity
+### The Solution
-#### Email Organization
-Manage your inbox intelligently:
+Claude Chrome Parallel creates **independent CDP connections** per session:
 ```
-You: In Gmail, find all newsletters from the past month and add the "Newsletters" label
+Claude Code 1 ─► CDP Connection 1 ─┐
+                                    ├─► Chrome (port 9222)
+Claude Code 2 ─► CDP Connection 2 ─┘
-Claude: [Searches Gmail, selects matching emails, applies labels]
+No shared state = No conflicts = 20+ concurrent sessions
 ```
-#### Calendar Management
-Bulk calendar operations:
+### The Real Power: Authenticated Sessions
-```
-You: Add these 5 meetings to my Google Calendar with the details from this spreadsheet
+Unlike headless automation, this runs in **your actual browser** with all your logins active:
-Claude: [Creates each calendar event with proper dates, times, and descriptions]
-```
+- ✅ Access Gmail, Salesforce, LinkedIn while logged in
+- ✅ No credential management or auth flows needed
+- ✅ Bypass bot detection (real browser profile)
+- ✅ Multiple accounts simultaneously (Worker isolation)
-#### Bookmark & Archive Management
-Organize saved content:
-```
-You: Save this article to my Notion reading list with its title and summary
-Claude: [Extracts metadata, navigates to Notion, creates database entry]
-```
+**This isn't just for developers.** Any web task requiring authentication—previously impossible to automate—is now possible with natural language.
 ---
-### 6. QA & Testing
+## Quick Start (2 minutes)
-#### Multi-Session QA Testing
-Run parallel test scenarios against production:
+### 1. Install
 ```bash
-# Terminal 1: Test user login flow
-claude -p "Test the login flow on https://myapp.com/login"
-# Terminal 2: Test checkout process (simultaneously!)
-claude -p "Test the checkout flow on https://myapp.com/cart"
-# Terminal 3: Monitor admin dashboard
-claude -p "Take screenshots of https://myapp.com/admin every 30 seconds"
+npm install -g claude-chrome-parallel
 ```
-#### Network Condition Testing
-Test performance under various network conditions:
+### 2. Configure Claude Code
-```
-You: Simulate 3G network and test if our checkout page loads within 5 seconds
+Add to `~/.claude.json`:
-Claude: [Applies network throttling, measures load time, reports results]
+```json
+{
+  "mcpServers": {
+    "chrome-parallel": {
+      "command": "ccp",
+      "args": ["serve"]
+    }
+  }
+}
 ```
-#### Accessibility Auditing
-Analyze page accessibility via the accessibility tree:
+### 3. Restart Claude Code and use
 ```
-You: Check the accessibility tree of our signup form and identify any missing labels
+You: Take a screenshot of https://github.com
-Claude: [Parses full accessibility tree, identifies WCAG compliance issues]
+Claude: [Auto-launches browser, captures screenshot]
 ```
+> **Tip:** `ccp` is a shorthand for `claude-chrome-parallel`.
 ---
-### 7. Security & Compliance
+## Usage Examples
-#### Personal Data Audit
-Check what data services have stored:
+### Multiple Accounts Simultaneously
 ```
-You: Navigate to my Google Account privacy settings and list all third-party apps with access
+You: Create "google-personal" and "google-work" Workers,
+     then check the inbox of each Gmail account
-Claude: [Navigates account settings, extracts connected app list]
+Claude: [Creates 2 Workers → Each accesses Gmail with isolated sessions]
+        google-personal: Personal account - 3 new emails
+        google-work: Work account - 7 new emails
 ```
-#### Session Verification
-Verify active sessions across services:
+### Price Comparison (Parallel)
 ```
-You: Check my GitHub security settings and list all active sessions
+You: Search for "iPhone 15" lowest price on Amazon, eBay, and Walmart simultaneously
-Claude: [Navigates GitHub settings, extracts session information]
+Claude: [3 sites run in parallel]
+        Amazon: $999 (1.2s)
+        eBay: $945 (1.1s)
+        Walmart: $979 (1.3s)
+        Total time: 1.3s (vs 3.6s sequential)
 ```
----
-## Core Features
-### Isolated Workers (Parallel Browser Contexts)
-The killer feature of Claude Chrome Parallel is **worker isolation**. Each worker has:
-- **Separate browser context** with its own cookies, localStorage, and sessionStorage
-- **Independent tab management** - tabs are scoped to their worker
-- **Complete state isolation** - one worker's login doesn't affect another
-```
-You: Create a worker named "google-shopping"
+### Parallel QA Testing
-Claude: [Creates isolated browser context]
-        Worker: google-shopping
-        Context: Isolated (separate cookies/storage)
+```bash
+# Terminal 1
+claude -p "Test myapp.com/login"
-You: In google-shopping worker, search for laptops
+# Terminal 2 (at the same time!)
+claude -p "Test myapp.com/checkout"
-Claude: [Opens tab in google-shopping worker context]
-        Any login, preferences, or state is isolated to this worker
+# Terminal 3 (at the same time!)
+claude -p "Monitor myapp.com/admin"
 ```
-**Why This Matters:**
-- Log into different accounts simultaneously (e.g., multiple Gmail accounts)
-- Run parallel price comparisons without cookie conflicts
-- Test multi-user scenarios with complete isolation
+---
-### Automatic Task Distribution
+## Chrome-Sisyphus: Orchestration Skill
-When you have multiple tabs open, operations are automatically distributed:
+For complex multi-site workflows, use the built-in **Chrome-Sisyphus** skill system.
 ```
-You: Take screenshots of all open tabs
-Claude: [Parallel execution across all tabs]
-        Tab 1: Screenshot taken (500ms)
-        Tab 2: Screenshot taken (480ms)
-        Tab 3: Screenshot taken (520ms)
-        Total: ~500ms (parallel) vs ~1500ms (sequential)
+┌─────────────────────────────────────────────────────────────────┐
+│  /chrome-sisyphus "Compare iPhone prices on Amazon, eBay, Walmart"
+│                              ↓
+│  ┌──────────────────────────────────────────────────────────┐
+│  │            ORCHESTRATOR (Main Session)                   │
+│  │  • Decompose task → 3 workers                           │
+│  │  • Allocate sites → Amazon, eBay, Walmart               │
+│  │  • Context usage: ~500 tokens (lightweight!)            │
+│  └──────────────────────────────────────────────────────────┘
+│                              ↓
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐
+│  │  Worker 1   │  │  Worker 2   │  │  Worker 3   │
+│  │  (Amazon)   │  │  (eBay)     │  │  (Walmart)  │
+│  │  Background │  │  Background │  │  Background │
+│  │  Task       │  │  Task       │  │  Task       │
+│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘
+│         ↓                ↓                ↓
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐
+│  │ Scratchpad  │  │ Scratchpad  │  │ Scratchpad  │
+│  │ worker-1.md │  │ worker-2.md │  │ worker-3.md │
+│  └─────────────┘  └─────────────┘  └─────────────┘
+│                              ↓
+│  Results collected → Unified report to user
+└─────────────────────────────────────────────────────────────────┘
 ```
-### Workflow Orchestration
-For complex multi-site operations, use the orchestration tools:
+### Why This Matters: Context Isolation
-```typescript
-// Initialize a parallel workflow
-workflow_init({
-  name: "Price Comparison",
-  workers: [
-    { name: "amazon", url: "https://amazon.com", task: "Search iPhone 15 price" },
-    { name: "ebay", url: "https://ebay.com", task: "Search iPhone 15 price" },
-    { name: "walmart", url: "https://walmart.com", task: "Search iPhone 15 price" }
-  ]
-})
-// Each worker executes in parallel with isolated contexts
-// Results are collected via workflow_collect
+**Without isolation** (traditional approach):
 ```
----
-## Available MCP Tools
-### Browser Automation Tools
-| Tool | Description | Key Use Cases |
-|------|-------------|---------------|
-| `navigate` | Navigate to URL, back/forward history | Multi-page workflows |
-| `computer` | Screenshots, mouse clicks, keyboard, scrolling | Non-standard UI interaction |
-| `read_page` | Parse page via accessibility tree | Dynamic content extraction |
-| `find` | Find elements by natural language | "search box", "submit button" |
-| `form_input` | Set form values directly | Fast data entry |
-| `javascript_tool` | Execute arbitrary JavaScript | Complex DOM operations |
-| `network` | Simulate network conditions | Performance testing |
-### Tab & Worker Management Tools
-| Tool | Description | Key Use Cases |
-|------|-------------|---------------|
-| `tabs_context_mcp` | Get available tabs by worker | Session overview |
-| `tabs_create_mcp` | Create new tab in worker | Parallel tab operations |
-| `worker_create` | Create isolated browser context | Multi-account scenarios |
-| `worker_list` | List all workers and their tabs | Session management |
-| `worker_delete` | Delete worker and close its tabs | Cleanup |
-### Orchestration Tools
-| Tool | Description | Key Use Cases |
-|------|-------------|---------------|
-| `workflow_init` | Initialize multi-worker workflow | Parallel site operations |
-| `workflow_status` | Get orchestration progress | Monitoring |
-| `workflow_collect` | Collect results from workers | Data aggregation |
-| `workflow_cleanup` | Clean up workflow resources | Session cleanup |
-| `worker_update` | Update worker progress | Progress tracking |
-| `worker_complete` | Mark worker as complete | Workflow completion |
----
-## Tested Concurrency
-| Sessions | Success Rate |
-|----------|-------------|
-| 5 | 100% |
-| 10 | 100% |
-| 15 | 100% |
-| 20 | 100% |
----
-## Installation
-```bash
-# From npm
-npm install -g claude-chrome-parallel
-# Or from GitHub
-npm install -g github:shaun0927/claude-chrome-parallel
+Main Session Context:
+├── Worker 1 screenshot (500KB)     ─┐
+├── Worker 1 DOM tree (large)        │
+├── Worker 2 screenshot (500KB)      ├─► Context explosion!
+├── Worker 2 DOM tree (large)        │
+└── Worker 3 ... (keeps growing)    ─┘
 ```
-### Configure Claude Code
-Add to your Claude Code MCP settings (`~/.claude.json`):
-```json
-{
-  "mcpServers": {
-    "chrome-parallel": {
-      "command": "ccp",
-      "args": ["serve"]
-    }
-  }
-}
+**With Chrome-Sisyphus**:
 ```
+Main Session: ~500 tokens (stays light)
+├── Task plan
+├── Worker IDs
+└── Status summary only
-> **Note:** `ccp` is a shorthand alias. You can also use the full name `claude-chrome-parallel`.
-Restart Claude Code for changes to take effect.
----
-## Usage
-### Basic Usage
-Once configured, browser automation works in any Claude Code session:
+Background Tasks: (isolated, don't pollute main)
+├── Worker 1: own context, own screenshots
+├── Worker 2: own context, own screenshots
+└── Worker 3: own context, own screenshots
-```
-You: Take a screenshot of https://github.com
-Claude: [Uses chrome-parallel tools automatically]
+Scratchpad Files: (persistent state)
+└── .agent/chrome-sisyphus/*.md
 ```
-### Multiple Parallel Sessions
+### Usage
-Run multiple Claude Code terminals simultaneously:
+Copy the `.claude/` folder to your project:
 ```bash
-# Terminal 1
-claude
-> Navigate to myapp.com/dashboard and take a screenshot
-# Terminal 2 (at the same time!)
-claude
-> Fill out the form on myapp.com/contact and submit
-# Terminal 3 (also at the same time!)
-claude
-> Monitor network requests on myapp.com/api
+cp -r node_modules/claude-chrome-parallel/.claude ~/.claude/
+# Or copy to your project root
 ```
-All sessions work without conflicts!
+Then use in Claude Code:
-### Network Simulation
+```
+/chrome-sisyphus Compare laptop prices on Amazon, BestBuy, and Newegg
+```
-Test how your app behaves under different network conditions:
+### Skill Files
 ```
-You: Simulate 3G network and navigate to myapp.com
-Claude: [Applies 3G throttling: 1.5Mbps down, 750Kbps up, 100ms latency]
+.claude/
+├── commands/
+│   └── chrome-sisyphus.md      # /chrome-sisyphus command
+└── skills/
+    └── chrome-sisyphus/
+        ├── SKILL.md            # Skill overview
+        ├── AGENTS.md           # Agent specifications
+        └── agents/
+            ├── decomposer.md   # Task decomposition
+            ├── worker-agent.md # Worker execution (Ralph Loop)
+            └── coordinator.md  # Result integration
 ```
-Available presets: `offline`, `slow-2g`, `2g`, `3g`, `4g`, `fast-wifi`, `custom`, `clear`
 ---
-## How It Works
+## MCP Tools
-### The Problem: Shared Extension State
+### Browser Automation
-The official Chrome extension maintains a single shared state:
+| Tool | Description |
+|------|-------------|
+| `navigate` | Go to URL, back/forward |
+| `computer` | Screenshot, click, keyboard, scroll |
+| `read_page` | Parse page structure (accessibility tree) |
+| `find` | Find elements by natural language |
+| `form_input` | Set form values directly |
+| `javascript_tool` | Execute JavaScript |
+| `network` | Simulate network conditions |
-```
-Claude Code 1 ─┐
-               ├─► Chrome Extension (shared state) ─► Chrome
-Claude Code 2 ─┘
-                    ↑
-              State conflicts here!
-```
+### Worker & Tab Management
-### The Solution: Independent CDP Connections
-Chrome's DevTools Protocol natively supports multiple simultaneous connections:
-```
-Claude Code 1 ─► Process 1 ─► CDP Connection 1 ─┐
-                                                 ├─► Chrome (port 9222)
-Claude Code 2 ─► Process 2 ─► CDP Connection 2 ─┘
+| Tool | Description |
+|------|-------------|
+| `worker_create` | Create isolated browser context |
+| `worker_list` | List Workers and their tabs |
+| `worker_delete` | Delete Worker |
+| `tabs_create_mcp` | Create new tab |
+| `tabs_context_mcp` | Get tab info |
-Independent connections, no shared state!
-```
+### Workflow Orchestration
-Each Claude Code session spawns its own MCP server process with a dedicated CDP connection.
+| Tool | Description |
+|------|-------------|
+| `workflow_init` | Initialize parallel workflow |
+| `workflow_status` | Check progress |
+| `workflow_collect` | Collect results |
+| `workflow_cleanup` | Clean up resources |
 ---
 ## CLI Commands
-> **Tip:** Use `ccp` as a shorthand for `claude-chrome-parallel` in all commands below.
 ```bash
-# Start MCP server (used by Claude Code automatically)
-ccp serve
-# Check Chrome connection status
-ccp check
-# Use custom Chrome debugging port
-ccp serve --port 9223
-# Check installation health
-ccp doctor
-# View session status and statistics
-ccp status
-# View status as JSON (for automation)
-ccp status --json
-# Clean up stale sessions and old backups
-ccp cleanup --max-age 24 --keep-backups 10
+ccp serve              # Start MCP server (auto-run by Claude Code)
+ccp check              # Check Chrome connection
+ccp status             # View session status
+ccp status --json      # JSON output
+ccp doctor             # Diagnose installation
+ccp cleanup            # Clean up old sessions
+ccp serve --port 9223  # Use custom port
 ```
 ---
-## Chrome Configuration
-By default, connects to Chrome on port 9222.
-**Auto-launch**: If Chrome isn't running with debugging enabled, the package will start it automatically.
-**Manual start** (if needed):
+## Performance
-```bash
-# Windows
-chrome.exe --remote-debugging-port=9222
-# macOS
-/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
-# Linux
-google-chrome --remote-debugging-port=9222
-```
+| Concurrent Sessions | Success Rate |
+|:---:|:---:|
+| 5 | 100% |
+| 10 | 100% |
+| 15 | 100% |
+| 20 | 100% |
 ---
 ## Additional Features
-### Session Isolation (Bonus)
-When running multiple Claude Code instances, they can corrupt `~/.claude.json` due to race conditions. Use the `launch` command to run Claude with isolated config:
+### Network Simulation
-```bash
-# Run Claude Code with isolated config directory
-ccp launch
+```
+You: Test myapp.com loading time on 3G network
-# Pass any claude flags
-ccp launch --dangerously-skip-permissions
-ccp launch -p "Your prompt"
+Claude: [Applies 3G throttling: 1.5Mbps, 100ms latency]
 ```
-### Config Recovery
+Presets: `offline`, `slow-2g`, `2g`, `3g`, `4g`, `fast-wifi`, `custom`
-If your `.claude.json` gets corrupted:
+### Config Recovery
 ```bash
-# Auto-recover corrupted config
+# Auto-recover corrupted .claude.json
 ccp recover
-# List available backups
+# List backups
 ccp recover --list-backups
 ```
----
-## Comparison
-| Feature | Claude in Chrome (Extension) | Claude Chrome Parallel |
-|---------|------------------------------|----------------------|
-| Multiple sessions | ❌ Detached errors | ✅ Works perfectly |
-| Parallel QA testing | ❌ | ✅ |
-| Connection type | Shared extension state | Independent CDP |
-| Max concurrent sessions | 1 | 20+ tested |
-| Auto Chrome launch | ❌ | ✅ |
-| Network simulation | ❌ | ✅ 3G/4G/offline presets |
-| Session auto-cleanup | ❌ | ✅ TTL-based |
-| Connection pooling | ❌ | ✅ Pre-warmed pages |
+### Session Isolation
----
-## Considerations
-### Strengths
-- **Authenticated access** - Automate any login-required service
-- **Natural language element finding** - Resilient to DOM changes
-- **JavaScript execution** - Handle complex SPAs
-- **Visual verification** - Screenshots for evidence/debugging
-### Limitations
-- CAPTCHA/bot detection on some services
-- 2FA re-authentication may require manual intervention
-- For high-volume tasks, native APIs are more efficient when available
-- Rate limiting applies to automated interactions
-### Recommended Patterns
-1. **Small/critical tasks** → Use this MCP
-2. **High-volume tasks** → Prefer native APIs when available
-3. **Services without APIs** → This MCP is often the only option
+```bash
+# Run Claude with isolated config (prevents race conditions)
+ccp launch
+ccp launch -p "Your prompt"
+```
 ---
@@ -599,51 +409,56 @@ ccp recover --list-backups
 ### Chrome not connecting
 ```bash
-# Check status
 ccp check
-# Manually start Chrome with debugging
+# Or manually start Chrome
 chrome --remote-debugging-port=9222
 ```
 ### Tools not appearing in Claude Code
-1. Check MCP config in `~/.claude.json`
+1. Check `~/.claude.json` configuration
 2. Restart Claude Code
 3. Run `/mcp` to verify `chrome-parallel` is listed
 ---
+## Use Cases
+- **Business**: ERP/SaaS data extraction, invoice downloads, repetitive task automation
+- **Research**: Login-required platform data collection, academic DB searches
+- **Social Media**: Multi-account posting, message management, analytics
+- **E-commerce**: Member price monitoring, inventory management, review responses
+- **QA Testing**: Parallel scenario testing, network condition testing
+- **Productivity**: Email organization, calendar management, bookmark management
+---
 ## Development
 ```bash
 git clone https://github.com/shaun0927/claude-chrome-parallel.git
 cd claude-chrome-parallel
 npm install
 npm run build
-# Test locally
-npm install -g .
+npm test
 ```
 ---
 ## License
-MIT License - see [LICENSE](LICENSE) for details.
+MIT License - [LICENSE](LICENSE)
+---
 ## Disclaimer
-> **This is an unofficial, community-maintained project.**
-> Not affiliated with or endorsed by Anthropic.
+> **This is an unofficial community project.**
+> Not affiliated with Anthropic.
 >
-> "Claude" is a trademark of Anthropic. This project provides
-> tooling to enhance the Claude Code experience but is not
-> an official Anthropic product.
+> "Claude" is a trademark of Anthropic.
 ## Acknowledgments
-- [Anthropic](https://anthropic.com) for Claude and the MCP protocol
-- [Claude Code](https://github.com/anthropics/claude-code) for the CLI
-- [Puppeteer](https://pptr.dev/) for browser automation
+- [Anthropic](https://anthropic.com) - Claude and MCP protocol
+- [Puppeteer](https://pptr.dev/) - Browser automation

package/assets/demo.svg ADDED Viewed

@@ -0,0 +1,183 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#16213e"/>
+    </linearGradient>
+    <linearGradient id="successGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#00b894"/>
+      <stop offset="100%" style="stop-color:#00cec9"/>
+    </linearGradient>
+    <linearGradient id="errorGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#e74c3c"/>
+      <stop offset="100%" style="stop-color:#c0392b"/>
+    </linearGradient>
+    <linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#6c5ce7"/>
+      <stop offset="100%" style="stop-color:#a29bfe"/>
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="800" height="400" fill="url(#bgGrad)"/>
+  <!-- Title -->
+  <text x="400" y="35" text-anchor="middle" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="bold">
+    Chrome Extension vs Claude Chrome Parallel
+  </text>
+  <!-- LEFT SIDE: Chrome Extension (Failing) -->
+  <g transform="translate(30, 60)">
+    <!-- Header -->
+    <rect x="0" y="0" width="350" height="30" rx="8" ry="8" fill="#2d3436"/>
+    <circle cx="15" cy="15" r="5" fill="#e74c3c"/>
+    <circle cx="32" cy="15" r="5" fill="#f39c12"/>
+    <circle cx="49" cy="15" r="5" fill="#27ae60"/>
+    <text x="175" y="20" text-anchor="middle" fill="#b2bec3" font-family="monospace" font-size="12">Chrome Extension</text>
+    <!-- Terminal body -->
+    <rect x="0" y="30" width="350" height="290" rx="0" ry="0" fill="#0d1117"/>
+    <rect x="0" y="310" width="350" height="10" rx="0" ry="0" fill="#2d3436"/>
+    <!-- Session 1 - Success then stops -->
+    <text x="10" y="55" fill="#6c5ce7" font-family="monospace" font-size="11">
+      <tspan>$ claude "Screenshot github.com"</tspan>
+    </text>
+    <text x="10" y="75" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>Session 1: Taking screenshot...</tspan>
+      <animate attributeName="opacity" values="0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <text x="10" y="95" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Screenshot saved</tspan>
+      <animate attributeName="opacity" values="0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Session 2 - Error -->
+    <text x="10" y="130" fill="#6c5ce7" font-family="monospace" font-size="11">
+      <tspan>$ claude "Screenshot google.com"</tspan>
+      <animate attributeName="opacity" values="0;0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <text x="10" y="150" fill="#fdcb6e" font-family="monospace" font-size="11">
+      <tspan>Session 2: Connecting...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;0" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Error message with animation -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1" dur="4s" repeatCount="indefinite"/>
+      <rect x="5" y="165" width="340" height="50" rx="4" fill="#2d1b1b"/>
+      <text x="15" y="185" fill="#e74c3c" font-family="monospace" font-size="11" font-weight="bold">
+        ✗ Error: Session Detached
+      </text>
+      <text x="15" y="205" fill="#e17055" font-family="monospace" font-size="10">
+        Target closed. Another session took control.
+      </text>
+    </g>
+    <!-- Blinking cursor -->
+    <rect x="10" y="230" width="8" height="14" fill="#fff">
+      <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
+    </rect>
+    <!-- Status bar -->
+    <text x="175" y="335" text-anchor="middle" fill="#e74c3c" font-family="system-ui" font-size="14" font-weight="bold">
+      ❌ Only 1 session at a time
+    </text>
+  </g>
+  <!-- VS Divider -->
+  <text x="400" y="220" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="24" font-weight="bold">VS</text>
+  <!-- RIGHT SIDE: Claude Chrome Parallel (Success) -->
+  <g transform="translate(420, 60)">
+    <!-- Header -->
+    <rect x="0" y="0" width="350" height="30" rx="8" ry="8" fill="#2d3436"/>
+    <circle cx="15" cy="15" r="5" fill="#e74c3c"/>
+    <circle cx="32" cy="15" r="5" fill="#f39c12"/>
+    <circle cx="49" cy="15" r="5" fill="#27ae60"/>
+    <text x="175" y="20" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="12" font-weight="bold">Claude Chrome Parallel</text>
+    <!-- Terminal body -->
+    <rect x="0" y="30" width="350" height="290" rx="0" ry="0" fill="#0d1117"/>
+    <rect x="0" y="310" width="350" height="10" rx="0" ry="0" fill="#2d3436"/>
+    <!-- Multiple sessions all succeeding -->
+    <!-- Session 1 -->
+    <text x="10" y="55" fill="#6c5ce7" font-family="monospace" font-size="11">Session 1: github.com</text>
+    <rect x="150" y="43" width="0" height="14" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;80;80" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    <text x="240" y="55" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Done</tspan>
+      <animate attributeName="opacity" values="0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Session 2 -->
+    <text x="10" y="80" fill="#6c5ce7" font-family="monospace" font-size="11">Session 2: google.com</text>
+    <rect x="150" y="68" width="0" height="14" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;70;70" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    <text x="230" y="80" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Done</tspan>
+      <animate attributeName="opacity" values="0;0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Session 3 -->
+    <text x="10" y="105" fill="#6c5ce7" font-family="monospace" font-size="11">Session 3: amazon.com</text>
+    <rect x="150" y="93" width="0" height="14" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;0;90;90" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    <text x="250" y="105" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Done</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Session 4 -->
+    <text x="10" y="130" fill="#6c5ce7" font-family="monospace" font-size="11">Session 4: naver.com</text>
+    <rect x="150" y="118" width="0" height="14" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;0;0;60;60" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    <text x="220" y="130" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Done</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Session 5 -->
+    <text x="10" y="155" fill="#6c5ce7" font-family="monospace" font-size="11">Session 5: twitter.com</text>
+    <rect x="150" y="143" width="0" height="14" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;75;75" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    <text x="235" y="155" fill="#00b894" font-family="monospace" font-size="11">
+      <tspan>✓ Done</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;1" dur="4s" repeatCount="indefinite"/>
+    </text>
+    <!-- Stats box -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;1" dur="4s" repeatCount="indefinite"/>
+      <rect x="10" y="180" width="330" height="80" rx="6" fill="#1e3a1e"/>
+      <text x="175" y="205" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="13" font-weight="bold">
+        All 5 sessions completed in parallel!
+      </text>
+      <text x="175" y="230" text-anchor="middle" fill="#55efc4" font-family="monospace" font-size="12">
+        Total time: 1.2s (vs 6.0s sequential)
+      </text>
+      <text x="175" y="250" text-anchor="middle" fill="#81ecec" font-family="monospace" font-size="11">
+        ⚡ 5x faster
+      </text>
+    </g>
+    <!-- Status bar -->
+    <text x="175" y="335" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="14" font-weight="bold">
+      ✅ 20+ concurrent sessions
+    </text>
+  </g>
+  <!-- Bottom CTA -->
+  <g>
+    <rect x="250" y="365" width="300" height="28" rx="14" fill="url(#purpleGrad)"/>
+    <text x="400" y="384" text-anchor="middle" fill="#fff" font-family="system-ui" font-size="12" font-weight="bold">
+      npm install -g claude-chrome-parallel
+    </text>
+  </g>
+</svg>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "claude-chrome-parallel",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "MCP server for parallel Claude Code browser sessions - no more 'Detached' errors",
   "main": "dist/index.js",
   "bin": {
@@ -68,6 +68,7 @@
   },
   "files": [
     "dist",
+    "assets",
     "README.md",
     "LICENSE"
   ]