Descrição
Use a API chrome.devtools.recorder
para personalizar o painel do Gravador no DevTools.
Disponibilidade
Consulte o Resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.
Visão geral
A API devtools.recorder
é um recurso de pré-lançamento que permite ampliar o painel do Gravador no Chrome DevTools.
A partir do Chrome M105, é possível estender a funcionalidade de exportação. A partir do Chrome M112, é possível estender o botão "Repetir".
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 todo o registro do fluxo do usuário.stringifyStep
que recebe uma única etapa registrada.
O parâmetro mediaType
permite que a extensão especifique o tipo de saída gerada com as funções stringify
e stringifyStep
. Por exemplo, application/javascript
se o resultado for um programa
JavaScript.
Exemplo de plug-in de exportação
O código abaixo implementa um plug-in de extensão que executa uma string 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'
);
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 de gravação atual será transmitido como o primeiro argumento para o método replay
.
Nesse ponto, a extensão pode exibir uma RecorderView
para processar a repetiçã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
.
Exemplo de plug-in de repetição
O código a seguir implementa um plug-in de extensão que cria uma visualização fictícia de gravador e a exibe após 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'
);
Veja um exemplo completo de extensão (link em inglês) no GitHub.
Tipos
RecorderExtensionPlugin
Uma interface de plug-in que o painel do Gravador invoca para personalizar o painel.
Propriedades
-
repetir vídeo
void
Chrome 112 ou mais recentePermite 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 do Gravador em uma string.
A função
stringifyStep
tem esta aparência:(step: object) => {...}
-
etapa
objeto
Uma etapa da gravação de uma interação do usuário com a página. Isso deve corresponder ao esquema de etapas do Puppeteer.
-
RecorderView
Representa uma visualização criada por uma extensão a ser incorporada no painel do Gravador.
Propriedades
-
onHidden
Evento<functionvoid>
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<functionvoid>
Disparado quando a visualização é mostrada.
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 essa visualização no painel do 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
-
title
string
Título exibido ao lado do ícone de extensão na barra de ferramentas das Ferramentas para desenvolvedores.
-
pagePath
string
Caminho da página HTML do painel em relação 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
-
plugin
Uma instância que implementa a interface RecorderExtensionPlugin.
-
name
string
O nome do plug-in.
-
mediaType
string
O tipo de mídia do conteúdo de string que o plug-in produz.