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ść
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:
stringify
, który odbiera całe nagranie przepływu użytkownikówstringifyStep
, który otrzymuje pojedynczy zarejestrowany krok
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 wersjeZezwala rozszerzeniu na implementację niestandardowej funkcji ponownego odtwarzania.
Funkcja
replay
wygląda tak:(recording: object) => {...}
-
nagrywanie
obiekt
Nagranie interakcji użytkownika ze stroną. Powinien pasować do schematu nagrywania Puppeteer.
-
-
sprecyzuj
void
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 pasować do schematu nagrywania Puppeteer.
-
-
stringifyStep
void
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 on być zgodny ze schematem kroków Puppeteer.
-
RecorderView
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.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
-
plugin
Instancja z implementacją interfejsu RecorderExtensionPlugin.
-
nazwa
string,
Nazwa wtyczki.
-
mediaType
string,
Typ mediów ciągu tekstowego wygenerowanego przez wtyczkę.