diff --git a/packages/devtools_extensions/example/foo_devtools_extension/.gitignore b/packages/devtools_extensions/example/foo_devtools_extension/.gitignore
new file mode 100644
index 00000000000..24476c5d1eb
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/.gitignore
@@ -0,0 +1,44 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/README.md b/packages/devtools_extensions/example/foo_devtools_extension/README.md
new file mode 100644
index 00000000000..2316014f6e6
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/README.md
@@ -0,0 +1,6 @@
+# foo_devtools_extension
+
+An example DevTools extension for `package:foo`. This flutter_web app `foo_devtools_extension`
+would be embedded inside DevTools when debugging an app that imports `package:foo`. The extension
+needs to be provided by `package:foo` as set forth by the requirements documented at
+DevTools Extensions (TODO(kenz) - write these and add a link).
\ No newline at end of file
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/lib/main.dart b/packages/devtools_extensions/example/foo_devtools_extension/lib/main.dart
new file mode 100644
index 00000000000..ccf7e6b2ffe
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/lib/main.dart
@@ -0,0 +1,85 @@
+import 'package:devtools_extensions/api.dart';
+import 'package:devtools_extensions/devtools_extensions.dart';
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const FooPackageDevToolsExtension());
+}
+
+class FooPackageDevToolsExtension extends StatelessWidget {
+  const FooPackageDevToolsExtension({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      title: 'Foo DevTools Extension',
+      home: DevToolsExtension(
+        child: FooExtensionHomePage(),
+      ),
+    );
+  }
+}
+
+class FooExtensionHomePage extends StatefulWidget {
+  const FooExtensionHomePage({super.key});
+
+  @override
+  State<FooExtensionHomePage> createState() => _FooExtensionHomePageState();
+}
+
+class _FooExtensionHomePageState extends State<FooExtensionHomePage> {
+  int _counter = 0;
+
+  String? _message;
+
+  @override
+  void initState() {
+    super.initState();
+    // Example of the devtools extension registering a custom handler.
+    extensionManager.registerEventHandler(
+      DevToolsExtensionEventType.unknown,
+      (event) {
+        setState(() {
+          _message = event.data?['message'] as String?;
+        });
+      },
+    );
+  }
+
+  void _incrementCounter() {
+    setState(() {
+      _counter++;
+    });
+    extensionManager.postMessageToDevTools(
+      DevToolsExtensionEvent(
+        DevToolsExtensionEventType.unknown,
+        data: {'increment_count': _counter},
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('Foo DevTools Extension'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text('You have pushed the button $_counter times:'),
+            const SizedBox(height: 16.0),
+            ElevatedButton(
+              onPressed: _incrementCounter,
+              child: const Text('Increment and post count to DevTools'),
+            ),
+            const SizedBox(height: 48.0),
+            Text('Received message from DevTools: $_message'),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/pubspec.yaml b/packages/devtools_extensions/example/foo_devtools_extension/pubspec.yaml
new file mode 100644
index 00000000000..52688f9dc7c
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/pubspec.yaml
@@ -0,0 +1,14 @@
+name: foo_devtools_extension
+description: A Flutter web app for the package:foo DevTools extension.
+publish_to: 'none'
+
+version: 1.0.0
+
+environment:
+  sdk: '>=3.1.0-94.0.dev <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+  devtools_extensions:
+    path: ../../
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/favicon.png b/packages/devtools_extensions/example/foo_devtools_extension/web/favicon.png
new file mode 100644
index 00000000000..8aaa46ac1ae
Binary files /dev/null and b/packages/devtools_extensions/example/foo_devtools_extension/web/favicon.png differ
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-192.png b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-192.png
new file mode 100644
index 00000000000..b749bfef074
Binary files /dev/null and b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-192.png differ
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-512.png b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-512.png
new file mode 100644
index 00000000000..88cfd48dff1
Binary files /dev/null and b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-512.png differ
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-192.png b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-192.png
new file mode 100644
index 00000000000..eb9b4d76e52
Binary files /dev/null and b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-192.png differ
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-512.png b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-512.png
new file mode 100644
index 00000000000..d69c56691fb
Binary files /dev/null and b/packages/devtools_extensions/example/foo_devtools_extension/web/icons/Icon-maskable-512.png differ
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/index.html b/packages/devtools_extensions/example/foo_devtools_extension/web/index.html
new file mode 100644
index 00000000000..81028bbff18
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/web/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content=""A new Flutter project."">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="foo_devtools_extension">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>foo_devtools_extension</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    const serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: function(engineInitializer) {
+          engineInitializer.initializeEngine().then(function(appRunner) {
+            appRunner.runApp();
+          });
+        }
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/packages/devtools_extensions/example/foo_devtools_extension/web/manifest.json b/packages/devtools_extensions/example/foo_devtools_extension/web/manifest.json
new file mode 100644
index 00000000000..26d0e86df75
--- /dev/null
+++ b/packages/devtools_extensions/example/foo_devtools_extension/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "foo_devtools_extension",
+    "short_name": "foo_devtools_extension",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A Flutter web app for the package:foo DevTools extension",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}