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 Sie den Rekorder-Bereich in den Chrome-Entwicklertools erweitern können.

Eine allgemeine Einführung in die Verwendung von APIs für Entwicklertools finden Sie unter Zusammenfassung der Entwicklertools-APIs.

Verfügbarkeit

Chrome 105 und höher

Konzepte und Nutzung

Exportfunktion anpassen

Registrieren Sie ein Erweiterungs-Plug-in über 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 Menü Rekorder im Menü Exportieren angezeigt.

Wenn der Nutzer je nach Exportkontext auf die von der Erweiterung bereitgestellte Exportoption klickt, ruft das Steuerfeld Rekorder eine der beiden Funktionen auf:

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

Schaltfläche zur erneuten Wiedergabe anpassen

Um die Schaltfläche für die erneute Wiedergabe im Rekorder anzupassen, verwende die Funktion registerRecorderExtensionPlugin. Im Plug-in muss die Methode replay implementiert sein, damit die Anpassung wirksam wird. Wenn die Methode erkannt wird, wird im Rekorder eine Schaltfläche zur erneuten Wiedergabe 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 ein RecorderView für die Verarbeitung der Wiedergabe anzeigen oder andere Erweiterungs-APIs verwenden, um die Anfrage für die erneute Wiedergabe zu verarbeiten. Rufen Sie chrome.devtools.recorder.createView auf, um ein neues RecorderView zu erstellen.

Beispiele

Export-Plug-in

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

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 Dummy-Rekorder-Ansicht erstellt und diese bei einer Anforderung zur erneuten Wiedergabe 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 Beispiel für eine vollständige Erweiterung finden Sie auf GitHub.

Typen

RecorderExtensionPlugin

Eine Plug-in-Schnittstelle, die im Rekorder-Bereich aufgerufen wird, um das Rekorder-Steuerfeld anzupassen.

Attribute

  • Nochmal

    void

    Chrome 112 und höher

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

    Die Funktion replay sieht so aus: 

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

  • verketten

    void

    Konvertiert eine Aufnahme aus dem Rekorder-Bereichsformat in eine Zeichenfolge.

    Die Funktion stringify sieht so aus: 

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

  • stringifyStep

    void

    Wandelt einen Schritt der Aufzeichnung aus dem Rekorder-Feldformat in eine Zeichenfolge um.

    Die Funktion stringifyStep sieht so aus: 

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

    • Schritt

      Objekt

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

RecorderView

Chrome 112 und höher

Stellt eine durch die Erweiterung erstellte Ansicht zur Einbettung in das Rekorder-Steuerfeld dar.

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

    void

    Gibt an, dass die Erweiterung diese Ansicht im Rekorder-Steuerfeld 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 im Rekorder-Bereich eingebettet.

Parameters

  • Titel

    String

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

  • pagePath

    String

    Pfad der HTML-Seite des Bereichs im Verhältnis zum Verzeichnis mit den Erweiterungen.

Rückgaben

registerRecorderExtensionPlugin()

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

Registriert ein Rekorder-Erweiterungs-Plug-in

Parameters

  • Eine Instanz, die die Schnittstelle „RecorderExtensionPlugin“ implementiert.

  • name

    String

    Der Name des Plug-ins.

  • mediaType

    String

    Der Medientyp des vom Plug-in generierten Stringinhalts.