browser.devtools.recorder

Descrição

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

A API devtools.recorder é um recurso de prévia 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 de desenvolvimento.

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 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 do painel Gravador.

Dependendo do contexto de exportação, quando o usuário clica na opçã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 funções stringify e stringifyStep. Por exemplo, application/javascript se o resultado for um programa em 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.

Neste ponto, a extensão pode mostrar um 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 browser.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));
  }
}

browser.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 reprodução:

const view = await browser.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.
  browser.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();
  }
}

browser.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 do Gravador invoca para personalizar o painel.

Propriedades

  • repetir vídeo

    void

    Chrome 112 ou mais recente

    Permite que a extensão implemente uma 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 "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 mais recente

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 tem esta aparência: 

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

    • callback

      função

      O parâmetro callback tem esta aparência: 

      () => void

  • onShown

    Event<functionvoidvoid>

    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 "Gravador".

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

    () => {...}

Métodos

createView()

Chrome 112 ou mais recente 
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 exibido ao lado do ícone da extensão na barra de ferramentas Ferramentas para desenvolvedores.

  • pagePath

    string

    Caminho da página HTML do painel relativo 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 produzido pelo plug-in.