chrome.devtools.recorder

Описание

Используйте API chrome.devtools.recorder для настройки панели «Рекордер» в DevTools.

devtools.recorder API — это функция предварительной версии, которая позволяет расширить панель «Рекордер» в Chrome DevTools.

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

Доступность

Хром 105+

Концепции и использование

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

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

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

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

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

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

Чтобы настроить кнопку воспроизведения в Recorder , используйте функцию 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'
);

Плагин повтора

Следующий код реализует плагин расширения, который создает фиктивное представление 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

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

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

  • переиграть

    пустота

    Хром 112+

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

    Функция replay выглядит так: 

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

    • запись

      объект

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

  • строкировать

    пустота

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

    Функция stringify выглядит так: 

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

    • запись

      объект

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

  • stringifyStep

    пустота

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

    Функция stringifyStep выглядит так: 

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

    • шаг

      объект

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

RecorderView

Хром 112+

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

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

  • onHidden

    Событие<functionvoidvoid>

    Вызывается, когда представление скрыто.

    Функция onHidden.addListener выглядит так: 

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

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

      функция

      Параметр callback выглядит так: 

      () => void

  • onShown

    Событие<functionvoidvoid>

    Вызывается, когда отображается представление.

    Функция onShown.addListener выглядит так: 

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

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

      функция

      Параметр callback выглядит так: 

      () => void

  • показывать

    пустота

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

    Функция show выглядит так: 

    () => {...}

Методы

createView()

Хром 112+
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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

Параметры

  • заголовок

    нить

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

  • PagePath

    нить

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

Возврат

registerRecorderExtensionPlugin()

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

Регистрирует плагин расширения Recorder.

Параметры

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

  • имя

    нить

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

  • медиатип

    нить

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