chrome.devtools.recorder

Descripción

Usa la API de chrome.devtools.recorder para personalizar el panel de Recorder en DevTools.

La API de devtools.recorder es una función de vista previa que te permite extender el panel del Recorder en las Herramientas para desarrolladores de Chrome.

Consulta el resumen de las APIs de DevTools para obtener una introducción general al uso de las APIs de Herramientas para desarrolladores.

Disponibilidad

Chrome 105 y versiones posteriores

Conceptos y uso

Cómo personalizar la función de exportación

Para registrar un complemento de extensión, usa la función registerRecorderExtensionPlugin. Esta función requiere una instancia de complemento, un name y un mediaType como parámetros. La instancia del complemento debe implementar dos métodos: stringify y stringifyStep.

El name que proporciona la extensión aparece en el menú Export del panel Recorder.

Según el contexto de exportación, cuando el usuario hace clic en la opción de exportación que proporciona la extensión, el panel Recorder invoca una de las dos funciones:

El parámetro mediaType permite que la extensión especifique el tipo de resultado que genera con las funciones stringify y stringifyStep. Por ejemplo, application/javascript si el resultado es un programa de JavaScript.

Cómo personalizar el botón de repetición

Para personalizar el botón de reproducción en la grabadora, usa la función registerRecorderExtensionPlugin. El complemento debe implementar el método replay para que la personalización surta efecto. Si se detecta el método, aparecerá un botón de reproducción en la Grabadora. Cuando se haga clic en el botón, el objeto de grabación actual se pasará como el primer argumento al método replay.

En este punto, la extensión puede mostrar un RecorderView para controlar la reproducción o usar otras APIs de extensión para procesar la solicitud de reproducción. Para crear un objeto RecorderView nuevo, invoca chrome.devtools.recorder.createView.

Ejemplos

Complemento de exportación

El siguiente código implementa un complemento de extensión que convierte una grabación en una cadena con 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'
);

Complemento de repetición

El siguiente código implementa un complemento de extensión que crea una vista de Recorder ficticia y la muestra cuando se realiza una solicitud de reproducción:

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

Encuentra un ejemplo completo de extensión en GitHub.

Tipos

RecorderExtensionPlugin

Es una interfaz de complementos que invoca el panel de Grabadora para personalizarlo.

Propiedades

  • volver a reproducir

    void

    Chrome 112 y versiones posteriores

    Permite que la extensión implemente una funcionalidad de reproducción personalizada.

    La función replay se ve de la siguiente manera: 

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

  • stringify

    void

    Convierte una grabación del formato del panel de Recorder en una cadena.

    La función stringify se ve de la siguiente manera: 

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

  • stringifyStep

    void

    Convierte un paso de la grabación del formato del panel de Grabadora en una cadena.

    La función stringifyStep se ve de la siguiente manera: 

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

RecorderView

Chrome 112 y versiones posteriores

Representa una vista creada por extensión para incorporarse dentro del panel del Recorder.

Propiedades

  • onHidden

    Event<functionvoidvoid>

    Se activa cuando se oculta la vista.

    La función onHidden.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Se activa cuando se muestra la vista.

    La función onShown.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • mostrar

    void

    Indica que la extensión quiere mostrar esta vista en el panel de Grabadora.

    La función show se ve de la siguiente manera: 

    () => {...}

Métodos

createView()

Chrome 112 y versiones posteriores 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Crea una vista que pueda controlar la reproducción. Esta vista se incorporará en el panel del grabador.

Parámetros

  • título

    string

    Es el título que se muestra junto al ícono de la extensión en la barra de herramientas de Herramientas para desarrolladores.

  • pagePath

    string

    Ruta de acceso de la página HTML del panel relativa al directorio de la extensión.

Muestra

registerRecorderExtensionPlugin()

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

Registra un complemento de extensión de Recorder.

Parámetros

  • Es una instancia que implementa la interfaz RecorderExtensionPlugin.

  • nombre

    string

    Es el nombre del complemento.

  • mediaType

    string

    Es el tipo de medio del contenido de cadena que produce el complemento.