Opis
Panel Dyktafon w Narzędziach deweloperskich możesz dostosować za pomocą interfejsu API chrome.devtools.recorder
.
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ść
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:
stringify
, który otrzymuje całe nagranie przepływu użytkownikastringifyStep
, 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.
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 nowszejZezwala rozszerzeniu na implementowanie funkcji niestandardowego ponownego odtwarzania.
Funkcja
replay
wygląda tak:(recording: object) => {...}
.-
nagrywanie
Obiekt
Nagranie interakcji użytkownika ze stroną. Powinien być zgodny ze schematem rejestrowania Puppeteer.
-
-
stringify
nieważne
Konwertuje nagranie z formatu panelu Dyktafon na ciąg znaków.
Funkcja
stringify
wygląda tak:(recording: object) => {...}
.-
nagrywanie
Obiekt
Nagranie interakcji użytkownika ze stroną. Powinien być zgodny ze schematem rejestrowania Puppeteer.
-
-
stringifyStep
nieważne
Konwertuje krok nagrania z formatu panelu Dyktafon na ciąg znaków.
Funkcja
stringifyStep
wygląda tak:(step: object) => {...}
.-
kroku
Obiekt
Etap rejestracji interakcji użytkownika ze stroną. Powinien pasować do schematu kroków Puppeteer.
-
RecorderView
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.devtools.recorder.createView(
title: string,
pagePath: string,
)
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,
)
Rejestruje wtyczkę rozszerzenia Dyktafon.
Parametry
-
wtyczka
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ę.