chrome.devtools.recorder

설명

chrome.devtools.recorder API를 사용하여 DevTools에서 Recorder 패널을 맞춤설정합니다.

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

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

가용성

Chrome 105 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

개념 및 사용법

내보내기 기능 맞춤설정

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

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

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

mediaType 매개변수를 사용하면 확장 프로그램이 stringifystringifyStep 함수 예를 들어 결과가 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에서 전체 확장 프로그램 예를 찾아보세요.

유형

RecorderExtensionPlugin

녹음기 패널을 맞춤설정하기 위해 녹음기 패널에서 호출하는 플러그인 인터페이스입니다.

속성

  • 다시보기

    void

    Chrome 112 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    확장 프로그램이 맞춤 재생 기능을 구현하도록 허용합니다.

    replay 함수는 다음과 같습니다.

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

    • 녹화

      객체

      사용자와 페이지 간의 상호작용을 녹화한 것입니다. 이는 Puppeteer의 녹음 스키마와 일치해야 합니다.

  • 문자열화

    void

    녹음기 패널 형식의 녹음 파일을 문자열로 변환합니다.

    stringify 함수는 다음과 같습니다.

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

    • 녹화

      객체

      사용자와 페이지 간의 상호작용을 녹화한 것입니다. 이는 Puppeteer의 녹음 스키마와 일치해야 합니다.

  • stringifyStep

    void

    녹음기 패널 형식의 녹음 단계를 문자열로 변환합니다.

    stringifyStep 함수는 다음과 같습니다.

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

    • 단계

      객체

      사용자와 페이지의 상호작용을 기록하는 단계입니다. 이는 Puppeteer의 단계 스키마와 일치해야 합니다.

RecorderView

Chrome 112 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

Recorder 패널 내에 삽입될 확장 프로그램으로 생성된 뷰를 나타냅니다.

속성

  • onHidden

    이벤트<functionvoid>

    뷰가 숨겨지면 실행됩니다.

    onHidden.addListener 함수는 다음과 같습니다.

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

    • 콜백

      함수

      callback 매개변수는 다음과 같습니다.

      () => void

  • onShown

    이벤트<functionvoid>

    뷰가 표시될 때 실행됩니다.

    onShown.addListener 함수는 다음과 같습니다.

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

    • 콜백

      함수

      callback 매개변수는 다음과 같습니다.

      () => void

  • 표시

    void

    확장 프로그램이 Recorder 패널에 이 뷰를 표시하려고 함을 나타냅니다.

    show 함수는 다음과 같습니다.

    () => {...}

메서드

createView()

Chrome 112 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

재생을 처리할 수 있는 뷰를 만듭니다. 이 뷰는 Recorder 패널 내에 삽입됩니다.

매개변수

  • 제목

    문자열

    개발자 도구 툴바의 확장 프로그램 아이콘 옆에 표시되는 제목

  • pagePath

    문자열

    확장 프로그램 디렉터리를 기준으로 한 패널의 HTML 페이지 경로입니다.

반환 값

registerRecorderExtensionPlugin()

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

녹음기 확장 프로그램 플러그인을 등록합니다.

매개변수

  • RecorderExtensionPlugin 인터페이스를 구현하는 인스턴스

  • 이름

    문자열

    플러그인의 이름입니다.

  • mediaType

    문자열

    플러그인이 생성하는 문자열 콘텐츠의 미디어 유형입니다.