Add initial extension from example

Author: nickserv

DevToolsPlugin.html

@@ -0,0 +1 @@
+<script type="module" src="./DevToolsPlugin.js"></script>

DevToolsPlugin.js

@@ -0,0 +1,15 @@
+export class RecorderPlugin {
+  async stringify(recording) {
+    return JSON.stringify(recording, null, 2);
+  }
+  async stringifyStep(step) {
+    return JSON.stringify(step, null, 2);
+  }
+}
+
+/* eslint-disable no-undef */
+chrome.devtools.recorder.registerRecorderExtensionPlugin(
+  new RecorderPlugin(),
+  /* name=*/ 'Custom JSON',
+  /* mediaType=*/ 'application/json'
+);

README.md

@@ -1,2 +1,5 @@
 # testing-library-recorder-extension
 Testing Library Extension for Chrome DevTools Recorder
+
+## Inspiration
+- [Puppeteer Replay example extension](https://github.com/puppeteer/replay/tree/main/examples/chrome-extension)

manifest.json

@@ -1,6 +1,12 @@
 {
-  "name": "Getting Started Example",
-  "description": "Build an Extension!",
-  "version": "1.0",
-  "manifest_version": 3
+  "manifest_version": 3,
+  "version": "0.1.0",
+  "name": "CustomJSONExtension",
+  "description": "DevTools extensions showing how to extend the Recorder panel.",
+  "permissions": [],
+  "devtools_page": "DevToolsPlugin.html",
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "minimum_chrome_version": "104.0.5107.0"
 }