Auto Scraping to CSV — 自动网页抓取到CSV

自动网页抓取到CSV — 页面代理桥 使用基于文本的DOM操作抓取任何网页，并将结构化数据导出到CSV。通过Playwright + 阿里巴巴页面代理控制本地浏览器。无需外部LLM — Claude作为主机模型。

何时使用 数据提取：”提取列表中的所有产品名称和价格“ 表格抓取：”获取价格表中的前10行“ 新闻聚合：”抓取最新的博客文章，包括标题、日期和URL“ 表单和工作流测试：”用test@example.com填写注册表单并提交“ UI验证：”验证仪表板显示表格中的3个项目“ 端到端旅程：”登录 → 添加项目到购物车 → 结账 → 确认订单“ 回归测试：在部署后重新运行自然语言测试脚本

工作原理 Claude（主机模型）↕ HTTP桥服务器（Node.js + Playwright）↕ page.evaluate() 浏览器（Chromium）← 页面代理注入 桥接器通过Playwright启动本地Chromium浏览器 页面代理作为IIFE脚本从CDN注入到目标页面 页面代理索引DOM并生成交互元素的简化文本表示，带有数字索引：[5]提交 [12] Claude接收文本状态，决定下一步行动，并指示桥接器执行它 循环继续，直到任务完成或达到最大步骤数

关键设计决策 决策理由 基于文本的DOM 无需截图，无需视觉模型。更快、更便宜。 主机模型 Claude是推理引擎。无需OpenAI/Qwen API密钥。 HTTP桥接器 Playwright在Node.js中运行；Claude通过简单的HTTP进行通信。 循环兼容 Claude代码的聊天交互模型。 CDN注入 无需npm安装页面代理；自动更新到最新版本。 CSV导出 内置工作流将抓取的JSON数据转换为CSV文件。

首次设置

• 安装Playwright

npm install -D playwright npx playwright install chromium

• 放置桥接器脚本

安装此技能后，将捆绑的桥接器脚本复制到.claude/agents/： cp .claude/skills/auto-scraping-to-csv/page-agent-bridge.mjs .claude/agents/

• 启动桥接器

在单独的终端中（桥接器必须保持运行）： node .claude/agents/page-agent-bridge.mjs 默认端口：9876。自定义端口：node .claude/agents/page-agent-bridge.mjs 8888 您应该看到： 🚀 页面代理桥（主机模型）正在http://localhost:9876上运行

• 验证健康状况

curl http://localhost:9876/health 预期：{ "status": "ok", "sessions": 0, "maxSessions": 5 }

工作流阶段1：初始化会话 curl -X POST http://localhost:9876/sessions \ -H "Content-Type: application/json" \ -d '{"url": "https://example.com", "headless": false}' 响应：{ "id": "a1b2c3d4", "url": "https://example.com" }

阶段2：观察 → 思考 → 行动循环 步骤2a. 观察（获取DOM状态） curl http://localhost:9876/sessions/a1b2c3d4/state 步骤2b. 思考（Claude决定） 根据内容文本，识别目标元素索引并选择操作。 步骤2c. 行动（执行操作） curl -X POST http://localhost:9876/sessions/a1b2c3d4/act \ -H "Content-Type: application/json" \ -d '{"action": "clickElement", "params": {"index": 5}}' 重复观察 → 行动，直到完成。

阶段3：关闭会话 curl -X DELETE http://localhost:9876/sessions/a1b2c3d4 或停止桥接器： curl -X POST http://localhost:9876/shutdown

抓取到CSV工作流 步骤1：导航并获取DOM状态 在目标URL上启动会话并获取DOM状态： curl -X POST http://localhost:9876/sessions \ -H "Content-Type: application/json" \ -d '{"url": "https://example.com/products", "headless": true}' 步骤2：通过JavaScript提取结构化数据 使用executeJavascript操作从页面提取数据： cat > /tmp/extract.json << 'EOF' {"action": "executeJavascript", "params": {"script": "const items = Array.from(document.querySelectorAll('.product')).map(el => ({name: el.querySelector('.title').textContent.trim(), price: el.querySelector('.price').textContent.trim(), url: el.querySelector('a').href})); return JSON.stringify(items);"}} EOF curl -X POST http://localhost:9876/sessions/SESSION_ID/act \ -H "Content-Type: application/json" \ -d @/tmp/extract.json 步骤3：将JSON转换为CSV 选项A — Python（推荐） python3 << 'PYEOF' import json, csv, sys, re # 桥接器返回：”✅ 执行JavaScript。结果：[{...}, {...}]“ # 从消息中提取JSON数组 msg = """PASTE_BRIDGE_RESPONSE_HERE""" match = re.search(r'Result: (\[.*\])', msg) if match: data = json.loads(match.group(1)) with open('output.csv', 'w', newline='') as f: writer = csv.DictWriter(f, fieldnames=data[0].keys()) writer.writeheader() writer.writerows(data) print(f"Wrote {len(data)} rows to output.csv") PYEOF 选项B — jq + csvkit # 安装csvkit：pip install csvkit # 从桥接器响应中提取JSON echo '[{"name":"A","price":"$10"},{"name":"B","price":"$20"}]' | jq -r '.[] | @csv' > output.csv