chrome.devtools.recorder

Descrizione

Disponibilità

Consulta il riepilogo delle API di DevTools per un'introduzione generale all'utilizzo delle API degli strumenti per sviluppatori.

Panoramica

L'API devtools.recorder è una funzionalità in anteprima che 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 ripetizione.

Personalizzazione della funzionalità di esportazione

Per registrare un plug-in di estensione, utilizza 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 del 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 utente
• stringifyStep che riceve un singolo passaggio registrato

Il parametro mediaType consente all'estensione di specificare il tipo di output che genera con Funzioni stringify e stringifyStep. Ad esempio, application/javascript se il risultato è un file JavaScript .

Esempio di plug-in per l'esportazione

Il seguente codice implementa un plug-in di estensione che codifica 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 ripetizione

Per personalizzare il pulsante di ripetizione nel Registratore, utilizza la funzione registerRecorderExtensionPlugin. Affinché la personalizzazione venga applicata, il plug-in deve implementare il metodo replay. Se il metodo viene rilevato, nel Registratore verrà visualizzato un pulsante di ripetizione. Facendo clic sul pulsante, l'oggetto 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 di estensione per elaborare la richiesta di ripetizione. Per creare un nuovo RecorderView, richiama chrome.devtools.recorder.createView.

Esempio di plug-in Replay

Il codice seguente implementa un plug-in di estensione che crea una vista Registratore fittizia e la visualizza quando viene inviata una richiesta di ripetizione:

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 completo di estensione su GitHub.

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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