chrome.devtools.recorder

Descripción

Usa la API de chrome.devtools.recorder para personalizar el panel Grabadora en Herramientas para desarrolladores.

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

Consulta el resumen de las APIs de Herramientas para desarrolladores 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, name y mediaType como parámetros. La instancia del complemento debe implementar dos métodos: stringify y stringifyStep.

El name que proporciona la extensión se muestra 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 Grabadora 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 reproducció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 se aplique la personalización. Si se detecta el método, aparecerá un botón de repetición en la Grabadora. Cuando hagas clic en el botón, se pasará el objeto de grabación actual como 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 repetición. Para crear un nuevo RecorderView, invoca a chrome.devtools.recorder.createView.

Ejemplos

Exportar complemento

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

Volver a reproducir el complemento

El siguiente código implementa un complemento de extensión que crea una vista de grabadora ficticia y la muestra cuando se envía una solicitud de repetició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 de extensión completo en GitHub.

Tipos

RecorderExtensionPlugin

Una interfaz de complemento que el panel Grabadora invoca para personalizar el panel.

Propiedades

  • volver a reproducir

    void

    Chrome 112 y versiones posteriores

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

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

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

  • stringificar

    void

    Convierte una grabación del formato del panel Grabadora 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 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 incorporarla al panel Grabadora.

Propiedades

  • onHidden

    Evento<functionvoidvoid>

    Se activa cuando la vista está oculta.

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

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

    • callback

      la función

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

      ()=>void

  • onShown

    Evento<functionvoidvoid>

    Se activa cuando se muestra la vista.

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

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

    • callback

      la 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,
)

Crea una vista que pueda controlar la repetición. Esta vista se incorporará al panel de Grabadora.

Parámetros

  • title

    cadena

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

  • pagePath

    cadena

    Ruta de acceso de la página HTML del panel en relación con el directorio de la extensión.

Devuelve

registerRecorderExtensionPlugin()

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

Registra un complemento de extensión de Grabadora.

Parámetros

  • Una instancia que implementa la interfaz RecorderExtensionPlugin.

  • name

    cadena

    Es el nombre del complemento.

  • mediaType

    cadena

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