Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.chrome.com/docs/extensions/reference/api/devtools/recorder below:

chrome.devtools.recorder | API | Chrome for Developers

Stay organized with collections Save and categorize content based on your preferences.

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

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

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

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 recording
• stringifyStep 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.

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.

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'
);

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.

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

• Allows the extension to implement custom replay functionality.

  The replay function looks like:

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

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

  The stringify function looks like:

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

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

  The stringifyStep function looks like:

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

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

• onHidden

  Event<functionvoidvoid>

  Fired when the view is hidden.

  The onHidden.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

• onShown

  Event<functionvoidvoid>

  Fired when the view is shown.

  The onShown.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

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

  The show function looks like:

  () => {...}

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.

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

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

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

Registers a Recorder extension plugin.

• An instance implementing the RecorderExtensionPlugin interface.

• The name of the plugin.

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

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

Last updated 2025-08-11 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-11 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4