chrome.devtools.recorder

Opis

Dostępność

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.

Omówienie

devtools.recorder API to funkcja w wersji testowej, która umożliwia rozszerzenie panelu Dyktafon w Narzędziach deweloperskich w Chrome. Od Chrome M105 można rozszerzać funkcję eksportowania. W Chrome M112 możesz wydłużyć czas odtwarzania przycisku ponownego odtwarzania.

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:

• stringify, który otrzymuje całe nagranie przepływu użytkownika
• stringifyStep, które otrzymały jeden zarejestrowany krok

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.

Przykład wtyczki do eksportowania

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

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ład wtyczki 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.

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

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