chrome.devtools.recorder

Description

Use thechrome.devtools.recorder API to customize the Recorder panel in DevTools.

devtools.recorder API is a preview feature that allows you to extend theRecorder panel in Chrome DevTools.

SeeDevTools APIs summary for general introduction to using Developer Tools APIs.

Availability

Chrome 105+

Starting from Chrome 105, you can extend the export functionality. Starting from Chrome 112, you can extend the replay button.

Concepts and usage

Customizing the export feature

To register an extension plugin, use theregisterRecorderExtensionPlugin function. This function requires a plugin instance, aname and amediaType as parameters. The plugin instance must implement two methods:stringify andstringifyStep.

Thename provided by the extension shows up in theExport menu in theRecorder panel.

Depending on the export context, when the user clicks the export option provided by the extension,theRecorder panel invokes one of the two functions:

ThemediaType parameter allows the extension to specify the kind of output it generates with thestringify andstringifyStep functions. For example,application/javascript if the result is a JavaScriptprogram.

Customizing the replay button

To customize the replay button in theRecorder, use theregisterRecorderExtensionPlugin function. The plugin must implement thereplay method for the customization to take effect. If the method is detected, a replay button will appear in theRecorder. Upon clicking the button, the current recording object will be passed as the first argument to thereplay method.

At this point, the extension can display aRecorderView for handling the replay or use other extension APIs to process the replay request. To create a newRecorderView, invokechrome.devtools.recorder.createView.

Examples

Export plugin

The following code implements an extension plugin that stringifes a recording usingJSON.stringify:

classMyPlugin{stringify(recording){returnPromise.resolve(JSON.stringify(recording));}stringifyStep(step){returnPromise.resolve(JSON.stringify(step));}}chrome.devtools.recorder.registerRecorderExtensionPlugin(newMyPlugin(),/*name=*/'MyPlugin',/*mediaType=*/'application/json');

Replay plugin

The following code implements an extension plugin that creates a dummy Recorder view and displays it upon a replay request:

constview=awaitchrome.devtools.recorder.createView(/* name= */'ExtensionName',/* pagePath= */'Replay.html');letlatestRecording;view.onShown.addListener(()=>{// Recorder has shown the view. Send additional data to the view if needed.chrome.runtime.sendMessage(JSON.stringify(latestRecording));});view.onHidden.addListener(()=>{// Recorder has hidden the view.});exportclassRecorderPlugin{replay(recording){// Share the data with the view.latestRecording=recording;// Request to show the view.view.show();}}chrome.devtools.recorder.registerRecorderExtensionPlugin(newRecorderPlugin(),/* name=*/'CoffeeTest');

Finda complete extension example on GitHub.

Types

RecorderExtensionPlugin

A plugin interface that the Recorder panel invokes to customize the Recorder panel.

Properties

  • replay

    void

    Chrome 112+

    Allows the extension to implement custom replay functionality.

    Thereplay function looks like:

    (recording: object) => {...}

  • stringify

    void

    Converts a recording from the Recorder panel format into a string.

    Thestringify function looks like:

    (recording: object) => {...}

  • stringifyStep

    void

    Converts a step of the recording from the Recorder panel format into a string.

    ThestringifyStep function looks like:

    (step: object) => {...}

RecorderView

Chrome 112+

Represents a view created by extension to be embedded inside the Recorder panel.

Properties

  • onHidden

    Event<functionvoidvoid>

    Fired when the view is hidden.

    TheonHidden.addListener function looks like:

    (callback: function) => {...}

    • callback

      function

      Thecallback parameter looks like:

      () => void

  • onShown

    Event<functionvoidvoid>

    Fired when the view is shown.

    TheonShown.addListener function looks like:

    (callback: function) => {...}

    • callback

      function

      Thecallback parameter looks like:

      () => void

  • show

    void

    Indicates that the extension wants to show this view in the Recorder panel.

    Theshow function looks like:

    () => {...}

Methods

createView()

Chrome 112+
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Creates a view that can handle the replay. This view will be embedded inside the Recorder panel.

Parameters

  • title

    string

    Title that is displayed next to the extension icon in the Developer Tools toolbar.

  • pagePath

    string

    Path of the panel's HTML page relative to the extension directory.

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
): void

Registers a Recorder extension plugin.

Parameters

  • An instance implementing the RecorderExtensionPlugin interface.

  • name

    string

    The name of the plugin.

  • mediaType

    string

    The media type of the string content that the plugin produces.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-11 UTC.