chrome.devtools.recorder

설명

devtools.recorder API는 Chrome DevTools에서 Recorder 패널을 확장할 수 있는 미리보기 기능입니다.

Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약을 참조하세요.

가용성

개념 및 사용법

내보내기 기능 맞춤설정

확장 프로그램 플러그인을 등록하려면 registerRecorderExtensionPlugin 함수를 사용합니다. 이 함수에는 플러그인 인스턴스, name 및 mediaType가 매개변수로 필요합니다. 플러그인 인스턴스는 stringify 및 stringifyStep, 두 가지 메서드를 구현해야 합니다.

확장 프로그램에서 제공하는 name는 Recorder 패널의 Export 메뉴에 표시됩니다.

내보내기 컨텍스트에 따라, 사용자가 확장 프로그램에서 제공하는 내보내기 옵션을 클릭하면 Recorder 패널은 다음 두 함수 중 하나를 호출합니다.

• 전체 사용자 흐름 기록을 수신하는 stringify
• 기록된 단일 단계를 수신하는 stringifyStep

mediaType 매개변수를 사용하면 확장 프로그램이 stringify 및 stringifyStep 함수 예를 들어 결과가 JavaScript인 경우 application/javascript입니다. 있습니다.

다시 재생 버튼 맞춤설정

Recorder에서 재생 버튼을 맞춤설정하려면 registerRecorderExtensionPlugin 함수를 사용합니다. 맞춤설정이 적용되려면 플러그인에서 replay 메서드를 구현해야 합니다. 메서드가 감지되면 Recorder에 재생 버튼이 표시됩니다. 버튼을 클릭하면 현재 녹음 객체가 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' ); 

Replay 플러그인

다음 코드는 더미 녹음기 뷰를 만들고 재생 요청 시 표시하는 확장 프로그램 플러그인을 구현합니다.

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,
): RecorderView

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