chrome.devtools.recorder

Opis

Za pomocą interfejsu API chrome.devtools.recorder możesz dostosować panel Dyktafon w Narzędziach deweloperskich.

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

Zapoznaj się z podsumowaniem interfejsów API Narzędzi deweloperskich, aby uzyskać ogólne wprowadzenie do korzystania z interfejsów API narzędzi dla programistów.

Dostępność

Chrome w wersji 105 lub nowszej .

Pojęcia i wykorzystanie

Dostosowywanie funkcji eksportowania

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

Komponent name udostępniany przez rozszerzenie pojawi się w menu Eksportuj w panelu Dyktafon.

W zależności od kontekstu eksportu, gdy użytkownik kliknie opcję eksportu dostępną w rozszerzeniu, panel Dyktafon wywołuje jedną z 2 funkcji:

Parametr mediaType pozwala rozszerzeniu określić rodzaj danych wyjściowych, które generuje z parametrem funkcji stringify i stringifyStep. np. application/javascript, jeśli wynikiem jest skrypt JavaScript; programu.

Dostosowywanie przycisku ponownego odtwarzania

Aby dostosować przycisk ponownego odtwarzania w Dyktafonie, użyj funkcji registerRecorderExtensionPlugin. Wtyczka musi implementować metodę replay, aby dostosowanie zadziałało. Jeśli metoda zostanie wykryta, w Dyktafonie pojawi się przycisk ponownego odtwarzania. Po kliknięciu przycisku bieżący obiekt rejestracji zostanie przekazany jako pierwszy argument do metody replay.

W tym momencie rozszerzenie może wyświetlać RecorderView w celu obsługi ponownego odtwarzania lub używać innych interfejsów API rozszerzenia do przetworzenia żądania ponownego odtwarzania. Aby utworzyć nowy obiekt RecorderView, wywołaj chrome.devtools.recorder.createView.

Przykłady

Eksportuj wtyczkę

Ten kod implementuje wtyczkę rozszerzenia, która dodaje ciąg znaków do nagrania 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'
);

Wtyczka Replay

Poniższy kod implementuje wtyczkę rozszerzenia, która tworzy fikcyjny widok Dyktafonu i wyświetla go w odpowiedzi na żądanie ponownego odtwarzania:

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 wywołuje panel Dyktafonu w celu dostosowania panelu Dyktafonu.

Właściwości

  • odtwórz ponownie

    nieważne

    Chrome w wersji 112 lub nowszej .

    Zezwala rozszerzeniu na implementowanie funkcji niestandardowego ponownego odtwarzania.

    Funkcja replay wygląda tak: 

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

  • stringify

    nieważne

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

    Funkcja stringify wygląda tak: 

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

  • stringifyStep

    nieważne

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

    Funkcja stringifyStep wygląda tak: 

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

RecorderView

Chrome w wersji 112 lub nowszej .

Reprezentuje widok utworzony przez rozszerzenie do umieszczenia w panelu Dyktafonu.

Właściwości

  • onHidden

    Zdarzenie<functionvoid>

    Uruchamiane, gdy widok jest ukryty.

    Funkcja onHidden.addListener wygląda tak: 

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      () => void

  • onShown

    Zdarzenie<functionvoid>

    Uruchamiane po wyświetleniu widoku.

    Funkcja onShown.addListener wygląda tak: 

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      () => void

  • pokaż

    nieważne

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

    Funkcja show wygląda tak: 

    () => {...}

Metody

createView()

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

Tworzy widok, który może obsługiwać ponowne odtwarzanie. Ten widok zostanie umieszczony w panelu Dyktafonu.

Parametry

  • tytuł

    ciąg znaków

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

  • pagePath

    ciąg znaków

    Ś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 Dyktafon.

Parametry

  • Instancja z implementacją interfejsu RecorderExtensionPlugin.

  • nazwa

    ciąg znaków

    Nazwa wtyczki.

  • mediaType

    ciąg znaków

    Typ nośnika treści ciągu tekstowego generowanego przez wtyczkę.