feat(screenshot): add WebP format support with quality parameter

Add WebP format to screenshot tool, providing superior compression
compared to JPEG. Also fixes bug where saveTemporaryFile always
saved files with .png extension regardless of format.

Author: aberemia24

docs/tool-reference.md

@@ -306,10 +306,14 @@ so returned values have to JSON-serializable.
 
 **Parameters:**
 
+<<<<<<< HEAD
 - **filePath** (string) _(optional)_: The absolute path, or a path relative to the current working directory, to save the screenshot to instead of attaching it to the response.
 - **format** (enum: "png", "jpeg") _(optional)_: Type of format to save the screenshot as. Default is "png"
+=======
+- **format** (enum: "png", "jpeg", "webp") _(optional)_: Type of format to save the screenshot as. Default is "png"
+>>>>>>> 9b0e51e (feat(screenshot): add WebP format support with quality parameter)
 - **fullPage** (boolean) _(optional)_: If set to true takes a screenshot of the full page instead of the currently visible viewport. Incompatible with uid.
-- **quality** (number) _(optional)_: Compression quality for JPEG format (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.
+- **quality** (number) _(optional)_: Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.
 - **uid** (string) _(optional)_: The uid of an element on the page from the page content snapshot. If omitted takes a pages screenshot.
 
 ---

src/McpContext.ts

@@ -340,17 +340,20 @@ export class McpContext implements Context {
 
   async saveTemporaryFile(
     data: Uint8Array<ArrayBufferLike>,
-    mimeType: 'image/png' | 'image/jpeg',
+    mimeType: 'image/png' | 'image/jpeg' | 'image/webp',
   ): Promise<{filename: string}> {
     try {
       const dir = await fs.mkdtemp(
         path.join(os.tmpdir(), 'chrome-devtools-mcp-'),
       );
-      const filename = path.join(
-        dir,
-        mimeType == 'image/png' ? `screenshot.png` : 'screenshot.jpg',
-      );
-      await fs.writeFile(path.join(dir, `screenshot.png`), data);
+      const ext =
+        mimeType === 'image/png'
+          ? 'png'
+          : mimeType === 'image/jpeg'
+            ? 'jpg'
+            : 'webp';
+      const filename = path.join(dir, `screenshot.${ext}`);
+      await fs.writeFile(filename, data);
       return {filename};
     } catch (err) {
       this.logger(err);

src/tools/ToolDefinition.ts

@@ -72,7 +72,7 @@ export type Context = Readonly<{
   setCpuThrottlingRate(rate: number): void;
   saveTemporaryFile(
     data: Uint8Array<ArrayBufferLike>,
-    mimeType: 'image/png' | 'image/jpeg',
+    mimeType: 'image/png' | 'image/jpeg' | 'image/webp',
   ): Promise<{filename: string}>;
   waitForEventsAfterAction(action: () => Promise<unknown>): Promise<void>;
 }>;

src/tools/screenshot.ts

@@ -21,7 +21,7 @@ export const screenshot = defineTool({
   },
   schema: {
     format: z
-      .enum(['png', 'jpeg'])
+      .enum(['png', 'jpeg', 'webp'])
       .default('png')
       .describe('Type of format to save the screenshot as. Default is "png"'),
     quality: z
@@ -30,7 +30,7 @@ export const screenshot = defineTool({
       .max(100)
       .optional()
       .describe(
-        'Compression quality for JPEG format (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.',
+        'Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.',
       ),
     uid: z
       .string()