Описание
Используйте API chrome.devtools.recorder
для настройки панели «Рекордер» в DevTools.
devtools.recorder
API — это функция предварительной версии, которая позволяет расширить панель «Рекордер» в Chrome DevTools.
Общие сведения об использовании API инструментов инструментов разработчика см. в обзоре API-интерфейсов DevTools .
Доступность
Концепции и использование
Настройка функции экспорта
Чтобы зарегистрировать плагин расширения, используйте функцию registerRecorderExtensionPlugin
. Эта функция требует экземпляр плагина, name
и mediaType
в качестве параметров. Экземпляр плагина должен реализовать два метода: stringify
и stringifyStep
.
name
, предоставленное расширением, отображается в меню «Экспорт» на панели «Рекордер» .
В зависимости от контекста экспорта, когда пользователь щелкает опцию экспорта, предоставляемую расширением, панель «Рекордер» вызывает одну из двух функций:
-
stringify
, который получает всю запись пользовательского потока -
stringifyStep
, который получает один записанный шаг
Параметр 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
Представляет представление, созданное расширением для встраивания в панель «Рекордер».
Характеристики
- onHidden
Событие<functionvoidvoid>
Вызывается, когда представление скрыто.
Функция
onHidden.addListener
выглядит так:(callback: function) => {...}
- перезвонить
функция
Параметр
callback
выглядит так:() => void
- onПоказано
Событие<functionvoidvoid>
Вызывается, когда отображается представление.
Функция
onShown.addListener
выглядит так:(callback: function) => {...}
- перезвонить
функция
Параметр
callback
выглядит так:() => void
- показывать
пустота
Указывает, что расширение хочет отобразить это представление на панели «Рекордер».
Функция
show
выглядит так:() => {...}
Методы
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Создает представление, которое может обрабатывать воспроизведение. Это представление будет встроено в панель «Рекордер».
Параметры
- заголовок
нить
Заголовок, который отображается рядом со значком расширения на панели инструментов разработчика.
- PagePath
нить
Путь к HTML-странице панели относительно каталога расширения.
Возврат
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Регистрирует плагин расширения Recorder.
Параметры
- плагин
Экземпляр, реализующий интерфейс RecorderExtensionPlugin.
- имя
нить
Название плагина.
- медиатип
нить
Тип носителя строкового содержимого, создаваемого плагином.