chrome.devtools.recorder

Descrição

Use a API chrome.devtools.recorder para personalizar o painel Gravador no DevTools.

A API devtools.recorder é um recurso de visualização que permite estender o painel 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 e versões mais recentes

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 exige 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 as stringify e stringifyStep funções. Por exemplo, application/javascript se o resultado for um programa JavaScript.

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 vai aparecer 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 momento, a extensão pode mostrar uma RecorderView para processar a repetição ou usar outras APIs de extensão para processar a solicitação de repetição. Para criar uma nova RecorderView, invoque chrome.devtools.recorder.createView.

Exemplos

Plug-in de exportação

O código a seguir implementa um plug-in de extensão que transforma uma gravação em 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'
);

Plug-in de repetição

O código a seguir implementa um plug-in de extensão que cria uma visualização de Gravador fictícia e a mostra 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 e versões mais recentes

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

    A função replay é assim: 

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

  • transformar em string

    void

    Converte uma gravação do formato do painel Gravador em uma string.

    A função stringify é assim: 

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

  • stringifyStep

    void

    Converte uma etapa da gravação do formato do painel Gravador em uma string.

    A função stringifyStep é assim: 

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

RecorderView

Chrome 112 e versões mais recentes

Representa uma visualização criada por uma extensão para ser incorporada ao painel Gravador.

Propriedades

  • onHidden

    Evento<functionvoidvoid>

    Disparado quando a visualização está oculta.

    A função onHidden.addListener é assim: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback é assim: 

      () => void

  • onShown

    Evento<functionvoidvoid>

    Disparado quando a visualização é mostrada.

    A função onShown.addListener é assim: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback é assim: 

      () => void

  • mostrar

    void

    Indica que a extensão quer mostrar essa visualização no painel Gravador.

    A função show é assim: 

    () => {...}

Métodos

createView()

Chrome 112 e versões mais recentes 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Cria uma visualização que pode processar a repetição. Essa visualização será incorporada ao painel Gravador.

Parâmetros

  • título

    string

    Título mostrado 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,
): void

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 de string que o plug-in produz.