chrome.devtools.recorder

Описание

Используйте API chrome.devtools.recorder для настройки панели записи в инструментах разработчика.

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

Для получения общего представления об использовании API инструментов разработчика см. раздел «Краткое описание API инструментов разработчика».

Доступность

Chrome 105+

Понятия и применение

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

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

name , присвоенное расширением, отображается в меню «Экспорт» на панели «Запись» .

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

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

Настройка кнопки повтора

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

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

Примеры

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

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

Плагин воспроизведения

Приведённый ниже код реализует плагин расширения, который создаёт фиктивное представление записи и отображает его при запросе на воспроизведение:

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

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

Характеристики

  • повтор

    пустота

    Chrome 112+

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

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

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

    • запись

      объект

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

  • строковый

    пустота

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

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

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

    • запись

      объект

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

  • stringifyStep

    пустота

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

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

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

    • шаг

      объект

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

RecorderView

Chrome 112+

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

Характеристики

  • onHidden

    Событие<functionvoidvoid>

    Срабатывает, когда обзор скрыт.

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

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

    • перезвонить

      функция

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

      () => void

  • onShown

    Событие<functionvoidvoid>

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

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

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

    • перезвонить

      функция

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

      () => void

  • показывать

    пустота

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

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

    () => {...}

Методы

createView()

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

Создает представление, способное обрабатывать воспроизведение. Это представление будет встроено в панель записи.

Параметры

  • заголовок

    нить

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

  • pagePath

    нить

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

Возвраты

registerRecorderExtensionPlugin()

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

Регистрирует плагин расширения для записи экрана.

Параметры

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

  • имя

    нить

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

  • медиаТип

    нить

    Тип носителя строкового содержимого, создаваемого плагином.