chrome.devtools.recorder

Opis

Panel Dyktafonu w Narzędziach deweloperskich możesz dostosować za pomocą interfejsu chrome.devtools.recorder API.

devtools.recorder API to funkcja w wersji testowej, która pozwala rozszerzyć panel Dyktafonu w narzędziach deweloperskich w Chrome.

Zobacz podsumowanie interfejsów API DevTools, aby uzyskać ogólne informacje o korzystaniu z interfejsów API Narzędzi dla programistów.

Dostępność

Chrome 105 i nowsze wersje

Pojęcia i zastosowanie

Dostosowywanie funkcji eksportu

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.

Ciąg name dostarczony 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 Rejestrator wywoła jedną z tych 2 funkcji:

Parametr mediaType pozwala rozszerzeniu określić rodzaj danych wyjściowych generowanych przez funkcje stringify i stringifyStep. np. application/javascript, jeśli wynik to program JavaScript.

Dostosowywanie przycisku ponownego odtwarzania

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

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

Przykłady

Eksportuj wtyczkę

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

Odtwórz wtyczkę ponownie

Ten kod implementuje wtyczkę rozszerzenia, która tworzy fikcyjny widok Dyktafonu i wyświetla go przy żądaniu ponownego 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'
);

Znajdź pełny przykład rozszerzenia na GitHubie.

Typy

RecorderExtensionPlugin

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

Właściwości

  • odtwórz ponownie

    void

    Chrome 112 i nowsze wersje

    Zezwala rozszerzeniu na implementację niestandardowej funkcji ponownego odtwarzania.

    Funkcja replay wygląda tak: 

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

  • sprecyzuj

    void

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

    Funkcja stringify wygląda tak: 

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

  • stringifyStep

    void

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

    Funkcja stringifyStep wygląda tak: 

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

RecorderView

Chrome 112 i nowsze wersje

Reprezentuje widok utworzony przez rozszerzenie, który można umieścić w panelu Dyktafonu.

Właściwości

  • onHidden

    Zdarzenie<functionvoidvoid>

    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<functionvoidvoid>

    Uruchamiane po wyświetleniu widoku.

    Funkcja onShown.addListener wygląda tak: 

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      ()=>void

  • pokaż

    void

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

    Funkcja show wygląda tak: 

    ()=> {...}

Metody

createView()

Chrome 112 i nowsze wersje 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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

Parametry

  • title

    string,

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

  • pagePath

    string,

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

Akcje powrotne

registerRecorderExtensionPlugin()

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

Rejestruje wtyczkę rozszerzenia Dyktafon.

Parametry

  • Instancja z implementacją interfejsu RecorderExtensionPlugin.

  • nazwa

    string,

    Nazwa wtyczki.

  • mediaType

    string,

    Typ mediów ciągu tekstowego wygenerowanego przez wtyczkę.