🤖 Merge PR DefinitelyTyped#72261 [Chrome] add devtools.recorder namespace by @erwanjugand

Author: erwanjugand

types/chrome/index.d.ts

@@ -3071,6 +3071,71 @@ declare namespace chrome {
         export var themeName: "default" | "dark";
     }
 
+    ////////////////////
+    // Dev Tools - Recorder
+    ////////////////////
+    /**
+     * Use the `chrome.devtools.recorder` API to customize the Recorder panel in DevTools.
+     * @since Chrome 105
+     */
+    export namespace devtools.recorder {
+        /** A plugin interface that the Recorder panel invokes to customize the Recorder panel. */
+        export interface RecorderExtensionPlugin {
+            /**
+             * Allows the extension to implement custom replay functionality.
+             *
+             * @param recording A recording of the user interaction with the page. This should match [Puppeteer's recording schema](https://github.com/puppeteer/replay/blob/main/docs/api/interfaces/Schema.UserFlow.md).
+             * @since Chrome 112
+             */
+            replay?(recording: object): void;
+
+            /**
+             * Converts a recording from the Recorder panel format into a string.
+             * @param recording A recording of the user interaction with the page. This should match [Puppeteer's recording schema](https://github.com/puppeteer/replay/blob/main/docs/api/interfaces/Schema.UserFlow.md).
+             */
+            stringify?(recording: object): void;
+
+            /**
+             * Converts a step of the recording from the Recorder panel format into a string.
+             * @param step A step of the recording of a user interaction with the page. This should match [Puppeteer's step schema](https://github.com/puppeteer/replay/blob/main/docs/api/modules/Schema.md#step).
+             */
+            stringifyStep?(step: object): void;
+        }
+
+        /**
+         * Represents a view created by extension to be embedded inside the Recorder panel.
+         * @since Chrome 112
+         */
+        export interface RecorderView {
+            /** Fired when the view is hidden. */
+            onHidden: events.Event<() => void>;
+            /** Fired when the view is shown. */
+            onShown: events.Event<() => void>;
+            /** Indicates that the extension wants to show this view in the Recorder panel. */
+            show(): void;
+        }
+
+        /**
+         * Creates a view that can handle the replay. This view will be embedded inside the Recorder panel.
+         * @param title Title that is displayed next to the extension icon in the Developer Tools toolbar.
+         * @param pagePath Path of the panel's HTML page relative to the extension directory.
+         * @since Chrome 112
+         */
+        export function createView(title: string, pagePath: string): RecorderView;
+
+        /**
+         * Registers a Recorder extension plugin.
+         * @param plugin An instance implementing the RecorderExtensionPlugin interface.
+         * @param name The name of the plugin.
+         * @param mediaType The media type of the string content that the plugin produces.
+         */
+        export function registerRecorderExtensionPlugin(
+            plugin: RecorderExtensionPlugin,
+            name: string,
+            mediaType: string,
+        ): void;
+    }
+
     ////////////////////
     // Document Scan
     ////////////////////

types/chrome/test/index.ts

@@ -1314,25 +1314,25 @@ function testRuntimeOnMessageAddListener() {
     });
 }
 
-chrome.devtools.network.onRequestFinished.addListener((request: chrome.devtools.network.Request) => {
-    request; // $ExpectType Request
-    console.log("request: ", request);
-});
+function testDevtools() {
+    chrome.devtools.network.onRequestFinished.addListener((request: chrome.devtools.network.Request) => {
+        request; // $ExpectType Request
+        console.log("request: ", request);
+    });
 
-chrome.devtools.performance.onProfilingStarted.addListener(() => {
-    console.log("Profiling started");
-});
+    chrome.devtools.performance.onProfilingStarted.addListener(() => {
+        console.log("Profiling started");
+    });
 
-chrome.devtools.performance.onProfilingStopped.addListener(() => {
-    console.log("Profiling stopped");
-});
+    chrome.devtools.performance.onProfilingStopped.addListener(() => {
+        console.log("Profiling stopped");
+    });
 
-chrome.devtools.network.getHAR((harLog: chrome.devtools.network.HARLog) => {
-    harLog; // $ExpectType HARLog
-    console.log("harLog: ", harLog);
-});
+    chrome.devtools.network.getHAR((harLog: chrome.devtools.network.HARLog) => {
+        harLog; // $ExpectType HARLog
+        console.log("harLog: ", harLog);
+    });
 
-function testDevtools() {
     chrome.devtools.inspectedWindow.eval("1+1", undefined, result => {
         console.log(result);
     });
@@ -1344,6 +1344,25 @@ function testDevtools() {
         ignoreCache: true,
         injectedScript: "console.log(\"Hello World!\")",
     });
+
+    const view = chrome.devtools.recorder.createView("title", "replay.html"); // $ExpectType RecorderView
+    view.onHidden.addListener(() => {}); // $ExpectType void
+    view.onHidden.removeListener(() => {}); // $ExpectType void
+    view.onHidden.hasListener(() => {}); // $ExpectType boolean
+    view.onHidden.hasListeners(); // $ExpectType boolean
+    view.onShown.addListener(() => {}); // $ExpectType void
+    view.onShown.removeListener(() => {}); // $ExpectType void
+    view.onShown.hasListener(() => {}); // $ExpectType boolean
+    view.onShown.hasListeners(); // $ExpectType boolean
+    view.show(); // $ExpectType void
+
+    const plugin: chrome.devtools.recorder.RecorderExtensionPlugin = {
+        replay: () => {},
+        stringify: () => {},
+        stringifyStep: () => {},
+    };
+    chrome.devtools.recorder.registerRecorderExtensionPlugin({}, "MyPlugin", "application/json"); // $ExpectType void
+    chrome.devtools.recorder.registerRecorderExtensionPlugin(plugin, "MyPlugin", "application/json"); // $ExpectType void
 }
 
 function testAssistiveWindow() {