chrome.devtools.recorder

Descripción

Disponibilidad

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

Descripción general

La API de devtools.recorder es una función de vista previa que te permite extender el panel Grabadora en las Herramientas para desarrolladores de Chrome. A partir de Chrome M105, puedes extender la función de exportación. A partir de Chrome M112, puedes extender el botón de reproducción.

Personaliza 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 Grabadora.

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:

• stringify que recibe un registro completo del flujo de usuarios
• stringifyStep que recibe un solo paso registrado

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

Ejemplo de complemento de exportación

En el siguiente código, se implementa un complemento de extensión que envía una grabación mediante 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'
);

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

Para personalizar el botón de repetició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 reproducción en la Grabadora. Cuando hagas clic en el botón, el objeto de grabación actual se pasará como primer argumento al método replay.

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

Ejemplo de complemento para volver a reproducir

El siguiente código implementa un complemento de extensión que crea una vista ficticia de Grabadora y la muestra ante 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 completo de extensión en GitHub.

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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