Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/leeguooooo/chrome-use/canvasnpx skills add leeguooooo/chrome-use --skill canvasgit clone --depth 1 https://github.com/leeguooooo/chrome-useWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/leeguooooo/chrome-use/canvas)<a href="https://agentmods.dev/skills/leeguooooo/chrome-use/canvas"><img src="https://agentmods.dev/badge/skills/leeguooooo/chrome-use/canvas.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00124 | $0.01488 |
| Opus 5 | $0.00062 | $0.00744 |
| Sonnet 5 | $0.00025 | $0.00298 |
| Haiku 4.5 | $0.00012 | $0.00149 |
Grade A, and why
canvas scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 98 lines — stays where its author put it; the contents beside it link to each section on GitHub.
chrome-use canvas / WebGL / games
Canvas / WebGL UIs (game boards, voice-room mic seats, map tiles, design
canvases). These paint to a <canvas> — there is no DOM node and no
accessibility node behind what you see, so snapshot/find/eval querySelector will never return a ref for them. This is a hard limitation, not a
missing feature. To work with them:
- Read the rendered pixels with
chrome-use canvas listthenchrome-use canvas capture [selector] <file>(extracts the canvas bitmap), or a normalscreenshotof the region — then you interpret it. - Act by coordinate: compute the target point and
chrome-use click <x> <y>(orbox @refon a container to get its CSS-px box first). Coordinates are the correct tool here — the snapshot-first rule explicitly carves out canvas. - On the relay, a coordinate click can drift onto the user's foreground tab;
prefer a
--launch/owned tab for heavy canvas coordinate work, or confirm the underlying state via the app's backend/API instead of driving the canvas.
Canvas / WebGL apps (games, map & 3D viewers, drawing tools)
These paint everything to a <canvas> and expose almost no accessibility
tree, so snapshot comes back near-empty and refs are a dead end. snapshot
detects this and prints a one-line hint. Drive them the screenshot way:
chrome-use canvas list # enumerate <canvas> elements (size, type)
chrome-use canvas capture out.png # save the canvas's RENDERED pixels to PNG —
# toDataURL (full backing-store res, e.g.
# Figma 2522x1904), screenshot fallback for
# WebGL w/o preserveDrawingBuffer / tainted.
# Gets the RENDER, not hidden source data
# (those live in the app's binary store/API).
chrome-use screenshot /tmp/s.png # SEE the state (your only read path —
# eval/get text return nothing useful)
chrome-use click 640 360 # interact by viewport coordinate
chrome-use press d --hold 800 # hold-to-move, precise (timed in-daemon —
# NOT keydown+shell-sleep+keyup, which
# adds ~250ms jitter per round-trip)
chrome-use press Space # discrete actions (jump/attack/confirm)
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 98 lines · 124 tokens per session scan A 8d5f5e52eb33
canvas is a skill published in the GitHub repository leeguooooo/chrome-use (160 stars, last pushed yesterday), licensed Apache-2.0. It adds 124 tokens to every session and 1,488 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It comes from a forked repository.
Other skills, from other repositories
surf-codebase
Navigate and modify surf-cli codebase - Chrome extension + native host for AI browser automation. Use for surf-cli code work, architecture questions, implementing browser control/CDP/accessibility/network features.
annotating-screenshots
Use when a browser screenshot needs markup before it is shown or shared, such as highlighting a value that changed, pointing at a control, labelling a step, or blurring PII out of a capture.
openbot-screen-layout
The default layout for every OpenBot configuration screen — PageShell and its prose/wide widths, PageSection and PageRows, Item row composition, the settings-row pattern where a summary and a chevron open a dialog, and the size and variant vocabulary. This is what a new screen looks like unless an instruction says…
wcag22-a11y-audit
WCAG 2.2 Accessibility Audit skill that systematically evaluates web pages against 8 core Success Criteria (1.1.1, 1.4.3, 1.4.11, 2.1.1, 2.1.2, 2.4.3, 2.4.7, 4.1.2) using accessibility tree inspection and visual analysis. Use this skill when you need to perform accessibility testing/auditing on a live webpage.
ux-audit-walkthrough
Minimalist UX/Interaction Audit Expert that deconstructs complex interactions through cognitive load and operational efficiency lenses. Use this skill when you need to perform a UX walkthrough audit on a Figma prototype or web interface, evaluating usability based on principles like fewer clicks, less UI elements, no…
surf
Control Chrome browser via CLI for testing, automation, and debugging. Use when the user needs browser automation, screenshots, form filling, page inspection, network/CPU emulation, DevTools streaming, or AI queries via ChatGPT/Gemini/Perplexity/Grok/AI Studio.