chrome.devtools.recorder

Opis

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

devtools.recorder API to funkcja w wersji zapoznawczej, która umożliwia rozszerzenie panelu Rejestrator w Narzędziach deweloperskich w Chrome.

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

Dostępność

Chrome 105 lub nowsza

Pojęcia i zastosowanie

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 tych 2 funkcji:

Parametr mediaType umożliwia rozszerzeniu określenie rodzaju danych wyjściowych generowanych przez funkcje stringify i stringifyStep. Na przykład application/javascript jeśli wynikiem jest program w JavaScript.

Dostosowywanie przycisku odpowiedzi

Aby dostosować przycisk odtwarzania w Dyktafonie, użyj funkcji registerRecorderExtensionPlugin. Aby dostosowywanie było możliwe, 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.

Na tym etapie rozszerzenie może wyświetlić RecorderView, aby obsłużyć odtwarzanie, lub użyć innych interfejsów API rozszerzenia do przetworzenia żądania odtwarzania. Aby utworzyć nowy RecorderView, wywołaj chrome.devtools.recorder.createView.

Przykłady

Eksportuj wtyczkę

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

Wtyczka powtórki

Poniższy kod implementuje wtyczkę rozszerzenia, która tworzy widok fikcyjnego Dyktafonu i wyświetla go na żądanie 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 w GitHubie.

Typy

RecorderExtensionPlugin

Interfejs wtyczki, który panel Dyktafonu wywołuje w celu dostosowania panelu Dyktafonu.

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 tekstowy.

    Funkcja stringify wygląda tak:

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

  • stringifyStep

    pusty

    Przekształca krok nagrania z panelu Dyktafonu w ciąg tekstowy.

    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>

    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 zostanie wyświetlony.

    Funkcja onShown.addListener wygląda tak:

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

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • pokaż

    pusty

    Oznacza, ż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ł

    ciąg znaków

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

  • pagePath

    ciąg znaków

    Ś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

    ciąg znaków

    Nazwa wtyczki.

  • mediaType

    ciąg znaków

    Typ mediów treści tekstowych generowanych przez wtyczkę.