Descrição
Use a API chrome.devtools.recorder
para personalizar o painel do Gravador no DevTools.
A API devtools.recorder
é um recurso em fase de pré-lançamento que permite ampliar o painel do Gravador no Chrome DevTools.
Consulte o resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.
Disponibilidade
Conceitos e uso
Personalizar o recurso de exportação
Para registrar um plug-in de extensão, use a função registerRecorderExtensionPlugin
. Essa função requer uma instância de plug-in, um name
e um mediaType
como parâmetros. A instância do plug-in precisa implementar dois métodos: stringify
e stringifyStep
.
O name
fornecido pela extensão aparece no menu Exportar no painel Gravador.
Dependendo do contexto de exportação, quando o usuário clica na opção de exportação fornecida pela extensão, o painel Gravador invoca uma das duas funções:
stringify
que recebe um registro de fluxo do usuário completostringifyStep
que recebe uma única etapa registrada
O parâmetro mediaType
permite que a extensão especifique o tipo de saída gerada com o
funções stringify
e stringifyStep
. Por exemplo, application/javascript
se o resultado for um JavaScript
neste programa.
Como personalizar o botão de repetição
Para personalizar o botão de repetição no Gravador, use a função registerRecorderExtensionPlugin
. O plug-in precisa implementar o método replay
para que a personalização entre em vigor.
Se o método for detectado, um botão de repetição será exibido no Gravador.
Ao clicar no botão, o objeto da gravação atual será transmitido como o primeiro argumento para o método replay
.
Nesse momento, a extensão pode exibir um RecorderView
para processar a reprodução ou usar outras APIs de extensão para processar a solicitação de repetição. Para criar um novo RecorderView
, invoque chrome.devtools.recorder.createView
.
Exemplos
Exportar plug-in
O código a seguir implementa um plug-in de extensão que cria uma string para uma gravação usando 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 de repetição
O código a seguir implementa um plug-in de extensão que cria uma visualização fictícia do Recorder e a exibe em uma solicitação de repetição:
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'
);
Encontre um exemplo completo de extensão no GitHub.
Tipos
RecorderExtensionPlugin
Uma interface de plug-in que o painel Gravador invoca para personalizar o painel Gravador.
Propriedades
-
repetir vídeo
void
Chrome 112 ou versões mais recentesPermite que a extensão implemente a funcionalidade de repetição personalizada.
A função
replay
tem esta aparência:(recording: object) => {...}
-
gravando
objeto
Um registro da interação do usuário com a página. Isso deve corresponder ao esquema de gravação do Puppeteer.
-
-
stringify
void
Converte uma gravação do formato do painel do Gravador em uma string.
A função
stringify
tem esta aparência:(recording: object) => {...}
-
gravando
objeto
Um registro da interação do usuário com a página. Isso deve corresponder ao esquema de gravação do Puppeteer.
-
-
stringifyStep
void
Converte uma etapa da gravação do formato do painel Gravador em uma string.
A função
stringifyStep
tem esta aparência:(step: object) => {...}
-
etapa
objeto
Uma etapa do registro da interação de um usuário com a página. Isso deve corresponder ao esquema de etapas do Puppeteer.
-
RecorderView
Representa uma visualização criada por extensão para ser incorporada dentro do painel do Gravador.
Propriedades
-
onHidden
Evento<functionvoidvoid>
Disparado quando a visualização está oculta.
A função
onHidden.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
onShown
Evento<functionvoidvoid>
Disparado quando a visualização é exibida.
A função
onShown.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
mostrar
void
Indica que a extensão quer mostrar esta visualização no painel Gravador.
A função
show
tem esta aparência:() => {...}
Métodos
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Cria uma visualização que pode processar a repetição. Essa visualização será incorporada ao painel do Gravador.
Parâmetros
-
título
string
Título exibido ao lado do ícone da extensão na barra de ferramentas das Ferramentas para desenvolvedores.
-
pagePath
string
Caminho da página HTML do painel relativo ao diretório de extensão.
Retorna
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Registra um plug-in de extensão do Gravador.
Parâmetros
-
plug-in
Uma instância que implementa a interface RecorderExtensionPlugin.
-
nome
string
O nome do plug-in.
-
mediaType
string
O tipo de mídia do conteúdo da string que o plug-in produz.