chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Описание

Используйте chrome.devtools.recorder API, чтобы настроить панель Recorder в DevTools.

Доступность

Chrome 105 и более поздних версий

Общие сведения об использовании API инструментов разработчика можно найти в этой статье.

Обзор

devtools.recorder API – это предварительная версия функции, которая позволяет расширить возможности панели записи в инструментах разработчика в Chrome. Начиная с версии Chrome M105, вы можете расширить функциональность экспорта. Начиная с версии Chrome M112, вы можете расширить кнопку повтора.

Настройка функции экспорта

Чтобы зарегистрировать плагин расширения, используйте функцию registerRecorderExtensionPlugin. В качестве параметров этой функции требуются экземпляр плагина, name и mediaType. Экземпляр плагина должен реализовывать два метода: stringify и stringifyStep.

name, предоставленный расширением, появится в меню Экспорт на панели Рекордер.

В зависимости от контекста экспорта, когда пользователь нажимает на вариант экспорта, предоставляемый расширением, панель Рекордер вызывает одну из двух функций:

• stringify, который получает запись всего пути пользователя.
• stringifyStep, который получает один записанный шаг.

Параметр mediaType позволяет расширению указать тип выходных данных, которые оно генерирует с помощью функций stringify и stringifyStep. Например, application/javascript, если результат – программа на JavaScript.

Пример плагина экспорта

В следующем коде реализован плагин расширения, который преобразует запись в строку с помощью 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'
);

Как настроить кнопку повторного воспроизведения

Чтобы настроить кнопку повтора в Диктофоне, используйте функцию registerRecorderExtensionPlugin. Чтобы изменения вступили в силу, плагин должен реализовать метод replay. Если метод будет обнаружен, на панели Регистратор появится кнопка воспроизведения. При нажатии кнопки текущий объект записи будет передан в качестве первого аргумента методу replay.

На этом этапе расширение может показать RecorderView для обработки повтора или использовать другие API расширений, чтобы обработать запрос на повтор. Чтобы создать новый объект RecorderView, вызовите chrome.devtools.recorder.createView.

Пример плагина Replay

В следующем коде реализован плагин расширения, который создает фиктивное представление Recorder и показывает его по запросу на воспроизведение:

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'
);

Полный пример расширения можно найти на GitHub.

Типы

RecorderExtensionPlugin

Интерфейс плагина, который вызывает панель "Запись" для ее настройки.

Свойства

• повторить

  void

  Chrome 112 и более поздних версий.

  Позволяет расширению реализовать собственную функцию повтора.

  Функция replay выглядит следующим образом:

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

  • запись

    Объект

    Запись взаимодействия пользователя со страницей. Она должна соответствовать схеме записи Puppeteer.

• stringify

  void

  Преобразует запись из формата панели "Рекордер" в строку.

  Функция stringify выглядит следующим образом:

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

  • запись

    Объект

    Запись взаимодействия пользователя со страницей. Она должна соответствовать схеме записи Puppeteer.

• stringifyStep

  void

  Преобразует шаг записи из формата панели "Рекордер" в строку.

  Функция stringifyStep выглядит следующим образом:

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

  • шаг

    Объект

    Шаг записи взаимодействия пользователя со страницей. Она должна соответствовать схеме шагов Puppeteer.

RecorderView

Chrome 112 и более поздних версий.

Представляет представление, созданное расширением для встраивания в панель Recorder.

Свойства

• onHidden

  Event<functionvoidvoid>

  Срабатывает, когда представление скрыто.

  Функция onHidden.addListener выглядит следующим образом:

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

  • обратный вызов

    function

    Параметр callback выглядит следующим образом:

    () => void

• onShown

  Event<functionvoidvoid>

  Срабатывает при показе представления.

  Функция onShown.addListener выглядит следующим образом:

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

  • обратный вызов

    function

    Параметр callback выглядит следующим образом:

    () => void

• Показывать

  void

  Указывает, что расширение хочет показать это представление на панели Recorder.

  Функция show выглядит следующим образом:

  () => {...}

Методы

createView()

Chrome 112 и более поздних версий.

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

Создает представление, которое может обрабатывать повтор. Это представление будет встроено в панель "Регистратор".

Параметры

• название

  string

  Заголовок, который показывается рядом со значком расширения на панели инструментов разработчика.

• pagePath

  string

  Путь к HTML-странице панели относительно каталога расширения.

Возвраты

• RecorderView

registerRecorderExtensionPlugin()

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

Регистрирует плагин расширения для панели "Регистратор".

Параметры

• плагин

  RecorderExtensionPlugin

  Экземпляр, реализующий интерфейс RecorderExtensionPlugin.

• name

  string

  Название плагина.

• mediaType

  string

  Тип медиаконтента, который создает плагин.