Add WordPress Playground DevTools browser extension (#3056)

## Summary

This PR adds a new Chrome extension that provides a DevTools panel for
inspecting and editing WordPress Playground instances running on any
webpage.

- Detects all frames where `window.playground` is defined
- Automatically refreshes the list every second to catch dynamically
added instances
- Auto-selects if there's only one playground instance on the page
- Provides a file browser and code editor for browsing and editing files
in the Playground filesystem

The extension uses Manifest V3 with `chrome.scripting.executeScript`
using `world: 'MAIN'` to bypass CSP restrictions when detecting
playground instances. It creates a filesystem proxy over Chrome
extension messaging to call PHP methods on the detected playground
instance.

This PR also extracts common editor components (CodeEditor,
FileExplorerSidebar, SiteEditor) to the shared
`@wp-playground/components` package for reuse between the website and
the extension.

<img width="3150" height="2646" alt="CleanShot 2025-12-16 at 23 27
23@2x"
src="https://github.com/user-attachments/assets/b28994e9-9e8f-4260-ada1-63f09d74fa77"
/>

## Follow-up work

* Publish the extension
* Make it easy to learn about and install
* Consider also bundling adminer for database management

## Test plan

- [ ] Build the extension with `npx nx build
playground-devtools-extension`
- [ ] Load the extension in Chrome from
`dist/packages/playground/devtools-extension`
- [ ] Open a page with WordPress Playground (e.g.,
playground.wordpress.net)
- [ ] Open DevTools and verify the "Playground" tab appears
- [ ] Verify that the file browser shows the WordPress filesystem
- [ ] Test file editing and verify changes are saved

Author: adamziel

package-lock.json

@@ -58,8 +58,9 @@ export async function loadWebRuntime(
 	 * https://github.com/emscripten-core/emscripten/blob/6d61ffd7076309cb08af37aba496f25c23cdb5a4/src/lib/libeventloop.js#L57
 	 */
 	if (!('setImmediate' in globalThis)) {
-		(globalThis as PHPWorkerGlobalScope).setImmediate = (fn: () => void) =>
-			setTimeout(fn, 0);
+		(globalThis as unknown as PHPWorkerGlobalScope).setImmediate = (
+			fn: () => void
+		) => setTimeout(fn, 0);
 	}
 
 	let emscriptenOptions: EmscriptenOptions | Promise<EmscriptenOptions> = {

packages/php-wasm/web/src/lib/load-runtime.ts

@@ -25,5 +25,19 @@
 	"engines": {
 		"node": ">=20.18.3",
 		"npm": ">=10.1.0"
+	},
+	"peerDependencies": {
+		"@codemirror/autocomplete": "^6.18.6",
+		"@codemirror/commands": "^6.8.0",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.9",
+		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lang-markdown": "^6.3.2",
+		"@codemirror/lang-php": "^6.0.1",
+		"@codemirror/language": "^6.11.0",
+		"@codemirror/search": "^6.5.10",
+		"@codemirror/state": "^6.5.2",
+		"@codemirror/view": "^6.36.2"
 	}
 }

packages/playground/components/package.json

@@ -1,4 +1,4 @@
-import {
+import React, {
 	forwardRef,
 	useEffect,
 	useImperativeHandle,

…anager/site-file-browser/code-editor.tsx …src/PlaygroundFileEditor/code-editor.tsxpackages/playground/website/src/components/site-manager/site-file-browser/code-editor.tsx renamed to packages/playground/components/src/PlaygroundFileEditor/code-editor.tsx packages/playground/website/src/components/site-manager/site-file-browser/code-editor.tsx renamed to packages/playground/components/src/PlaygroundFileEditor/code-editor.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
 	useMemo,
 	useRef,
 	useState,
@@ -16,48 +16,13 @@ import type { AsyncWritableFilesystem } from '@wp-playground/storage';
 import { logger } from '@php-wasm/logger';
 import { dirname, normalizePath } from '@php-wasm/util';
 import { BinaryFilePreview } from '@wp-playground/components';
-import mimeTypes from '@php-wasm/universal/mime-types';
-
-export const MAX_INLINE_FILE_BYTES = 1024 * 1024; // 1MB
-
-const seemsLikeBinary = (buffer: Uint8Array) => {
-	// Assume that anything with a null byte in the first 4096 bytes is binary.
-	// This isn't a perfect test, but it catches a lot of binary files.
-	const len = buffer.byteLength;
-	for (let i = 0; i < Math.min(len, 4096); i++) {
-		if (buffer[i] === 0) {
-			return true;
-		}
-	}
-
-	// Next, try to decode the buffer as UTF-8. If it fails, it's probably binary.
-	try {
-		new TextDecoder('utf-8', { fatal: true }).decode(buffer);
-		return false;
-	} catch {
-		return true;
-	}
-};
-
-const createDownloadUrl = (data: Uint8Array, filename: string) => {
-	const blob = new Blob([data]);
-	const url = URL.createObjectURL(blob);
-	setTimeout(() => URL.revokeObjectURL(url), 60_000);
-	return { url, filename };
-};
-
-const getMimeType = (filename: string): string => {
-	const extension = filename.split('.').pop() as keyof typeof mimeTypes;
-	return mimeTypes[extension] || mimeTypes['_default'];
-};
-
-const isPreviewableBinary = (mimeType: string): boolean => {
-	return (
-		mimeType.startsWith('image/') ||
-		mimeType.startsWith('video/') ||
-		mimeType.startsWith('audio/')
-	);
-};
+import {
+	MAX_INLINE_FILE_BYTES,
+	seemsLikeBinary,
+	createDownloadUrl,
+	getMimeType,
+	isPreviewableBinary,
+} from './file-utils';
 
 export type FileExplorerSidebarProps = {
 	filesystem: AsyncWritableFilesystem;
@@ -178,12 +143,12 @@ export function FileExplorerSidebar({
 	};
 
 	return (
-		<div className={styles.fileExplorerContainer}>
-			<div className={styles.fileExplorerHeader}>
-				<span className={styles.fileExplorerTitle}>Files</span>
-				<div className={styles.fileExplorerActions}>
+		<div className={styles['fileExplorerContainer']}>
+			<div className={styles['fileExplorerHeader']}>
+				<span className={styles['fileExplorerTitle']}>Files</span>
+				<div className={styles['fileExplorerActions']}>
 					<button
-						className={styles.fileExplorerButton}
+						className={styles['fileExplorerButton']}
 						type="button"
 						onClick={() => {
 							if (!treeRef.current) {
@@ -199,7 +164,7 @@ export function FileExplorerSidebar({
 						New File
 					</button>
 					<button
-						className={styles.fileExplorerButton}
+						className={styles['fileExplorerButton']}
 						type="button"
 						onClick={() => {
 							if (!treeRef.current) {
@@ -216,7 +181,7 @@ export function FileExplorerSidebar({
 					</button>
 				</div>
 			</div>
-			<div className={styles.fileExplorerTree}>
+			<div className={styles['fileExplorerTree']}>
 				<FilePickerTree
 					ref={treeRef}
 					filesystem={filesystem}