chrome.devtools.recorder

Beschreibung

Mit der chrome.devtools.recorder API können Sie das Recorder-Panel in den Entwicklertools anpassen.

devtools.recorder API ist eine Funktion in der Vorabversion, mit der Sie das Recorder-Panel in den Chrome-Entwicklertools erweitern können.

Eine allgemeine Einführung in die Verwendung von APIs für Entwicklertools finden Sie unter Übersicht über APIs für Entwicklertools.

Verfügbarkeit

Chrome 105+

Konzepte und Verwendung

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.

Der von der Erweiterung angegebene name wird im Menü Exportieren im Panel Recorder angezeigt.

Je nach Exportkontext ruft das Panel Recorder eine der beiden Funktionen auf, wenn der Nutzer auf die von der Erweiterung bereitgestellte Exportoption klickt:

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

Schaltfläche „Nochmal“ anpassen

Verwenden Sie die Funktion registerRecorderExtensionPlugin, um die Schaltfläche „Nochmal“ im Recorder anzupassen. Das Plug-in muss die Methode replay implementieren, damit die Anpassung wirksam wird. Wenn die Methode erkannt wird, wird im Recorder eine Schaltfläche „Nochmal“ angezeigt. Wenn Sie auf die Schaltfläche klicken, wird das aktuelle Aufzeichnungsobjekt als erstes Argument an die Methode replay übergeben.

An dieser Stelle kann die Erweiterung eine RecorderView zur 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.

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

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

Plug-in für die Wiedergabe

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 Erweiterungsbeispiel finden Sie auf GitHub.

Typen

RecorderExtensionPlugin

Eine Plug-in-Schnittstelle, die vom Recorder-Panel aufgerufen wird, um das Recorder-Panel anzupassen.

Properties

  • Nochmal

    void

    Chrome 112+

    Ermöglicht der Erweiterung, eine benutzerdefinierte Wiedergabefunktion zu implementieren.

    Die Funktion replay sieht so aus: 

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

    • nimmst

      Objekt

      Eine Aufzeichnung der Nutzerinteraktion mit der Seite. Dies sollte dem Aufzeichnungsschema von Puppeteer entsprechen.

  • stringify

    void

    Konvertiert eine Aufzeichnung aus dem Recorder-Panel-Format in einen String.

    Die Funktion stringify sieht so aus: 

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

    • nimmst

      Objekt

      Eine Aufzeichnung der Nutzerinteraktion mit der Seite. Dies sollte dem Aufzeichnungsschema von Puppeteer entsprechen.

  • stringifyStep

    void

    Konvertiert einen Schritt der Aufzeichnung aus dem Recorder-Panel-Format in einen String.

    Die Funktion stringifyStep sieht so aus: 

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

    • Schritt

      Objekt

      Ein Schritt der Aufzeichnung einer Nutzerinteraktion mit der Seite. Dies sollte dem Schrittschema von Puppeteer entsprechen.

RecorderView

Chrome 112+

Stellt eine von der Erweiterung erstellte Ansicht dar, die in das Recorder-Panel eingebettet werden soll.

Properties

  • onHidden

    Event<functionvoidvoid>

    Wird ausgelöst, wenn die Ansicht ausgeblendet ist.

    Die Funktion onHidden.addListener sieht so aus: 

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

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Wird ausgelöst, wenn die Ansicht angezeigt wird.

    Die Funktion onShown.addListener sieht so aus: 

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

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      () => void

  • Einblenden

    void

    Gibt an, dass die Erweiterung diese Ansicht im Recorder-Panel anzeigen möchte.

    Die Funktion show sieht so aus: 

    () => {...}

Methoden

createView()

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

Erstellt eine Ansicht, die die Wiedergabe verarbeiten kann. Diese Ansicht wird in das Recorder-Panel eingebettet.

Parameter

  • Titel

    String

    Titel, der neben dem Erweiterungssymbol in der Symbolleiste der Entwicklertools angezeigt wird.

  • pagePath

    String

    Pfad der HTML-Seite des Panels relativ zum Erweiterungsverzeichnis.

Ausgabe

registerRecorderExtensionPlugin()

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

Registriert ein Recorder-Erweiterungs-Plug-in.

Parameter

  • Eine Instanz, die die RecorderExtensionPlugin-Schnittstelle implementiert.

  • name

    String

    Der Name des Plug-ins.

  • mediaType

    String

    Der Medientyp des Stringinhalts, den das Plug-in erzeugt.