chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Descrição

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

Disponibilidade

Chrome 105 ou mais recente

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 em fase de pré-lançamento que permite estender o painel 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 de repetição.

Como 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 que ela gera 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 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'
);

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 exibir um RecorderView para lidar com 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 do 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'
);

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+

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

    A função replay é semelhante a: 

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

  • stringify

    void

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

    A função stringify é semelhante a: 

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

  • stringifyStep

    void

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

    A função stringifyStep é semelhante a: 

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

RecorderView

Chrome 112+

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

Propriedades

  • onHidden

    Event<functionvoidvoid>

    Disparado quando a visualização é ocultada.

    A função onHidden.addListener é semelhante a: 

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Disparado quando a visualização é mostrada.

    A função onShown.addListener é semelhante a: 

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • mostrar

    void

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

    A função show é semelhante a: 

    () => {...}

Métodos

createView()

Chrome 112+ 
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 do Gravador.

Parâmetros

  • título

    string

    Título que aparece ao lado do ícone da extensão na barra de ferramentas para desenvolvedores.

  • pagePath

    string

    Caminho da página HTML do painel em relação ao diretório da 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.