跳到正文
cccskills
免费在 GitHub 公开

browser-tools

Use this skill when the user asks to test, verify, interact with, or automate web pages and browsers. Trigger for requests involving Chrome automation, browser testing, web scraping, screenshot capture, element selection, or checking web applications. Also trigger when user mentions "browser tools" explicitly.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace
查看安装方法

包含的文件（9）

  • SKILL.md5.3 KB
  • scripts/browser-console.js5.8 KB
  • scripts/browser-cookies.js861 B
  • scripts/browser-eval.js1.5 KB
  • scripts/browser-nav.js1.8 KB
  • scripts/browser-pick.js5.1 KB
  • scripts/browser-screenshot.js832 B
  • scripts/browser-start.js2.1 KB
  • scripts/package.json239 B

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Browser Tools

Chrome DevTools Protocol automation for agent-assisted web testing and interaction. Uses Chrome running on :9222 with remote debugging.

Prerequisites

Run /browser-tools:setup once after plugin installation - This installs dependencies and creates global symlinks for all browser scripts.

Usage

When user asks to test, verify, or interact with web pages using browser tools:

  1. Start Chrome - Launch with debugging enabled
  2. Navigate & interact - Use scripts to navigate, evaluate JS, take screenshots
  3. Return results - Show output/screenshots to user

IMPORTANT: Use command names directly (e.g., browser-start), NOT full paths (e.g., ~/bin/browser-start). Commands are in PATH after setup.

Available Scripts

All scripts located in ${CLAUDE_SKILL_DIR}/scripts/:

browser-start

By default use the persistent profile at /tmp/chrome-profile-browser-tools.

browser-start --profile    # Persistent profile
browser-start              # Fresh profile

Launch Chrome with remote debugging on port 9222. Use --profile to maintain login state between sessions.

browser-nav

browser-nav https://example.com
browser-nav https://example.com --new

Navigate to URLs. Use --new to open in new tab instead of current tab.

browser-eval

browser-eval 'document.title'
browser-eval 'document.querySelectorAll("a").length'
browser-eval 'Array.from(document.querySelectorAll("h1")).map(h => h.textContent)'

Execute JavaScript in active tab. Runs in async context. Use for:

  • Extract data from pages
  • Inspect page state
  • Manipulate DOM
  • Test page functionality

browser-screenshot

browser-screenshot

Capture current viewport, returns temp file path. Use Read tool to show screenshot to user.

browser-pick

browser-pick                      # Uses default message "Select element(s)"
browser-pick "Select the submit button"

Interactive element picker - Launches UI overlay for user to click and select elements. Returns element details (tag, id, class, text, html, parent hierarchy). Message parameter is optional.

Use when:

  • User says "click that button" or "extract those items"
  • Need specific selectors but page structure is unclear
  • User wants to identify elements visually

Controls:

  • Click to select single element
  • Cmd/Ctrl+Click for multiple selections
  • Enter to finish (when multiple selected)
  • ESC to cancel

browser-console

browser-console                         # Stream logs until Ctrl+C or kill
browser-console --url http://...        # Navigate and exit after load
browser-console --url http://... --no-exit  # Navigate then keep streaming
browser-console --level error,warn      # Filter by log level

Capture console logs (log, warn, error, info, debug) from Chrome. Includes stack traces for errors and page errors.

Modes:

  • Streaming (default): Captures logs until process is killed. Best for workflow monitoring.
  • Navigation (--url): Navigates to URL and exits after page load. Captures logs during page initialization.

Claude Code usage:

# Page load logs - auto-exits after load
browser-console --url http://localhost:3000

# Workflow monitoring - run in background, kill when done
browser-console &
browser-nav http://localhost:3000
browser-eval "triggerSomeAction()"
# Check logs via BashOutput, kill via KillShell

browser-cookies

browser-cookies

Display all cookies for current tab (domain, path, httpOnly, secure flags). Use for debugging auth issues.

Workflow Examples

Test dev server feature

# Start browser with persistent profile
browser-start --profile

# Navigate to dev server
browser-nav http://localhost:3000

# Test functionality
browser-eval 'document.querySelector("#new-feature").textContent'

# Take screenshot
SCREENSHOT=$(browser-screenshot)
# Then use Read tool to show screenshot at $SCREENSHOT path

Debug authentication

browser-start --profile
browser-nav https://app.example.com/login
browser-cookies

Extract data from page

browser-start
browser-nav https://example.com
browser-eval 'Array.from(document.querySelectorAll(".product")).map(p => ({name: p.querySelector(".title").textContent, price: p.querySelector(".price").textContent}))'

Important Notes

  • Chrome required - Scripts use google-chrome binary
  • Port 9222 - Chrome runs with --remote-debugging-port=9222
  • Profile location - /tmp/chrome-profile-browser-tools when using --profile
  • Temp screenshots - Screenshots saved to OS temp directory
  • Dependencies - Requires chrome-remote-interface (installed via /browser-tools:setup)
  • Error handling - If scripts fail, check Chrome is running and port 9222 is available

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

aiwork-protocol

免费

Structure AI work artifacts under .aiwork/{YYYY-MM-DD}_{slug}/ folders using the project's protocol (intent, triage, research, spec, prd, areas, plan, review, notes, docs/). Use when the user asks to plan, capture an intent, make a spec, triage, research a task, write a report, code review, summarize findings, save the work, document decisions, record this, write that down, persist findings, or references any path under .aiwork/. Also use when starting a non-trivial task that needs a plan or spec before implementation, or when finishing one and capturing notes.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

changelog

免费

Show recent Claude Code changes personalized to user's setup. Trigger when user asks about changelog, "what's new", "cc changelog", "claude code updates", "recent changes", or wants to know what changed in Claude Code.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

code-review

免费

Review code changes from current branch, an Azure DevOps PR, a git ref, or a diff/patch file. Trigger when user says "review this", "code review", "/df:code-review", or provides a PR id/URL, ticket URL, git ref, or diff path. Read-only — never posts comments.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

code-review-diff

免费

Review code changes from the current branch, staged changes, a git ref, or a diff/patch file. Pure git-native — no platform/PR awareness. Trigger when user says "review this", "review diff", "/aiwork:code-review-diff", or provides a git ref or diff path. Read-only — never posts comments.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

czech-typography

免费

Czech typography rules for web development. Use when building web pages in Czech language, writing Czech content, or fixing typography issues in Czech text. Covers punctuation, dashes, quotes, numbers, units, non-breaking spaces, and HTML entities.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

dependency-update

免费

Periodic dependency update run. Reads what the package manager says is outdated, upgrades what is safe, applies the code changes the new versions need, verifies, and opens one reviewable PR. Supports a read-only dry run that reports what it would do. Use when the user says "dependency update", "/dependency-update", "update deps", "dry run the dep update", or when a scheduled cloud routine fires.

中文简介正在准备中。当前显示原文说明。

lttr/claude-marketplace22026年10月6日 更新

查看 lttr 的全部技能

报告此技能的问题