browser.devtools.recorder

Opis

Użyj interfejsu chrome.devtools.recorder API, aby dostosować panel Rejestrator 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 instancji wtyczki, name i mediaType jako parametrów. 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.

Dostosowywanie przycisku odpowiedzi

Aby dostosować przycisk odtwarzania w Dyktafonie, 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.

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 browser.devtools.recorder.createView.

Przykłady

Wtyczka eksportu

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

browser.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 po otrzymaniu żądania odtworzenia:

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

Pełny przykład rozszerzenia znajdziesz w 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 tekstowy.

    Funkcja stringify wygląda tak:

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

  • stringifyStep

    pusty,

    Przekształca krok nagrania z panelu Dyktafon 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ł

    tekst

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

  • 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 mediów ciągu tekstowego generowanego przez wtyczkę.