chrome.devtools.recorder

Descrizione

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

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

Per un'introduzione generale all'utilizzo delle API DevTools, consulta il Riepilogo delle API DevTools.

Disponibilità

Chrome 105+

Concetti e utilizzo

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.

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 le funzioni stringify e stringifyStep. Ad esempio, application/javascript se il risultato è un programma JavaScript.

Personalizzare il pulsante di riproduzione

Per personalizzare il pulsante di riproduzione nell'app 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.

Esempi

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

Plug-in Replay

Il seguente codice implementa un plug-in di estensione che crea una visualizzazione Recorder fittizia e la mostra 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.

Tipi

RecorderExtensionPlugin

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

Proprietà

  • guarda di nuovo

    void

    Chrome 112+

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

    La funzione replay ha questo aspetto: 

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

  • stringify

    void

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

    La funzione stringify ha questo aspetto: 

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

  • stringifyStep

    void

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

    La funzione stringifyStep ha questo 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 viene nascosta.

    La funzione onHidden.addListener ha questo 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 questo 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 questo 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 degli strumenti per sviluppatori.

  • pagePath

    stringa

    Percorso della pagina HTML del riquadro rispetto 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.