chrome.devtools.recorder

Beschreibung

Verfügbarkeit

Eine allgemeine Einführung zur Verwendung der Entwicklertools-APIs finden Sie in der Zusammenfassung der Entwicklertools.

Übersicht

Die devtools.recorder API ist eine Vorschaufunktion, mit der du den Rekorder-Bereich in den Chrome-Entwicklertools erweitern kannst. Ab Chrome M105 können Sie die Exportfunktion erweitern. Ab Chrome M112 können Sie die Wiedergabeschaltfläche verlängern.

Exportfunktion anpassen

Zum Registrieren eines Erweiterungs-Plug-ins verwenden Sie die Funktion registerRecorderExtensionPlugin. Für diese Funktion sind eine Plug-in-Instanz, name und mediaType als Parameter erforderlich. Die Plug-in-Instanz muss zwei Methoden implementieren: stringify und stringifyStep.

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

Wenn der Nutzer auf die Exportoption der Erweiterung klickt, ruft der Bereich Rekorder eine der beiden Funktionen auf:

• stringify, die eine gesamte User Flow-Aufzeichnung empfängt
• stringifyStep, der einen einzelnen aufgezeichneten Schritt erhält

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

Beispiel für Export-Plug-in

Mit dem folgenden Code wird ein Erweiterungs-Plug-in implementiert, das eine Aufnahme mit JSON.stringify als String festlegt:

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

Wiedergabeschaltfläche anpassen

Verwenden Sie die registerRecorderExtensionPlugin-Funktion, um die Schaltfläche für die erneute Wiedergabe im Rekorder anzupassen. Das Plug-in muss die Methode replay implementieren, damit die Anpassung wirksam wird. Wenn die Methode erkannt wird, erscheint im Rekorder eine Schaltfläche zur erneuten Wiedergabe. Beim Klicken auf die Schaltfläche wird das aktuelle Aufzeichnungsobjekt als erstes Argument an die Methode replay übergeben.

An dieser Stelle kann die Erweiterung ein RecorderView für die Verarbeitung der Wiedergabe anzeigen oder andere Erweiterungs-APIs verwenden, um die Wiedergabeanfrage zu verarbeiten. Rufen Sie chrome.devtools.recorder.createView auf, um eine neue RecorderView zu erstellen.

Beispiel für das Replay-Plug-in

Mit dem folgenden Code wird ein Erweiterungs-Plug-in implementiert, das eine Rekorder-Dummy-Ansicht erstellt und bei einer Wiederholungsanfrage 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