chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Opis

Użyj interfejsu API chrome.devtools.recorder, aby dostosować panel Dyktafon w Narzędziach deweloperskich.

Dostępność

Chrome 105 lub nowsza wersja

Ogólne wprowadzenie do korzystania z interfejsów API Narzędzi deweloperskich znajdziesz w podsumowaniu interfejsów API Narzędzi deweloperskich.

Przegląd

Interfejs API devtools.recorder to funkcja w wersji testowej, która umożliwia rozszerzenie panelu Rejestrator w Narzędziach deweloperskich w Chrome. Od wersji Chrome M105 możesz rozszerzyć funkcję eksportowania. Od wersji Chrome M112 możesz rozszerzyć przycisk ponownego odtwarzania.

Dostosowywanie funkcji eksportu

Aby zarejestrować wtyczkę rozszerzenia, użyj funkcji registerRecorderExtensionPlugin. Ta funkcja wymaga jako parametrów instancji wtyczki, name i mediaType. Instancja wtyczki musi implementować 2 metody: stringify i stringifyStep.

name udostępniany przez rozszerzenie pojawia się w menu Eksportuj w panelu Rejestrator.

W zależności od kontekstu eksportu, gdy użytkownik kliknie opcję eksportu udostępnianą przez rozszerzenie, panel Rejestrator wywołuje jedną z 2 funkcji:

Parametr mediaType umożliwia rozszerzeniu określenie rodzaju danych wyjściowych generowanych za pomocą funkcji stringify i stringifyStep. Na przykład application/javascript, jeśli wynikiem jest program JavaScript.

Przykład wtyczki do eksportowania

Poniższy kod implementuje wtyczkę rozszerzenia, która przekształca nagranie w ciąg tekstowy za pomocą 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'
);

Dostosowywanie przycisku ponownego odtwarzania

Aby dostosować przycisk powtórki w Rejestratorze, użyj funkcji registerRecorderExtensionPlugin. Aby dostosowanie zaczęło obowiązywać, wtyczka musi implementować metodę replay. Jeśli metoda zostanie wykryta, w Rejestratorze pojawi się przycisk odtwarzania. Po kliknięciu przycisku bieżący obiekt nagrania zostanie przekazany jako pierwszy argument do metody replay.

W tym momencie rozszerzenie może wyświetlić RecorderView, aby obsłużyć powtórkę, lub użyć innych interfejsów API rozszerzeń do przetworzenia żądania powtórki. Aby utworzyć nowy element RecorderView, wywołaj chrome.devtools.recorder.createView.

Przykład wtyczki RePlay

Poniższy kod implementuje wtyczkę rozszerzenia, która tworzy fikcyjny widok Dyktafonu i wyświetla go po żądaniu odtworzenia:

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'
);

Pełny przykład rozszerzenia znajdziesz na GitHubie.

Typy

RecorderExtensionPlugin

Interfejs wtyczki wywoływany przez panel Dyktafon w celu dostosowania tego panelu.

Właściwości

  • odtwórz ponownie

    unieważnienie,

    Chrome 112 lub nowsza wersja

    Umożliwia rozszerzeniu implementację niestandardowej funkcji odtwarzania.

    Funkcja replay wygląda tak:

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

  • stringify

    unieważnienie,

    Konwertuje nagranie z formatu panelu Rejestrator na ciąg znaków.

    Funkcja stringify wygląda tak:

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

  • stringifyStep

    unieważnienie,

    Konwertuje krok nagrania z formatu panelu Rejestrator na ciąg znaków.

    Funkcja stringifyStep wygląda tak:

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

RecorderView

Chrome 112 lub nowsza wersja

Reprezentuje widok utworzony przez rozszerzenie, który ma zostać umieszczony w panelu Dyktafonu.

Właściwości

  • onHidden

    Event<functionvoidvoid>

    Uruchamiane, gdy widok jest ukryty.

    Funkcja onHidden.addListener wygląda tak:

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

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • onShown

    Event<functionvoidvoid>

    Uruchamiane, gdy widok jest wyświetlany.

    Funkcja onShown.addListener wygląda tak:

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

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • pokaż

    unieważnienie,

    Wskazuje, że rozszerzenie chce wyświetlić ten widok w panelu Dyktafonu.

    Funkcja show wygląda tak:

    () => {...}

Metody

createView()

Chrome 112 lub nowsza wersja 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Tworzy widok, który może obsługiwać powtórkę. Ten widok zostanie umieszczony w panelu Dyktafon.

Parametry

  • tytuł

    tekst

    Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzia dla programistów.

  • pagePath

    tekst

    Ścieżka strony HTML panelu względem katalogu rozszerzenia.

Zwroty

registerRecorderExtensionPlugin()

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

Rejestruje wtyczkę rozszerzenia Dyktafonu.

Parametry

  • Instancja implementująca interfejs RecorderExtensionPlugin.

  • nazwa

    tekst

    Nazwa wtyczki.

  • mediaType

    tekst

    Typ multimediów treści ciągu znaków, które generuje wtyczka.