Descrizione
Usa l'API chrome.devtools.recorder
per personalizzare il riquadro Registratore in DevTools.
Disponibilità
Consulta il riepilogo delle API degli strumenti per sviluppatori per un'introduzione generale all'utilizzo delle API degli strumenti per sviluppatori.
Panoramica
L'API devtools.recorder
è una funzionalità in anteprima che ti consente di estendere il riquadro Registratore in Chrome DevTools.
A partire da Chrome M105, puoi estendere la funzionalità di esportazione. A partire da Chrome M112, puoi estendere il pulsante di riproduzione.
Personalizzazione della funzionalità di esportazione
Per registrare un plug-in di estensione, usa la funzione registerRecorderExtensionPlugin
. Questa funzione richiede un'istanza plug-in, name
e mediaType
come parametri. L'istanza del plug-in deve implementare due metodi: stringify
e stringifyStep
.
Il name
fornito dall'estensione viene visualizzato nel menu Esporta nel riquadro Registratore.
A seconda del contesto di esportazione, quando l'utente fa clic sull'opzione di esportazione fornita dall'estensione, il riquadro Registratore richiama una delle due funzioni:
stringify
che riceve un'intera registrazione del flusso di utentistringifyStep
che riceve un singolo passaggio registrato
Il parametro mediaType
consente all'estensione di specificare il tipo di output che genera con le funzioni stringify
e stringifyStep
. Ad esempio, application/javascript
se il risultato è un programma JavaScript.
Esempio di plug-in per l'esportazione
Il seguente codice implementa un plug-in di estensione che stringe una registrazione utilizzando JSON.stringify
:
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'
);
Personalizzazione del pulsante di riproduzione
Per personalizzare il pulsante di riproduzione nel Registratore, utilizza la funzione registerRecorderExtensionPlugin
. Il plug-in deve implementare il metodo replay
affinché la personalizzazione abbia effetto.
Se il metodo viene rilevato, nel Registratore viene visualizzato un pulsante di ripetizione.
Dopo aver fatto clic sul pulsante, l'oggetto di registrazione corrente verrà passato come primo argomento al metodo replay
.
A questo punto, l'estensione può visualizzare un RecorderView
per la gestione della riproduzione o utilizzare altre API dell'estensione per elaborare la richiesta di riproduzione. Per creare un nuovo RecorderView
, richiama chrome.devtools.recorder.createView
.
Esempio di plug-in Replay
Il seguente codice implementa un plug-in di estensione che crea una visualizzazione fittizia di Registratore e la visualizza su una richiesta di riproduzione:
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'
);
Trova un esempio di estensione completo su GitHub.
Tipi
RecorderExtensionPlugin
Interfaccia plug-in che viene richiamata dal riquadro Registratore per personalizzare il riquadro.
Proprietà
-
guarda di nuovo
void
Chrome 112 e versioni successiveConsente all'estensione di implementare una funzionalità di riproduzione personalizzata.
La funzione
replay
ha il seguente aspetto:(recording: object) => {...}
-
registrando
oggetto
Una registrazione dell'interazione dell'utente con la pagina. Deve corrispondere allo schema di registrazione di Pupeteer.
-
-
stringify
void
Converte una registrazione dal formato del riquadro Registratore in una stringa.
La funzione
stringify
ha il seguente aspetto:(recording: object) => {...}
-
registrando
oggetto
Una registrazione dell'interazione dell'utente con la pagina. Deve corrispondere allo schema di registrazione di Pupeteer.
-
-
stringifyStep
void
Converte un passaggio della registrazione dal formato del riquadro Registratore in una stringa.
La funzione
stringifyStep
ha il seguente aspetto:(step: object) => {...}
-
fase
oggetto
Un passaggio della registrazione di un'interazione di un utente con la pagina. Deve corrispondere allo schema dei passaggi di Pupeteer.
-
RecorderView
Rappresenta una visualizzazione creata da un'estensione da incorporare all'interno del riquadro Registratore.
Proprietà
-
onHidden
Evento<functionvoidvoid>
Attivato quando la visualizzazione è nascosta.
La funzione
onHidden.addListener
ha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callback
ha il seguente aspetto:() => void
-
-
onShown
Evento<functionvoidvoid>
Attivato quando viene mostrata la visualizzazione.
La funzione
onShown.addListener
ha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callback
ha il seguente aspetto:() => void
-
-
mostra
void
Indica che l'estensione vuole mostrare questa visualizzazione nel riquadro Registratore.
La funzione
show
ha il seguente aspetto:() => {...}
Metodi
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Crea una visualizzazione in grado di gestire la riproduzione. Questa visualizzazione verrà incorporata nel riquadro Registratore.
Parametri
-
title
stringa
Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti degli Strumenti per sviluppatori.
-
pagePath
stringa
Percorso della pagina HTML del riquadro in relazione alla directory dell'estensione.
Ritorni
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Registra un plug-in dell'estensione Registratore.
Parametri
-
plugin
Un'istanza che implementa l'interfaccia RecorderExtensionPlugin.
-
nome
stringa
Il nome del plug-in.
-
mediaType
stringa
Il tipo multimediale del contenuto della stringa prodotto dal plug-in.