{"id":48536430,"url":"https://github.com/mudern/web-browser-skill","last_synced_at":"2026-04-08T02:03:28.827Z","repository":{"id":349588615,"uuid":"1203006345","full_name":"mudern/web-browser-skill","owner":"mudern","description":"用于浏览网页和进行自动化操作的 Claude Code Skill。通过本地 HTTP 服务，让 Claude 可以启动浏览器、访问 URL、查看页面内容、填写表单、点击按钮、滚动页面、提取数据等。","archived":false,"fork":false,"pushed_at":"2026-04-06T16:23:10.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-06T18:19:32.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mudern.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-06T16:17:58.000Z","updated_at":"2026-04-06T16:21:48.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mudern/web-browser-skill","commit_stats":null,"previous_names":["mudern/web-browser-skill"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mudern/web-browser-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudern%2Fweb-browser-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudern%2Fweb-browser-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudern%2Fweb-browser-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudern%2Fweb-browser-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mudern","download_url":"https://codeload.github.com/mudern/web-browser-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudern%2Fweb-browser-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31536473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"online","status_checked_at":"2026-04-08T02:00:06.127Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-08T02:02:57.906Z","updated_at":"2026-04-08T02:03:28.819Z","avatar_url":"https://github.com/mudern.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Browser Skill\n\n用于浏览网页和进行自动化操作的 Claude Code Skill。通过本地 HTTP 服务，让 Claude 可以启动浏览器、访问 URL、查看页面内容、填写表单、点击按钮、滚动页面、提取数据等。\n\n## 功能特性\n\n- 启动无头或有头浏览器\n- 访问任意 URL\n- 获取页面快照和元素信息\n- 点击页面元素\n- 填写表单输入\n- 模拟按键操作\n- 页面截图\n- 保存/加载登录状态\n- 执行自定义 JavaScript\n\n## 环境准备\n\n### 1. 安装依赖\n\n```bash\ncd scripts\nuv venv\nuv sync\nplaywright install chromium\n```\n\n### 2. 启动服务\n\n```bash\ncd scripts\nsource .venv/bin/activate\npython browser.py\n```\n\n服务默认监听 `http://127.0.0.1:8765`\n\n指定端口：\n\n```bash\npython browser.py --port 9001\n```\n\n指定 Host + Port：\n\n```bash\npython browser.py --host 127.0.0.1 --port 9001\n```\n\n## API 接口\n\n### 健康检查\n\n```http\nGET /health\n```\n\n### 获取页面快照\n\n```http\nGET /snapshot\n```\n\n### 执行操作\n\n```http\nPOST /action\nContent-Type: application/json\n```\n\n## 可用操作 (actions)\n\n| action       | 参数                                      | 说明       |\n|-------------|-----------------------------------------|----------|\n| `start`     | `headless`, `storage_state`, `viewport` | 启动浏览器   |\n| `goto`      | `url`, `wait_until`, `timeout`         | 访问 URL   |\n| `snapshot`  | -                                       | 获取页面信息  |\n| `click`     | `selector`, `timeout`                  | 点击元素    |\n| `fill`      | `selector`, `value`, `timeout`          | 输入内容    |\n| `press`     | `selector`, `key`, `timeout`            | 按键       |\n| `wait`      | `ms`                                    | 等待       |\n| `save_state`| `path`                                  | 保存登录状态  |\n| `load_state`| `path`, `headless`                      | 加载登录状态  |\n| `screenshot`| `path`, `full_page`                     | 截图       |\n| `eval`      | `script`                                | 执行 JavaScript |\n| `close`     | -                                       | 关闭浏览器    |\n\n## 使用示例\n\n假设服务运行在 `http://127.0.0.1:9001`\n\n### 启动浏览器\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"start\",\"headless\":false}'\n```\n\n### 打开网页\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"goto\",\"url\":\"https://example.com\"}'\n```\n\n### 获取页面信息\n\n```bash\ncurl http://127.0.0.1:9001/snapshot\n```\n\n### 点击按钮\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"click\",\"selector\":\"#submit-button\"}'\n```\n\n### 输入内容\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"fill\",\"selector\":\"input[name=email]\",\"value\":\"test@example.com\"}'\n```\n\n### 截图\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"screenshot\",\"path\":\"page.png\",\"full_page\":true}'\n```\n\n### 保存登录状态\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"save_state\",\"path\":\"state.json\"}'\n```\n\n### 加载登录状态\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"load_state\",\"path\":\"state.json\",\"headless\":false}'\n```\n\n### 关闭浏览器\n\n```bash\ncurl -X POST http://127.0.0.1:9001/action \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"action\":\"close\"}'\n```\n\n## 返回格式\n\n成功：\n\n```json\n{\n  \"ok\": true,\n  \"title\": \"...\",\n  \"url\": \"...\",\n  \"text\": \"...\",\n  \"elements\": [...]\n}\n```\n\n或：\n\n```json\n{\n  \"ok\": true,\n  \"message\": \"started\"\n}\n```\n\n失败：\n\n```json\n{\n  \"ok\": false,\n  \"error\": \"错误信息\",\n  \"detail\": \"详细信息\",\n  \"status\": 400\n}\n```\n\n## 页面元素结构（elements）\n\n每个元素包含：\n\n- `index`: 索引\n- `tag`: 标签\n- `text`: 文本\n- `placeholder`\n- `type`\n- `name`\n- `id`\n- `class`\n- `href`\n- `visible`\n- `selector_hint`\n\n## 推荐流程\n\n1. 启动服务\n2. 调用 `start`\n3. 调用 `goto`\n4. 使用 `click / fill / press` 进行操作\n5. 使用 `snapshot` 获取页面状态\n6. 必要时 `save_state`\n7. 完成后 `close`\n\n## 注意事项\n\n- 服务是常驻进程，应保持运行\n- 所有操作通过 HTTP 调用完成\n- 浏览器状态在同一个服务实例中持续存在\n- 如需多实例，请使用不同端口\n- 登录后建议保存状态以便复用\n- 注意超时参数设置\n- 优先使用 `selector_hint` 作为选择器\n\n## 项目结构\n\n```\nweb-browser/\n├── SKILL.md          # Skill 定义文件\n├── README.md         # 本文件\n├── .gitignore        # Git 忽略配置\n└── scripts/\n    ├── browser.py    # 主程序\n    ├── pyproject.toml\n    └── .python-version\n```\n\n## 技术栈\n\n- Python 3.13+\n- Playwright\n- HTTP 服务器 (FastAPI/uvicorn)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudern%2Fweb-browser-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmudern%2Fweb-browser-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudern%2Fweb-browser-skill/lists"}