chrome.devtools.recorder

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

Chrome 105 ou mais recente

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:

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 recentes

    Permite que a extensão implemente a funcionalidade de repetição personalizada.

    A função replay tem esta aparência: 

    (recording: object) => {...}

  • 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) => {...}

  • 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) => {...}

RecorderView

Chrome 112 ou versões mais recentes

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 112 ou versões mais recentes 
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

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