browser
This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP). Triggers when users need to launch Chrome with remote debugging, navigate pages, execute JavaScript in browser context, capture screenshots, or interactively select DOM elements. No MCP server required.
- License 许可
- MIT
- 最近更新
- 2026-11-12
- Stars
- ★ 3
- Forks
- 1
01 前言 Front Matter
- name
- browser
- description
- This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP). Triggers when users need to launch Chrome with remote debugging, navigate pages, execute JavaScript in browser context, capture screenshots, or interactively select DOM elements. No MCP server required.
02 资源文件 8
- 资产文件browser.zip5.4 KB
- 参考文档package-lock.json756 B
- 参考文档package.json48 B
- 脚本scripts/eval.cjs1.5 KB
- 脚本scripts/nav.cjs1.9 KB
- 脚本scripts/pick.cjs2.6 KB
- 脚本scripts/screenshot.cjs1.4 KB
- 脚本scripts/start.cjs1.1 KB
03 SKILL.md 正文
Browser Automation
Minimal Chrome DevTools Protocol (CDP) helpers for browser automation without MCP server setup.
Setup
Install dependencies before first use:
npm install --prefix ~/.codebuddy/skills/browser/browser ws
Scripts
All scripts connect to Chrome on localhost:9222.
start.js - Launch Chrome
scripts/start.js # Fresh profile
scripts/start.js --profile # Use persistent profile (keeps cookies/auth)
nav.js - Navigate
scripts/nav.js https://example.com # Navigate current tab
scripts/nav.js https://example.com --new # Open in new tab
eval.js - Execute JavaScript
scripts/eval.js 'document.title'
scripts/eval.js '(() => { const x = 1; return x + 1; })()'
Use single expressions or IIFE for multiple statements.
screenshot.js - Capture Screenshot
scripts/screenshot.js
Returns { path, filename } of saved PNG in temp directory.
pick.js - Visual Element Picker
scripts/pick.js "Click the submit button"
Returns element metadata: tag, id, classes, text, href, selector, rect.
Workflow
- Launch Chrome:
scripts/start.js --profilefor authenticated sessions - Navigate:
scripts/nav.js <url> - Inspect:
scripts/eval.js 'document.querySelector(...)' - Capture:
scripts/screenshot.jsorscripts/pick.js - Return gathered data
Key Points
- All operations run locally - credentials never leave the machine
- Use
--profileflag to preserve cookies and auth tokens - Scripts return structured JSON for agent consumption
04 同仓库更多 Skills
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
browsing
Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."