oimwiodev/chrome-use
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add skill-creator and improve agent-browser skill (#341)

Browse Source 
* add skills-creator

* update skill

* better docs

* minor fixes
This commit is contained in:
Chris Tate
2026-02-02 19:18:34 -06:00
committed by GitHub
parent 9c45f82193
commit e52aa49706
24 changed files with 1828 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/app/snapshots/page.tsx
+30 -12
View File
@@ -6,13 +6,13 @@ export default function Snapshots() {
<div className="prose">
<h1>Snapshots</h1>
<p>
The <code>snapshot</code> command returns the accessibility tree with refs for AI-friendly interaction.
The <code>snapshot</code> command returns a compact accessibility tree with refs for element interaction.
</p>
<h2>Options</h2>
<p>Filter output to reduce size:</p>
<CodeBlock code={`agent-browser snapshot # Full accessibility tree
agent-browser snapshot -i # Interactive elements only
agent-browser snapshot -i # Interactive elements only (recommended)
agent-browser snapshot -c # Compact (remove empty elements)
agent-browser snapshot -d 3 # Limit depth to 3 levels
agent-browser snapshot -s "#main" # Scope to CSS selector
@@ -46,25 +46,43 @@ agent-browser snapshot -i -c -d 5 # Combine options`} />
</table>
<h2>Output format</h2>
<CodeBlock code={`agent-browser snapshot
<p>The default text output is compact and AI-friendly:</p>
<CodeBlock code={`agent-browser snapshot -i
# Output:
# - heading "Example Domain" [ref=e1] [level=1]
# - button "Submit" [ref=e2]
# - textbox "Email" [ref=e3]
# - link "Learn more" [ref=e4]`} />
# @e1 [heading] "Example Domain" [level=1]
# @e2 [button] "Submit"
# @e3 [input type="email"] placeholder="Email"
# @e4 [link] "Learn more"`} />
<h2>JSON output</h2>
<p>Use <code>--json</code> for machine-readable output:</p>
<CodeBlock code={`agent-browser snapshot --json
# {"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"Title"},...}}}`} />
<h2>Using refs</h2>
<p>Refs from the snapshot map directly to commands:</p>
<CodeBlock code={`agent-browser click @e2 # Click the Submit button
agent-browser fill @e3 "a@b.com" # Fill the email input
agent-browser get text @e1 # Get heading text`} />
<h2>Ref lifecycle</h2>
<p>
Refs are invalidated when the page changes. Always re-snapshot after navigation or DOM updates:
</p>
<CodeBlock code={`agent-browser click @e4 # Navigates to new page
agent-browser snapshot -i # Get fresh refs
agent-browser click @e1 # Use new refs`} />
<h2>Best practices</h2>
<ol>
<li>Use <code>-i</code> to reduce output to actionable elements</li>
<li>Use <code>--json</code> for structured parsing</li>
<li>Re-snapshot after page changes to get updated refs</li>
<li>Scope with <code>-s</code> for specific page sections</li>
<li>Use <code>-d</code> to limit depth on complex pages</li>
</ol>
<h2>JSON output</h2>
<p>For programmatic parsing in scripts:</p>
<CodeBlock code={`agent-browser snapshot --json
# {"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"Title"},...}}}`} />
<p>
Note: JSON uses more tokens than text output. The default text format is preferred for AI agents.
</p>
</div>
</div>
);