Web Access Claude Skill

# Web Access Skill for Claude Code

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A skill that gives Claude Code complete internet access using three-layer channel dispatch (WebSearch / WebFetch / CDP), Chrome DevTools Protocol browser automation via a local proxy, parallel sub-agent task splitting, and cross-session site experience accumulation.

## What This Project Does

Claude Code ships with `WebSearch` and `WebFetch` but lacks:
- **Dispatch strategy** — knowing *when* to use which tool
- **Browser automation** — clicking, scrolling, file upload, dynamic pages
- **Accumulated site knowledge** — domain-specific patterns reused across sessions

Web Access fills all three gaps with:

| Capability | Detail |
|---|---|
| Auto tool selection | WebSearch / WebFetch / curl / Jina / CDP chosen per scenario |
| CDP Proxy | Connects directly to your running Chrome, inherits login state |
| Three click modes | `/click` (JS), `/clickAt` (real mouse events), `/setFiles` (upload) |
| Parallel dispatch | Multiple targets → sub-agents share one Proxy, tab-isolated |
| Site experience store | Per-domain URL patterns, quirks, traps — persisted across sessions |
| Media extraction | Pull image/video URLs from DOM, screenshot any video frame |

## Installation

**Option A — Let Claude install it:**
```
帮我安装这个 skill：https://github.com/eze-is/web-access
```
or in English:
```
Install this skill for me: https://github.com/eze-is/web-access
```

**Option B — Manual:**
```bash
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access
```

The skill file is `~/.claude/skills/web-access/SKILL.md`. Claude Code loads all `SKILL.md` files under `~/.claude/skills/` automatically.

## Prerequisites

### Node.js 22+
```bash
node --version   # must be >= 22
```

### Enable Chrome Remote Debugging
1. Open `chrome://inspect/#remote-debugging` in your Chrome
2. Check **Allow remote debugging for this browser instance**
3. Restart Chrome if prompted

### Verify Dependencies
```bash
bash ~/.claude/skills/web-access/scripts/check-deps.sh
```

Expected output:
```
✅ Node.js 22.x found
✅ Chrome DevTools reachable at localhost:9222
✅ curl available
```

## CDP Proxy — Core Component

The proxy is a lightweight Node.js WebSocket bridge between Claude and your Chrome instance.

### Start the Proxy
```bash
# Start in background (auto-exits after 20 min idle)
node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs &

# Confirm it's running
curl -s http://localhost:3456/ping
# → {"status":"ok"}
```

### Full HTTP API Reference

```bash
# ── Tab management ──────────────────────────────────────────
# Open new tab, returns tab ID
curl -s "http://localhost:3456/new?url=https://example.com"
# → {"targetId":"ABC123","url":"https://example.com"}

# Close a tab
curl -s "http://localhost:3456/close?target=ABC123"
# → {"closed":true}

# ── Page content ────────────────────────────────────────────
# Execute JavaScript, returns result
curl -s -X POST "http://localhost:3456/eval?target=ABC123" \
  -d 'document.title'
# → {"result":"Example Domain"}

# Get full page HTML
curl -s -X POST "http://localhost:3456/eval?target=ABC123" \
  -d 'document.documentElement.outerHTML'

# ── Interaction ─────────────────────────────────────────────
# JS click (fast, works for most buttons)
curl -s -X POST "http://localhost:3456/click?target=ABC123" \
  -d 'button.submit'

# Real mouse click via CDP (use for upload triggers, canvas elem