chrome.devtools.recorder

Descrição

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 completo
• stringifyStep 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.

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

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