Web Browser Skill
Full-featured browser automation with CDP tools for collaborative site exploration.
🔧 修复说明：已修复关闭主浏览器的问题。现在使用完全独立的浏览器实例，不影响你的主 Chrome。详见 FIX_NOTE.md
🎲 随机端口：每次启动时自动生成随机端口（9222-9999），避免端口冲突。端口信息保存在 ~/.cache/scraping-web-browser/port.txt，下次启动会复用相同端口。
💾 持久化存储：默认使用 Chromium 浏览器，数据持久化保存在 ~/.cache/scraping-web-browser/，包括 cookies、localStorage、session data 等，重启后自动恢复。
Quick Start
# Run demo to test everything works
node demo.js
# Get current port
node scripts/get-port.js
# Start Chromium browser (default, with persistent storage)
node scripts/start.jsBrowser Management
Start Chromium (Default)
Start Chromium on a random port (9222-9999) with remote debugging. The port is saved and reused for subsequent starts.
**Important**: This skill starts a completely independent browser instance with its own profile directory (`~/.cache/scraping-web-browser`). It will NOT affect your existing Chrome browser or close any open tabs. The browser runs in the background and persists cookies, localStorage, and session data between restarts.
### Stop Chrome
Gracefully stop the browser. Port configuration is preserved for next start.
Get Port
## Navigation
### Navigate
Navigate current tab or open new tab.
Reload
Reload the current page with cache control.
### Tabs
Manage browser tabs.
Form Interaction
Click
Click an element by selector.
### Type
Type text into an input field.
Select
Select an option from a dropdown.
### Checkbox
Check, uncheck, or toggle checkboxes and radiobuttons.
Submit
Submit a form.
## Waiting & Detection
### Wait For
Wait for elements, visibility, text, or URL changes.
Wait For URL
Wait for URL to change to a specific value.
### Check Visible
Check if an element is visible.
Get Element
Get detailed information about an element.
## Storage & Cookies
### Cookies
Manage cookies (list, get, set, delete, clear, export, import).
Storage
Manage localStorage and sessionStorage.
### Clear Data
Clear browser data.
Network & Performance
Network
Monitor and capture network requests.
### Performance
Get performance metrics and timing breakdown.
Intercept
Block, mock, or log network requests.
## Advanced Features
### Scroll
Scroll the page.
Hover
Hover over an element.
### Upload
Upload a file.
Download
Manage file downloads.
### PDF
Export current page as PDF.
Debugging & Tools
Debug
Show browser debug information.
### Inspect
Inspect elements in detail.
Find Text
Find text on the page.
### Get Meta
Get page metadata (Open Graph, Twitter Card, JSON-LD, etc.).
JavaScript Evaluation
Evaluate JavaScript
Execute JavaScript in active tab (async context). Be careful with string escaping, best to use single quotes.
## Screenshots
### Screenshot
Screenshot current viewport, returns temp file path.
Element Selection
Pick Elements
Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.
## Console
### Check Console
Check console logs and errors.
Console Logs
Get console logs.
## Script Reference
### Browser Management (3)
- `start.js` - Start Chrome with random port
- `stop.js` - Stop Chrome
- `get-port.js` - Get current port
### Navigation (3)
- `nav.js` - Navigate to URL
- `reload.js` - Reload page
- `tabs.js` - Manage tabs
### Form Interaction (5)
- `click.js` - Click element
- `type.js` - Type text
- `select.js` - Select dropdown option
- `checkbox.js` - Check/uncheck/toggle
- `submit.js` - Submit form
### Waiting & Detection (4)
- `wait-for.js` - Wait for element/visible/hidden/text/url
- `wait-for-url.js` - Wait for URL change
- `check-visible.js` - Check element visibility
- `get-element.js` - Get element info
### Storage & Cookies (3)
- `cookies.js` - Cookie management
- `storage.js` - localStorage/sessionStorage management
- `clear-data.js` - Clear browser data
### Network & Performance (4)
- `network.js` - Network monitoring
- `performance.js` - Performance metrics
- `intercept.js` - Request interception
- `reload.js` - Reload with cache control
### Advanced Features (6)
- `scroll.js` - Page scrolling
- `hover.js` - Mouse hover
- `upload.js` - File upload
- `download.js` - File download
- `pdf.js` - PDF export
- `tabs.js` - Tab management
### Debugging & Tools (4)
- `debug.js` - Debug information
- `inspect.js` - Element inspection
- `find-text.js` - Text search
- `get-meta.js` - Page metadata
### Core (4)
- `eval.js` - JavaScript evaluation
- `screenshot.js` - Screenshot
- `pick.js` - Element picker
- `check-console.js` - Console check
**Total: 36 scripts**
## Best Practices
1. **Always stop browser**: Use `node scripts/stop.js` when done to release resources
2. **Check port**: Use `node scripts/get-port.js` to see current port
3. **Error handling**: If errors occur, restart browser and retry
4. **Persistence**: All data (cookies, localStorage, sessions) persists in `~/.cache/scraping-web-browser/`
5. **Wait strategies**: Use `wait-for.js` for dynamic content
6. **Network monitoring**: Use `network.js start/stop` to analyze requests
7. **Debugging**: Use `debug.js` and `inspect.js` for troubleshooting
## Port Management
- **Random port**: Automatically generated on first start (9222-9999)
- **Port persistence**: Port is saved to `~/.cache/scraping-web-browser/port.txt`
- **Reuse**: Next start uses the same port
- **Reset**: Delete port.txt to get a new random port
- **Check port**: Run `node scripts/get-port.js` to see current port
## Configuration Directory
- **Config**: `~/.cache/scraping-web-browser/`
- **Port file**: `~/.cache/scraping-web-browser/port.txt`
- **Cookies**: `~/.cache/scraping-web-browser/Default/Cookies`
- **LocalStorage**: `~/.cache/scraping-web-browser/Default/Local Storage/`
## Process Management
View process
ps aux | grep "scraping-web-browser"
Stop browser
node scripts/stop.js
Force stop
pkill -f "scraping-web-browser" ```