설명
chrome.devtools.recorder
API를 사용하여 DevTools의 Recorder 패널을 맞춤설정합니다.
지원 대상
Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약을 참조하세요.
개요
devtools.recorder
API는 Chrome DevTools에서 Recorder 패널을 확장할 수 있는 미리보기 기능입니다.
Chrome M105부터 내보내기 기능을 확장할 수 있습니다. Chrome M112부터 다시 재생 버튼을 확장할 수 있습니다.
내보내기 기능 맞춤설정
확장 프로그램 플러그인을 등록하려면 registerRecorderExtensionPlugin
함수를 사용합니다. 이 함수에는 플러그인 인스턴스 name
와 mediaType
가 매개변수로 필요합니다. 플러그인 인스턴스는 stringify
와 stringifyStep
라는 두 가지 메서드를 구현해야 합니다.
확장 프로그램에서 제공한 name
는 Recorder 패널의 Export 메뉴에 표시됩니다.
내보내기 컨텍스트에 따라 사용자가 확장 프로그램에서 제공하는 내보내기 옵션을 클릭하면 Recorder 패널이 다음 두 함수 중 하나를 호출합니다.
- 전체 사용자 플로우 기록을 수신하는
stringify
- 기록된 단일 단계를 수신하는
stringifyStep
mediaType
매개변수를 사용하면 확장 프로그램이 stringify
및 stringifyStep
함수를 사용하여 생성하는 출력 종류를 지정할 수 있습니다. 예를 들어 결과가 자바스크립트 프로그램이면 application/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
를 호출합니다.
재생 플러그인 예
다음 코드는 더미 녹음기 뷰를 만들고 재생 요청 시 표시하는 확장 프로그램 플러그인을 구현합니다.
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
Recorder 패널에서 Recorder 패널을 맞춤설정하기 위해 호출하는 플러그인 인터페이스입니다.
속성
-
다시보기
void
Chrome 112 이상확장 프로그램이 맞춤 재생 기능을 구현할 수 있도록 합니다.
replay
함수는 다음과 같습니다.(recording: object) => {...}
-
녹음
객체
페이지와 사용자의 상호작용을 기록한 것입니다. Puppeteer의 녹음 스키마와 일치해야 합니다.
-
-
문자열화
void
녹음기 패널 형식의 녹음 파일을 문자열로 변환합니다.
stringify
함수는 다음과 같습니다.(recording: object) => {...}
-
녹음
객체
페이지와 사용자의 상호작용을 기록한 것입니다. Puppeteer의 녹음 스키마와 일치해야 합니다.
-
-
stringifyStep
void
녹음기 패널 형식의 녹음 단계를 문자열로 변환합니다.
stringifyStep
함수는 다음과 같습니다.(step: object) => {...}
-
단계
객체
사용자와 페이지의 상호작용을 기록하는 단계입니다. Puppeteer의 단계 스키마와 일치해야 합니다.
-
RecorderView
Recorder 패널 내에 삽입할 확장 프로그램에서 만든 뷰를 나타냅니다.
속성
-
onHidden
이벤트<functionvoid>
뷰가 숨겨지면 실행됩니다.
onHidden.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
기능
callback
매개변수는 다음과 같습니다.() => void
-
-
onShown
이벤트<functionvoid>
뷰가 표시되면 시작됩니다.
onShown.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
기능
callback
매개변수는 다음과 같습니다.() => void
-
-
표시
void
확장 프로그램이 Recorder 패널에 이 뷰를 표시하려고 함을 나타냅니다.
show
함수는 다음과 같습니다.() => {...}
방법
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
재생을 처리할 수 있는 뷰를 만듭니다. 이 뷰는 Recorder 패널 내에 삽입됩니다.
매개변수
-
title
string
개발자 도구 툴바의 확장 프로그램 아이콘 옆에 표시되는 제목
-
pagePath
string
확장 프로그램 디렉터리를 기준으로 한 패널의 HTML 페이지 경로입니다.
반환 값
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
녹음기 확장 프로그램 플러그인을 등록합니다.
매개변수
-
plugin
RecorderExtensionPlugin 인터페이스를 구현하는 인스턴스입니다.
-
이름
string
플러그인의 이름입니다.
-
mediaType
string
플러그인이 생성하는 문자열 콘텐츠의 미디어 유형입니다.