chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Descrizione

Utilizza l'API chrome.devtools.recorder per personalizzare il riquadro Registratore in DevTools.

Disponibilità

Chrome 105 e versioni successive

Consulta il riepilogo delle API DevTools per un'introduzione generale all'utilizzo delle API 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, 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.

La name fornita dall'estensione viene visualizzata 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:

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 converte una registrazione in 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'
);

Personalizzazione del pulsante Guarda di nuovo

Per personalizzare il pulsante di ripetizione in Registratore, utilizza la funzione registerRecorderExtensionPlugin. Il plug-in deve implementare il metodo replay affinché la personalizzazione abbia effetto. Se il metodo viene rilevato, in Registratore viene visualizzato un pulsante di riproduzione. Quando fai 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 gestire la 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 Recorder e la mostra 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 completo di estensione su GitHub.

Tipi

RecorderExtensionPlugin

Un'interfaccia del plug-in richiamata dal riquadro Registratore per personalizzarlo.

Proprietà

  • guarda di nuovo

    void

    Chrome 112+

    Consente all'estensione di implementare funzionalità di riproduzione personalizzate.

    La funzione replay ha il seguente aspetto: 

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

  • stringify

    void

    Converte una registrazione dal formato del riquadro Registratore in una stringa.

    La funzione stringify ha il seguente aspetto: 

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

  • stringifyStep

    void

    Converte un passaggio della registrazione dal formato del riquadro Registratore in una stringa.

    La funzione stringifyStep ha il seguente aspetto: 

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

RecorderView

Chrome 112+

Rappresenta una visualizzazione creata dall'estensione da incorporare nel riquadro Registratore.

Proprietà

  • onHidden

    Event<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

    Event<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 112+ 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Crea una visualizzazione in grado di gestire la riproduzione. Questa visualizzazione verrà incorporata nel riquadro Registratore.

Parametri

  • titolo

    stringa

    Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti Strumenti per sviluppatori.

  • pagePath

    stringa

    Percorso della pagina HTML del riquadro relativo alla directory dell'estensione.

Resi

registerRecorderExtensionPlugin()

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

Registra un plug-in di estensione di Registratore.

Parametri

  • Un'istanza che implementa l'interfaccia RecorderExtensionPlugin.

  • nome

    stringa

    Il nome del plug-in.

  • mediaType

    stringa

    Il tipo di media dei contenuti della stringa prodotti dal plug-in.