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
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:
stringify
que recibe un registro completo del flujo de usuariosstringifyStep
que recibe un único paso registrado
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 posterioresPermite que la extensión implemente la funcionalidad de reproducción personalizada.
La función
replay
se ve de la siguiente manera:(recording: object) => {...}
-
grabando
objeto
Una grabación de la interacción del usuario con la página. Debe coincidir con el esquema de grabación de Puppeteer.
-
-
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) => {...}
-
grabando
objeto
Una grabación de la interacción del usuario con la página. Debe coincidir con el esquema de grabación de Puppeteer.
-
-
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) => {...}
-
paso
objeto
Es un paso de la grabación de la interacción del usuario con la página. Debe coincidir con el esquema de pasos de Puppeteer.
-
RecorderView
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.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
-
plugin
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.