chrome.devtools.recorder
- Description
Use the
chrome.devtools.recorder
API to customize the Recorder panel in DevTools. - AvailabilityChrome 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. Starting from Chrome M105, you can extend the export functionality. Starting from Chrome M112, you can extend the replay button.
Customizing 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:
stringify
that receives an entire user flow recordingstringifyStep
that receives a single recorded step
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.
Export plugin example
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'
);
Customizing the replay button
To customize the replay button in the Recorder, use the registerRecorderExtensionPlugin
function. The plugin must implement the replay
method for the customization to take effect. If the method is detected, a replay button will appear in the Recorder. Upon clicking the button, the current recording object will be passed as the first argument to the replay
method.
At this point, the extension can display a RecorderView
for handling the replay or use other extension APIs to process the replay request. To create a new RecorderView
, invoke chrome.devtools.recorder.createView
.
Replay plugin example
The following code implements an extension plugin that creates a dummy Recorder view and displays it upon a replay request:
const view = await chrome.devtools.recorder.createView(
/* name= */ 'ExtensionName',
/* pagePath= */ 'Replay.html'
);
let latestRecording;
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.
});
export class RecorderPlugin {
replay(recording) {
// Share the data with the view.
latestRecording = recording;
// Request to show the view.
view.show();
}
}
chrome.devtools.recorder.registerRecorderExtensionPlugin(
new RecorderPlugin(),
/* name=*/ 'CoffeeTest'
);
Find a complete extension example on GitHub.
Summary
- Types
- Methods
Types
RecorderExtensionPlugin
A plugin interface that the Recorder panel invokes to customize the Recorder panel.
Properties
- replay
function
Chrome 112+Allows the extension to implement custom replay functionality.
The
replay
function looks like:(recording: object) => {...}
- recording
object
A recording of the user interaction with the page. This should match Puppeteer's recording schema.
- stringify
function
Converts a recording from the Recorder panel format into a string.
The
stringify
function looks like:(recording: object) => {...}
- recording
object
A recording of the user interaction with the page. This should match Puppeteer's recording schema.
- stringifyStep
function
Converts a step of the recording from the Recorder panel format into a string.
The
stringifyStep
function looks like:(step: object) => {...}
- step
object
A step of the recording of a user interaction with the page. This should match Puppeteer's step schema.
RecorderView
Represents a view created by extension to be embedded inside the Recorder panel.
Properties
- onHidden
event
Fired when the view is hidden.
The
onHidden.addListener
function looks like:(callback: function) => {...}
- callback
function
The
callback
parameter looks like:() => void
- onShown
event
Fired when the view is shown.
The
onShown.addListener
function looks like:(callback: function) => {...}
- callback
function
The
callback
parameter looks like:() => void
- show
function
Indicates that the extension wants to show this view in the Recorder panel.
The
show
function looks like:() => {...}
Methods
createView
chrome.devtools.recorder.createView(
title:
string,
pagePath:
string,
)
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.
Returns
registerRecorderExtensionPlugin
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin:
RecorderExtensionPlugin,
name:
string,
mediaType:
string,
)
Registers a Recorder extension plugin.
Parameters
- plugin
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.