Skip to content

Commit 7db3bf1

Browse files
semikolonclaude
andcommitted
feat: add CSS selector filtering and image resizing for token optimization
Phase 2 of token optimization implementation: Snapshot CSS selector filtering: - Added `selector` parameter to take_snapshot tool - Filters snapshot to only include subtree matching CSS selector - Uses CDP DOM.describeNode to map elements to accessibility nodes - Falls back to full snapshot with warning if selector doesn't match Screenshot image resizing: - Added `maxWidth` and `maxHeight` parameters to take_screenshot - Images resized maintaining aspect ratio using sharp library - Logs compression ratio when resizing occurs - Added sharp as production dependency Code changes: - src/utils/image-processor.ts: New utility for image processing - src/McpResponse.ts: Added #filterSnapshotBySelector private method - src/tools/screenshot.ts: Integrated image resizing - src/tools/snapshot.ts: Added selector parameter - src/tools/ToolDefinition.ts: Extended SnapshotParams with selector Documentation: - Updated README with full token optimization documentation - Added parameter reference table for all optimization options Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 4950312 commit 7db3bf1

8 files changed

Lines changed: 879 additions & 25 deletions

File tree

README.md

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ Chrome DevTools for reliable automation, in-depth debugging, and performance ana
2020
[puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in
2121
Chrome and automatically wait for action results.
2222
- **Token-efficient responses** (fork enhancement): Minimize token usage with
23-
snapshot truncation via `maxLength` parameter. Inspired by
23+
snapshot truncation (`maxLength`), CSS selector filtering (`selector`), and
24+
image resizing (`maxWidth`/`maxHeight`). Inspired by
2425
[fast-playwright-mcp](https://github.com/nicobailon/fast-playwright-mcp).
2526

2627
## Disclaimers
@@ -329,25 +330,45 @@ Your MCP client should open the browser and record a performance trace.
329330

330331
This fork includes token optimization features inspired by [fast-playwright-mcp](https://github.com/nicobailon/fast-playwright-mcp).
331332

332-
### Snapshot Truncation
333+
### Snapshot Optimization
333334

334-
Use the `maxLength` parameter with `take_snapshot` to limit output size:
335+
Use the following parameters with `take_snapshot` to reduce token usage:
335336

337+
**Truncation** - Limit output to a maximum number of characters:
336338
```
337339
Take a snapshot with maxLength of 5000 characters
338340
```
339341

340-
The snapshot will be truncated with a notice if it exceeds the limit. This is useful for large pages where you only need a summary.
342+
**CSS Selector Filtering** - Focus on a specific part of the page:
343+
```
344+
Take a snapshot with selector "#main-content"
345+
```
346+
347+
The `selector` parameter limits the snapshot to only the subtree rooted at the matching element. This dramatically reduces output size when you only need to inspect a specific component.
348+
349+
### Screenshot Optimization
350+
351+
Use `maxWidth` and `maxHeight` with `take_screenshot` to resize images:
352+
353+
```
354+
Take a screenshot with maxWidth 800 and maxHeight 600
355+
```
341356

342-
### Future Enhancements
357+
Images are resized maintaining aspect ratio (using sharp library). This reduces the base64 payload size significantly, saving tokens when including screenshots in context.
343358

344-
The infrastructure for more token optimization features is in place:
359+
### Additional Parameters
345360

346-
- **expectation schema**: Control which content to include in responses (snapshot, console, network, tabs)
347-
- **snapshotOptions**: Limit snapshot scope by CSS selector or max length
348-
- **imageOptions**: Control screenshot format, quality, and dimensions
361+
| Tool | Parameter | Description |
362+
|------|-----------|-------------|
363+
| `take_snapshot` | `maxLength` | Maximum characters (truncates with notice) |
364+
| `take_snapshot` | `selector` | CSS selector to limit scope |
365+
| `take_snapshot` | `verbose` | Include all a11y tree info (default: false) |
366+
| `take_screenshot` | `maxWidth` | Maximum width in pixels |
367+
| `take_screenshot` | `maxHeight` | Maximum height in pixels |
368+
| `take_screenshot` | `quality` | JPEG/WebP quality 0-100 |
369+
| `take_screenshot` | `format` | png, jpeg, or webp |
349370

350-
See `src/expectation.ts` for the full schema and tool defaults.
371+
See `src/expectation.ts` for the full expectation schema and tool defaults.
351372

352373
## Tools
353374

0 commit comments

Comments
 (0)