browser.devtools.recorder

Описание

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

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

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

Доступность

Chrome 105+ browser.* начиная с Chrome 152

Основные понятия и использование

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

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

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

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

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

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

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

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

Примеры

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

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

Плагин Replay

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

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

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

Типы

RecorderExtensionPlugin

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

Свойства

  • повторить

    void

    Chrome 112+ browser.* начиная с Chrome 152

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

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

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

    • запись

      Объект

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

  • stringify

    void

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

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

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

    • запись

      Объект

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

  • stringifyStep

    void

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

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

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

    • шаг

      Объект

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

RecorderView

Chrome 112+ browser.* начиная с Chrome 152

Представляет представление, созданное расширением для встраивания в панель 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+ browser.* начиная с Chrome 152 
browser.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

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

Параметры

  • название

    string

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

  • pagePath

    string

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

Возвраты

registerRecorderExtensionPlugin()

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

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

Параметры

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

  • name

    string

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

  • mediaType

    string

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