chrome.devtools.recorder

Descrizione

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

L'API devtools.recorder è una funzionalità in anteprima che consente di estendere il riquadro Registratore in Chrome DevTools.

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

Disponibilità

Chrome 105 e versioni successive .

Concetti e utilizzo

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:

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 .

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.

Esempi

Esporta plug-in

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'
);

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.

Tipi

RecorderExtensionPlugin

Un'interfaccia plug-in attivata dal riquadro Registratore per personalizzare il riquadro Registratore.

Proprietà

  • guarda di nuovo

    null

    Chrome 112 e versioni successive .

    Consente all'estensione di implementare la funzionalità di riproduzione personalizzata.

    La funzione replay ha questo aspetto: 

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

  • stringa

    null

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

    La funzione stringify ha questo aspetto: 

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

  • stringifyStep

    null

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

    La funzione stringifyStep ha questo aspetto: 

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

RecorderView

Chrome 112 e versioni successive .

Rappresenta una visualizzazione creata per estensione per essere incorporata nel riquadro Registratore.

Proprietà

  • onHidden

    Evento<functionvoidvoid>

    Attivato quando la visualizzazione è nascosta.

    La funzione onHidden.addListener ha questo 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 questo aspetto: 

    (callback: function) => {...}

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • mostra

    null

    Indica che l'estensione vuole mostrare questa visualizzazione nel riquadro Registratore.

    La funzione show ha questo aspetto: 

    () => {...}

Metodi

createView()

Chrome 112 e versioni successive .
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Crea una visualizzazione in grado di gestire la riproduzione. Questa visualizzazione verrà incorporata all'interno del riquadro Registratore.

Parametri

  • titolo

    stringa

    Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti degli 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,
)

Registra un plug-in dell'estensione Registratore.

Parametri

  • Un'istanza che implementa l'interfaccia RecorderEstensioneplugin.

  • nome

    stringa

    Il nome del plug-in.

  • mediaType

    stringa

    Il tipo multimediale dei contenuti della stringa prodotto dal plug-in.