[Website] Expose front-page thumbnail capture through PlaygroundClient

[adamziel]

Adds captureSiteThumbnail() to PlaygroundClient:

const thumbnail = await client.captureSiteThumbnail();
const src = `data:${thumbnail.mime};base64,${thumbnail.data}`;

The method loads / in a disposable 1024×768 iframe and returns a 320×240 WebP image. It falls back to JPEG when WebP encoding is unavailable. The caller owns the result; this PR does not save it or change the Saved Playgrounds UI.

The renderer uses modern-screenshot's domToCanvas(). It clones document.documentElement, embeds its styles and resources in an SVG <foreignObject>, draws that SVG onto a scaled canvas, and encodes the canvas with toBlob().

Why capture runs in WordPress

The remote frame cannot always read the WordPress DOM. For example, a site may send Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin. Playground then uses Document-Isolation-Policy, which blocks synchronous DOM access from the remote frame even though both frames share an origin.

The MU plugin therefore receives the request from the trusted parent and lazy-loads the renderer inside the front page. It checks the source window, origin, and renderer URL. The remote frame accepts only the response with the matching request ID. Normal page loads do not download modern-screenshot.

The disposable page has a 20-second load watchdog. Once it loads, rendering has a 3-second deadline. DOM cloning and canvas rendering stay in the document, with periodic task yields. A resource worker handles supported fetches. Every result or failure removes the iframe and its listeners.

The service worker serves the marked renderer and resource worker as app assets. Without that exception, its scoped-referrer handling would redirect both requests into WordPress's virtual URL namespace, which returns a 404.

This is the first slice split from #4133. Nothing calls the API automatically yet, and this PR does not write OPFS metadata.

Testing

Open a Playground and run const thumbnail = await playground.captureSiteThumbnail() in the browser console. Turn the result into a data URL, open it, and confirm it shows the front page as a 320×240 image. Repeat in Chrome, Firefox, and Safari.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a new captureSiteThumbnail() API to PlaygroundClient that captures a site’s front page thumbnail by delegating DOM rendering to the WordPress iframe (to work under Document-Isolation-Policy), and wires up the service worker + MU plugin messaging bridge to load a dedicated renderer module on demand.

Changes:

• Add captureSiteThumbnail() and SiteThumbnail type to the remote/client public API surface.
• Implement a cross-frame capture flow via a disposable iframe + MU plugin message handler + dynamic import of a renderer module.
• Add a Playwright E2E test and service-worker routing exceptions to serve the renderer + worker assets correctly from scoped WordPress pages.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/playground/website/playwright/e2e/client.spec.ts	Adds an E2E test that exercises the new thumbnail API and validates output dimensions.
packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php	Adds a trusted-parent message handler inside WordPress to dynamically import and run the thumbnail renderer.
packages/playground/remote/src/lib/playground-client.ts	Exposes captureSiteThumbnail() and the SiteThumbnail type on the client interface.
packages/playground/remote/src/lib/capture-site-thumbnail.ts	Implements the in-WordPress renderer using modern-screenshot and async yielding + encoding.
packages/playground/remote/src/lib/boot-playground-remote.ts	Implements the “disposable iframe” orchestration and adds the new method to the remote API.
packages/playground/remote/service-worker.ts	Ensures renderer/worker asset URLs are treated as app assets even when requested from scoped WordPress pages.
packages/playground/client/src/index.ts	Re-exports the SiteThumbnail type from @wp-playground/remote.
package.json	Adds the modern-screenshot dependency used by the renderer.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.