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 ti consente di estendere il riquadro Registratore in Chrome DevTools.

Consulta il riepilogo delle API degli strumenti per sviluppatori 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, usa 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 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.

Personalizzazione del pulsante di riproduzione

Per personalizzare il pulsante di riproduzione nel Registratore, utilizza la funzione registerRecorderExtensionPlugin. Il plug-in deve implementare il metodo replay affinché la personalizzazione abbia effetto. Se il metodo viene rilevato, nel Registratore viene visualizzato un pulsante di ripetizione. Dopo aver fatto 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 la gestione della riproduzione o utilizzare altre API dell'estensione per elaborare la richiesta di riproduzione. Per creare un nuovo RecorderView, richiama chrome.devtools.recorder.createView.

Esempi

Esporta plug-in

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

Tipi

RecorderExtensionPlugin

Interfaccia plug-in che viene richiamata dal riquadro Registratore per personalizzare il riquadro.

Proprietà

  • guarda di nuovo

    void

    Chrome 112 e versioni successive

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

    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 e versioni successive

Rappresenta una visualizzazione creata da un'estensione da incorporare all'interno del riquadro Registratore.

Proprietà

  • onHidden

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

    Evento<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 e versioni successive 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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

Parametri

  • title

    stringa

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

  • pagePath

    stringa

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

Ritorni

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 RecorderExtensionPlugin.

  • nome

    stringa

    Il nome del plug-in.

  • mediaType

    stringa

    Il tipo multimediale del contenuto della stringa prodotto dal plug-in.