Web Access Skill for Claude Code Skill by 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: 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+ node --version
must be >= 22
Enable Chrome Remote Debugging Open chrome://inspect/#remote-debugging in your Chrome Check Allow remote debugging for this browser instance Restart Chrome if prompted Verify Dependencies 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
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
→
Full HTTP API Reference
── Tab management ──────────────────────────────────────────
Open new tab, returns tab ID
curl -s "http://localhost:3456/new?url=https://example.com"
→
Close a tab
curl -s "http://localhost:3456/close?target=ABC123"
→
── Page content ────────────────────────────────────────────
Execute JavaScript, returns result
curl -s -X POST "http://localhost:3456/eval?target=ABC123" \ -d 'document.title'
→
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 elements)
curl -s -X POST "http://localhost:3456/clickAt?target=ABC123" \ -d '.upload-btn'
File upload via input element
curl -s -X POST "http://localhost:3456/setFiles?target=ABC123" \ -H "Content-Type: application/json" \ -d '{"selector":"input[type=file]","files":["/tmp/photo.png"]}'
── Navigation ──────────────────────────────────────────────
Scroll to bottom
curl -s "http://localhost:3456/scroll?target=ABC123&direction=bottom"
Scroll to top
curl -s "http://localhost:3456/scroll?target=ABC123&direction=top"
── Visual ──────────────────────────────────────────────────
Screenshot to file
curl -s "http://localhost:3456/screenshot?target=ABC123&file=/tmp/shot.png"
Screenshot returned as base64
curl -s "http://localhost:3456/screenshot?target=ABC123"
→
Three-Layer Channel Dispatch The skill teaches Claude to pick the right tool automatically: Task type → Tool choice ───────────────────────────────────────── General search query → WebSearch Static page / docs / API → WebFetch or Jina Login-gated / dynamic page → CDP Proxy Heavy JS / SPA → CDP Proxy Video / canvas interaction → CDP Proxy (clickAt) Bulk text extraction → Jina (token-efficient) Raw HTTP / custom headers → curl Jina Usage (Token-Efficient Reads)
Jina converts any URL to clean markdown — great for docs/articles
curl
-s
"https://r.jina.ai/https://docs.example.com/api"
Code Examples
Example 1: Open a Page and Extract Data
// Claude runs this flow via CDP Proxy
// 1. Open tab
const
tabRes
=
await
fetch
(
'http://localhost:3456/new?url=https://news.ycombinator.com'
)
;
const
{
targetId
}
=
await
tabRes
.
json
(
)
;
// 2. Wait for load, then extract top story titles
const
evalRes
=
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
Array.from(document.querySelectorAll('.titleline > a'))
.slice(0, 10)
.map(a => ({ title: a.textContent, href: a.href }))
}
)
;
const
{
result
}
=
await
evalRes
.
json
(
)
;
console
.
log
(
JSON
.
parse
(
result
)
)
;
// 3. Clean up
await
fetch
(
http://localhost:3456/close?target=
${
targetId
}
)
;
Example 2: Login-Gated Page (Uses Existing Chrome Session)
// Chrome already has the user logged in — CDP inherits cookies automatically
async
function
scrapeAuthenticatedPage
(
url
)
{
// Open tab in the user's real Chrome — no login needed
const
{
targetId
}
=
await
fetch
(
http://localhost:3456/new?url=
${
url
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
// Wait for dynamic content
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
new Promise(r => setTimeout(r, 2000))
}
)
;
// Extract content
const
{
result
}
=
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
document.querySelector('.main-content')?.innerText
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
await
fetch
(
http://localhost:3456/close?target=
${
targetId
}
)
;
return
result
;
}
Example 3: File Upload Automation
async
function
uploadFile
(
pageUrl
,
filePath
)
{
const
{
targetId
}
=
await
fetch
(
http://localhost:3456/new?url=
${
pageUrl
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
// Wait for page
await
new
Promise
(
r
=>
setTimeout
(
r
,
1500
)
)
;
// Click the upload trigger button (real mouse event — required for some SPAs)
await
fetch
(
http://localhost:3456/clickAt?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
'.upload-trigger-button'
}
)
;
await
new
Promise
(
r
=>
setTimeout
(
r
,
500
)
)
;
// Set file on the (possibly hidden) input
await
fetch
(
http://localhost:3456/setFiles?target=
${
targetId
}
,
{
method
:
'POST'
,
headers
:
{
'Content-Type'
:
'application/json'
}
,
body
:
JSON
.
stringify
(
{
selector
:
'input[type=file]'
,
files
:
[
filePath
]
}
)
}
)
;
// Submit
await
fetch
(
http://localhost:3456/click?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
'button[type=submit]'
}
)
;
// Screenshot to verify
await
fetch
(
http://localhost:3456/screenshot?target=
${
targetId
}
&file=/tmp/upload-result.png
)
;
await
fetch
(
http://localhost:3456/close?target=
${
targetId
}
)
;
}
Example 4: Parallel Research with Sub-Agents
// Instruct Claude to dispatch parallel sub-agents like this:
const
targets
=
[
'https://product-a.com'
,
'https://product-b.com'
,
'https://product-c.com'
,
'https://product-d.com'
,
'https://product-e.com'
]
;
// Each sub-agent opens its own tab (tab-isolated, same Proxy)
const
results
=
await
Promise
.
all
(
targets
.
map
(
async
(
url
)
=>
{
const
{
targetId
}
=
await
fetch
(
http://localhost:3456/new?url=
${
url
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
await
new
Promise
(
r
=>
setTimeout
(
r
,
2000
)
)
;
const
{
result
}
=
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
({
title: document.title,
description: document.querySelector('meta[name=description]')?.content,
h1: document.querySelector('h1')?.textContent,
pricing: document.querySelector('[class*="pric"]')?.innerText?.slice(0,200)
})
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
await
fetch
(
http://localhost:3456/close?target=
${
targetId
}
)
;
return
{
url
,
data
:
JSON
.
parse
(
result
)
}
;
}
)
)
;
console
.
table
(
results
)
;
Example 5: Video Frame Screenshot
async
function
screenshotVideoAt
(
pageUrl
,
timestampSeconds
)
{
const
{
targetId
}
=
await
fetch
(
http://localhost:3456/new?url=
${
pageUrl
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
await
new
Promise
(
r
=>
setTimeout
(
r
,
3000
)
)
;
// Seek video to timestamp
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
const v = document.querySelector('video');
v.currentTime =
${
timestampSeconds
}
;
v.pause();
}
)
;
await
new
Promise
(
r
=>
setTimeout
(
r
,
500
)
)
;
// Capture the frame
await
fetch
(
http://localhost:3456/screenshot?target=
${
targetId
}
&file=/tmp/frame-
${
timestampSeconds
}
s.png
)
;
await
fetch
(
http://localhost:3456/close?target=
${
targetId
}
)
;
}
Common Patterns
Pattern: Check Proxy Before CDP Tasks
Always verify proxy is up before a CDP workflow
curl -s http://localhost:3456/ping || \ node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs & Pattern: Use Jina for Documentation
Cheaper and cleaner than WebFetch for text-heavy pages
curl
-s
"https://r.jina.ai/https://api.anthropic.com/docs"
Pattern: Prefer WebSearch for Discovery, CDP for Execution
1. WebSearch → find the right URLs
2. WebFetch → read static/public content
3. CDP → interact, authenticate, dynamic content
Pattern: Extract All Media URLs
// Get all images and videos on current page
const
media
=
await
fetch
(
http://localhost:3456/eval?target=
${
targetId
}
,
{
method
:
'POST'
,
body
:
({
images: Array.from(document.images).map(i => i.src),
videos: Array.from(document.querySelectorAll('video source, video[src]'))
.map(v => v.src || v.getAttribute('src'))
})
}
)
.
then
(
r
=>
r
.
json
(
)
)
;
Troubleshooting
Proxy won't start
Check if port 3456 is already in use
lsof -i :3456
Kill existing proxy
kill $( lsof -ti :3456 )
Restart
node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs & Chrome not reachable
Verify Chrome remote debugging is on
curl -s http://localhost:9222/json/version
Should return Chrome version JSON
If empty — go to chrome://inspect/#remote-debugging and enable it
/clickAt has no effect The element may need scrolling into view first: curl -s -X POST "http://localhost:3456/eval?target=ID" \ -d 'document.querySelector(".btn").scrollIntoView()' Then retry /clickAt Page content is empty / JS not rendered
Add a wait after /new before /eval
curl -s -X POST "http://localhost:3456/eval?target=ID" \ -d 'new Promise(r => setTimeout(r, 3000))'
Then fetch content
File upload input not found Some SPAs render only after the trigger click. Always: /clickAt the visible upload button first Wait 500ms Then /setFiles Sub-agent tabs interfering Each sub-agent should store its own targetId and never share it. The Proxy is stateless per-tab. Proxy Auto-Shutdown The proxy exits automatically after 20 minutes of no requests . For long-running tasks:
Keep-alive ping in background
while true ; do curl -s http://localhost:3456/ping
/dev/null ; sleep 300 ; done & Site Experience Store The skill accumulates domain knowledge in a local JSON store. When Claude visits twitter.com , it reads any saved notes about: Known working URL patterns Login flow quirks Selectors that are stable vs dynamic Rate limiting behavior This persists across Claude sessions. The store lives at: ~/.claude/skills/web-access/data/site-experience.json You can inspect or edit it manually to add your own domain knowledge. Project Structure ~/.claude/skills/web-access/ ├── SKILL.md ← This skill file (loaded by Claude) ├── scripts/ │ ├── cdp-proxy.mjs ← CDP Proxy server (Node.js 22+) │ └── check-deps.sh ← Dependency checker └── data/ └── site-experience.json ← Accumulated domain knowledge Capability Summary for Task Routing User says Claude should use "Search for X" WebSearch "Read this URL" WebFetch or Jina "Go to my dashboard on X" CDP (login state) "Click the submit button on X" CDP /click or /clickAt "Upload this file to X" CDP /setFiles "Research these 5 products" Parallel sub-agents via CDP "Extract images from X" CDP /eval + DOM query "Screenshot X at 1:23 in the video" CDP /eval seek + /screenshot