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
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:
stringify
, die eine vollständige Aufzeichnung des Nutzerflusses erhältstringifyStep
, der einen einzelnen aufgezeichneten Schritt empfängt
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öherErmöglicht der Erweiterung, eine benutzerdefinierte Wiedergabefunktion zu implementieren.
Die Funktion
replay
sieht so aus:(recording: object) => {...}
-
nimmst
Objekt
Aufzeichnung der Nutzerinteraktion mit der Seite. Dies sollte dem Aufzeichnungsschema von Puppeteer entsprechen.
-
-
verketten
void
Konvertiert eine Aufnahme aus dem Rekorder-Bereichsformat in eine Zeichenfolge.
Die Funktion
stringify
sieht so aus:(recording: object) => {...}
-
nimmst
Objekt
Aufzeichnung der Nutzerinteraktion mit der Seite. Dies sollte dem Aufzeichnungsschema von Puppeteer entsprechen.
-
-
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
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.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
-
plugin
Eine Instanz, die die Schnittstelle „RecorderExtensionPlugin“ implementiert.
-
name
String
Der Name des Plug-ins.
-
mediaType
String
Der Medientyp des vom Plug-in generierten Stringinhalts.