chrome.devtools.recorder

Aktualisierungsdatum: 2026-09-25 robots: noindex

Beschreibung

Verfügbarkeit

Eine allgemeine Einführung in die Verwendung von Developer Tools-APIs finden Sie unter DevTools APIs summary.

Übersicht

Die devtools.recorder API ist eine Vorabfunktion, mit der Sie den Bereich „Recorder“ in den Chrome-Entwicklertools erweitern können. Ab Chrome M105 können Sie die Exportfunktion erweitern. Ab Chrome M112 können Sie den Button zum Wiederholen erweitern.

Exportfunktion anpassen

Verwenden Sie die Funktion registerRecorderExtensionPlugin, um ein Erweiterungs-Plug-in zu registrieren. Für diese Funktion sind eine Plug-in-Instanz, ein name und ein mediaType als Parameter erforderlich. Die Plug-in-Instanz muss zwei Methoden implementieren: stringify und stringifyStep.

Die von der Erweiterung bereitgestellte name wird im Menü Exportieren im Bereich Recorder angezeigt.

Wenn der Nutzer je nach Exportkontext auf die von der Erweiterung bereitgestellte Exportoption klickt, wird im Bereich Recorder eine der beiden Funktionen aufgerufen:

• stringify, die eine Aufzeichnung des gesamten User Flows erhält
• stringifyStep, das einen einzelnen aufgezeichneten Schritt empfängt

Mit dem Parameter mediaType kann die Erweiterung die Art der Ausgabe angeben, die sie mit den Funktionen stringify und stringifyStep generiert. Beispiel: application/javascript, wenn das Ergebnis ein JavaScript-Programm ist.

Beispiel für ein Export-Plug‑in

Im folgenden Code wird ein Erweiterungs-Plug-in implementiert, das eine Aufzeichnung mit JSON.stringify in einen String umwandelt:

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

Schaltfläche „Noch einmal abspielen“ anpassen

Wenn Sie die Schaltfläche „Wiederholen“ im Rekorder anpassen möchten, verwenden Sie die Funktion registerRecorderExtensionPlugin. Das Plug-in muss die Methode replay implementieren, damit die Anpassung wirksam wird. Wenn die Methode erkannt wird, wird im Recorder ein Wiedergabebutton angezeigt. Wenn Sie auf den Button klicken, wird das aktuelle Aufzeichnungsobjekt als erstes Argument an die Methode replay übergeben.

An dieser Stelle kann die Erweiterung ein RecorderView anzeigen, um die Wiedergabe zu verarbeiten, oder andere Erweiterungs-APIs verwenden, um die Wiedergabeanfrage zu verarbeiten. Wenn Sie eine neue RecorderView erstellen möchten, rufen Sie chrome.devtools.recorder.createView auf.

Beispiel für ein Replay-Plug-in

Der folgende Code implementiert ein Erweiterungs-Plug-in, das eine Dummy-Recorder-Ansicht erstellt und sie bei einer Wiedergabeanfrage anzeigt:

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

Ein vollständiges Beispiel für eine Erweiterung finden Sie auf GitHub.

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

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