feat(screenshot): add WebP format support with quality parameter #220
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds WebP format support to the screenshot tool, providing superior compression compared to JPEG while maintaining image quality.
Problem
Currently, the Chrome DevTools MCP only supports PNG and JPEG formats for screenshots. This leads to:
saveTemporaryFile
always saved files with.png
extension regardless of the specified formatSolution
Added WebP as a supported format in the screenshot tool schema and extended the quality parameter to work with WebP (0-100 range, same as JPEG). Also fixed the file extension bug in
saveTemporaryFile
.Changes
webp
to screenshot format enum alongsidepng
andjpeg
saveTemporaryFile
to properly handle WebP MIME type and file extension.png
regardless of formatToolDefinition.ts
for WebP supportnpm run docs
Testing
Puppeteer 24.22.3 (used by this project) has full WebP support including quality parameter. Expected compression improvements based on WebP benchmarks:
All existing tests pass (131/131).
Impact
This change is backward compatible - WebP is an optional format that doesn't affect existing PNG/JPEG usage. It particularly helps with:
Example Usage
Checklist
npm run docs
Fixes #[issue-number] (if applicable)