chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Descrizione

Disponibilità

Consulta il Riepilogo delle API DevTools per un'introduzione generale all'utilizzo delle API degli Strumenti per sviluppatori.

Panoramica

L'API devtools.recorder è una funzionalità di 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.

Personalizzare la funzionalità di esportazione

Per registrare un plug-in di estensione, utilizza la funzione registerRecorderExtensionPlugin. Questa funzione richiede un'istanza del plug-in, un name e un 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 pannello 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 una registrazione completa del flusso utente
• stringifyStep che riceve un singolo passo 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 di esportazione

Il seguente codice implementa un plug-in di estensione che trasforma una registrazione in una stringa 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'
);

Personalizzare il pulsante per guardare di nuovo

Per personalizzare il pulsante di riproduzione in Registratore, utilizza la funzione registerRecorderExtensionPlugin. Affinché la personalizzazione abbia effetto, il plug-in deve implementare il metodo replay. Se il metodo viene rilevato, nel Registratore viene visualizzato un pulsante di riproduzione. Quando fai clic sul pulsante, l'oggetto di registrazione corrente viene 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 riproduzione. Per creare un nuovo RecorderView, richiama chrome.devtools.recorder.createView.

Esempio di plug-in di replay

Il seguente codice implementa un plug-in di estensione che crea una visualizzazione del registratore fittizia e la visualizza in seguito a 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 completo di estensione su GitHub.

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

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