browser.devtools.recorder

Beschreibung

Die devtools.recorder API ist eine Vorabfunktion, mit der Sie den Bereich „Recorder“ in den Chrome-Entwicklertools erweitern können.

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

Verfügbarkeit

Konzepte und Nutzung

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, die 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.

Wiedergabeschaltfläche 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 diesem Punkt kann die Erweiterung ein RecorderView anzeigen, um die Wiedergabe zu verarbeiten, oder andere Erweiterungs-APIs verwenden, um die Wiedergabeanfrage zu verarbeiten. Rufen Sie browser.devtools.recorder.createView auf, um eine neue RecorderView zu erstellen.

Beispiele

Export-Plug-in

Der folgende Code implementiert ein Erweiterungs-Plug-in, 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));
  }
}

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

Plug-in „Nochmal abspielen“

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

const view = await browser.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.
  browser.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();
  }
}

browser.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