chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Opis

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

Dostępność

Chrome 105 lub nowsza

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

Przegląd

devtools.recorder API to funkcja w wersji zapoznawczej, która umożliwia rozszerzenie panelu Rejestrator w Narzędziach deweloperskich w Chrome. Od Chrome M105 możesz rozszerzyć funkcję eksportowania. Od 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ępniony przez rozszerzenie pojawi się w menu Eksportuj w panelu Rejestrator.

W zależności od kontekstu eksportu, gdy użytkownik kliknie opcję eksportu udostępnioną przez rozszerzenie, panel Rejestrator wywoła 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 w JavaScript.

Przykład wtyczki eksportującej

Poniższy kod implementuje wtyczkę rozszerzenia, która przekształca nagranie w ciąg znaków 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 odtwarzania w Dyktafonie, użyj funkcji registerRecorderExtensionPlugin. Aby dostosowywanie 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ć ikonę RecorderView, aby obsłużyć ponowne odtworzenie, lub użyć innych interfejsów API rozszerzenia do przetworzenia żądania ponownego odtworzenia. Aby utworzyć nowy RecorderView, wywołaj chrome.devtools.recorder.createView.

Przykład wtyczki do odtwarzania

Poniższy kod implementuje wtyczkę rozszerzenia, która tworzy widok fikcyjnego Dyktafonu i wyświetla go po otrzymaniu żądania 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, który panel Rejestrator wywołuje w celu dostosowania panelu Rejestrator.

Właściwości

  • odtwórz ponownie

    pusty

    Chrome 112 lub nowsza

    Umożliwia rozszerzeniu implementowanie niestandardowych funkcji odtwarzania.

    Funkcja replay wygląda tak:

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

  • stringify

    pusty

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

    Funkcja stringify wygląda tak:

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

  • stringifyStep

    pusty

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

    Funkcja stringifyStep wygląda tak:

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

RecorderView

Chrome 112 lub nowsza

Reprezentuje widok utworzony przez rozszerzenie, który ma być umieszczony w panelu Rejestrator.

Właściwości

  • onHidden

    Event<functionvoidvoid>

    Wywoływane, 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ż

    pusty

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

    Funkcja show wygląda tak:

    () => {...}

Metody

createView()

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

Tworzy widok, który może obsługiwać odtwarzanie. Ten widok będzie osadzony w panelu Rejestrator.

Parametry

  • tytuł

    tekst

    Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzia deweloperskie.

  • pagePath

    tekst

    Ścieżka do 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 MIME treści tekstowej generowanej przez wtyczkę.