chrome.devtools.recorder

Описание

Доступность

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

Обзор

devtools.recorder API — это функция предварительной версии, которая позволяет расширить панель «Рекордер» в Chrome DevTools. Начиная с 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'
);

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

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

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

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

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

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

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