Welcome What's new in Chrome extensions API reference Samples
Welcome What's new in Chrome extensions API reference Samples

chrome.devtools.recorder

  • Description

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

  • Availability
    Chrome 105+

See DevTools APIs summary for general introduction to using Developer Tools APIs.

Overview

devtools.recorder API is a preview feature that allows you to extend the Recorder panel in Chrome DevTools. Currently, you can extend only the export feature.

To register an extension plugin, use the registerRecorderExtensionPlugin function. This function requires a plugin instance, a name and a mediaType as parameters. The plugin instance must implement two methods: stringify and stringifyStep.

The name provided by the extension shows up in the Export menu in the Recorder panel.

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

The mediaType parameter allows the extension to specify the kind of output it generates with the stringify and stringifyStep functions. For example, application/javascript if the result is a JavaScript program.

Examples

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

class MyPlugin {
stringify(recording) {
return Promise.resolve(JSON.stringify(recording));
}
stringifyStep(step) {
return Promise.resolve(JSON.stringify(step));
}
}

chrome.devtools.recorder.registerRecorderExtensionPlugin(
new MyPlugin(),
/*name=*/'MyPlugin',
/*mediaType=*/'application/json'
);

Summary

Types

RecorderExtensionPlugin

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

Properties

  • stringify

    function

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

    The stringify function looks like: (recording: object) => {...}

  • stringifyStep

    function

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

    The stringifyStep function looks like: (step: object) => {...}

Methods

registerRecorderExtensionPlugin

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

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.

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.