Use Puppeteer Replay to stringify

Author: nickserv

README.md

@@ -2,6 +2,23 @@
 
 Testing Library Extension for Chrome DevTools Recorder
 
+## Installation
+
+1. Clone the repo
+2. `npm install`
+3. `npm run build`
+4. Visit `chrome://extensions`
+5. Enable `Developer mode` via toggle switch in upper right corner
+6. Click `Load unpacked` button in upper left corner
+7. Select the `dist` directory
+
+## Usage
+
+1. Create a new recording via the Recorder panel.
+2. Hover over the export icon
+3. Click `Export as a Testing Library script`
+4. Save file as `{testName}.test.{ts.js}`
+
 ## Inspiration
 
-- [Puppeteer Replay example extension](https://github.com/puppeteer/replay/tree/main/examples/chrome-extension)
+- [Puppeteer Replay examples](https://github.com/puppeteer/replay/tree/main/examples)

src/index.ts

@@ -1,13 +1,13 @@
-import type { UserFlow } from "@puppeteer/replay"
+import { stringify, type UserFlow } from "@puppeteer/replay"
 
 export class RecorderPlugin {
-  async stringify(recording: UserFlow) {
-    return JSON.stringify(recording, null, 2)
+  stringify(recording: UserFlow) {
+    return stringify(recording)
   }
 }
 
 chrome.devtools.recorder.registerRecorderExtensionPlugin(
   new RecorderPlugin(),
   "Testing Library",
-  "application/json",
+  "application/javascript",
 )

webpack.config.mjs

@@ -1,6 +1,9 @@
+import webpack from "webpack"
 import CopyPlugin from "copy-webpack-plugin"
 import HtmlPlugin from "html-webpack-plugin"
 
+const { IgnorePlugin } = webpack
+
 export default {
   module: {
     rules: [
@@ -20,5 +23,8 @@ export default {
       patterns: ["manifest.json"],
     }),
     new HtmlPlugin(),
+    new IgnorePlugin({
+      resourceRegExp: /^puppeteer$/,
+    }),
   ],
 }