chrome.devtools.recorder

Beschreibung

Mit der chrome.devtools.recorder API kannst du den Rekorder-Bereich in den Entwicklertools anpassen.

Die devtools.recorder API ist eine Vorschaufunktion, mit der du den Rekorder-Bereich in den Chrome-Entwicklertools erweitern kannst.

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

Verfügbarkeit

Chrome 105 oder höher

Konzepte und Verwendung

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:

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

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.

Beispiele

Plug-in exportieren

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

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.

Typen

RecorderExtensionPlugin

Eine Plug-in-Schnittstelle, die vom Bereich „Rekorder“ aufgerufen wird, um den Bereich „Rekorder“ anzupassen.

Attribute

  • Nochmal

    voidm

    Chrome 112 und höher

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

    Die Funktion replay sieht so aus:

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

  • Stringify

    voidm

    Konvertiert eine Aufnahme aus dem Feld „Rekorder“ in einen String.

    Die Funktion stringify sieht so aus:

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

  • stringifyStep

    voidm

    Konvertiert einen Schritt der Aufnahme aus dem Feldformat Rekorder in einen String.

    Die Funktion stringifyStep sieht so aus:

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

    • Schritt

      Objekt

      Ein Schritt der Aufzeichnung einer Nutzerinteraktion mit der Seite. Dies sollte mit dem Puppeteer-Schrittschema übereinstimmen.

RecorderView

Chrome 112 und höher

Stellt eine durch Erweiterung erstellte Ansicht dar, die in den Rekorder-Bereich eingebettet wird.

Attribute

  • onHidden

    Ereignis<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

    Ereignis<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

    voidm

    Gibt an, dass die Erweiterung diese Ansicht im Rekorder-Bereich anzeigen möchte.

    Die Funktion show sieht so aus:

    () => {...}

Methoden

createView()

Chrome 112 und höher
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Erstellt eine Ansicht, die die erneute Wiedergabe verarbeiten kann. Diese Ansicht wird in den Rekorder-Bereich eingebettet.

Parameter

  • Titel

    String

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

  • pagePath

    String

    Pfad der HTML-Seite des Bereichs relativ zum Erweiterungsverzeichnis.

Returns

registerRecorderExtensionPlugin()

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

Registriert das Plug-in der Rekorder-Erweiterung.

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.