Açıklama
Geliştirici Araçları'nda Kaydedici panelini özelleştirmek için chrome.devtools.recorder
API'sini kullanın.
devtools.recorder
API, Chrome Geliştirici Araçları'ndaki Kaydedici panelini genişletmenize olanak tanıyan bir önizleme özelliğidir.
Geliştirici Araçları API'lerinin kullanımına genel bir giriş için DevTools API'leri özetine bakın.
Kullanılabilirlik
Kavramlar ve kullanım
Dışa aktarma özelliğini özelleştirme
Bir uzantı eklentisi kaydetmek için registerRecorderExtensionPlugin
işlevini kullanın. Bu işlev, parametre olarak bir eklenti örneği ve bir name
ve mediaType
gerektirir. Eklenti örneği iki yöntem uygulamalıdır: stringify
ve stringifyStep
.
Uzantı tarafından sağlanan name
, Kaydedici panelindeki Dışa Aktar menüsünde görünür.
Dışa aktarma bağlamına bağlı olarak, kullanıcı, uzantı tarafından sağlanan dışa aktarma seçeneğini tıkladığında Kaydedici paneli iki işlevden birini çağırır:
- Kullanıcı işlemleri akışı kaydının tamamını alan
stringify
- Kaydedilen tek bir adım alan
stringifyStep
mediaType
parametresi, uzantının stringify
ve stringifyStep
işlevleriyle oluşturduğu çıkış türünü belirtmesine olanak tanır. Örneğin, sonuç bir JavaScript programıysa application/javascript
.
Tekrar oynat düğmesini özelleştirme
Kaydedici'deki tekrar oynat düğmesini özelleştirmek için registerRecorderExtensionPlugin
işlevini kullanın. Özelleştirmenin geçerli olması için eklentinin replay
yöntemini uygulaması gerekir.
Yöntem algılanırsa Kaydedici'de bir tekrar oynat düğmesi görünür.
Düğme tıklandığında mevcut kayıt nesnesi, replay
yöntemine ilk bağımsız değişken olarak aktarılır.
Bu noktada uzantı, tekrar oynatmayı işlemek için bir RecorderView
gösterebilir veya tekrar oynatma isteğini işlemek için diğer uzantı API'lerini kullanabilir. Yeni bir RecorderView
oluşturmak için chrome.devtools.recorder.createView
yöntemini çağırın.
Örnekler
Eklentiyi dışa aktar
Aşağıdaki kod, JSON.stringify
kullanarak bir kaydı dizeleyen bir uzantı eklentisi uygular:
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'
);
Replay eklentisi
Aşağıdaki kod, model bir Kaydedici görünümü oluşturan bir uzantı eklentisi uygular ve eklentiyi yeniden oynatma isteği üzerine görüntüler:
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'
);
GitHub'da eksiksiz bir uzantı örneği bulabilirsiniz.
Türler
RecorderExtensionPlugin
Kaydedici panelinin Kaydedici panelini özelleştirmek için çağırdığı eklenti arayüzü.
Özellikler
-
yeniden oynat
void
Chrome 112 ve sonraki sürümlerUzantının, özel tekrar oynatma işlevi uygulamasına olanak tanır.
replay
işlevi şu şekilde görünür:(recording: object) => {...}
-
kayıt
nesne
Kullanıcının sayfayla etkileşiminin kaydı. Bu değer, Kuklacının kayıt şemasıyla eşleşmelidir.
-
-
dizelemek
void
Kaydedici panel biçimindeki bir kaydı dizeye dönüştürür.
stringify
işlevi şu şekilde görünür:(recording: object) => {...}
-
kayıt
nesne
Kullanıcının sayfayla etkileşiminin kaydı. Bu değer, Kuklacının kayıt şemasıyla eşleşmelidir.
-
-
stringifyStep
void
Kaydın bir adımını Kaydedici panel biçiminden dizeye dönüştürür.
stringifyStep
işlevi şu şekilde görünür:(step: object) => {...}
-
step
nesne
Kullanıcının sayfayla etkileşimini kaydetme adımı. Bu, Kuklacı'nın adım şemasıyla eşleşmelidir.
-
RecorderView
Kaydedici paneline yerleştirilecek, uzantı tarafından oluşturulan bir görünümü temsil eder.
Özellikler
-
onHidden
Etkinlik<functionvoidvoid>
Görünüm gizlendiğinde tetiklenir.
onHidden.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
onShown
Etkinlik<functionvoidvoid>
Görünüm gösterildiğinde tetiklenir.
onShown.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
göster
void
Uzantının, Kaydedici panelinde bu görünümü göstermek istediğini belirtir.
show
işlevi şu şekilde görünür:() => {...}
Yöntemler
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Tekrar oynatmayı işleyebilecek bir görünüm oluşturur. Bu görünüm, Kaydedici bölmesine yerleştirilir.
Parametreler
-
title
dize
Geliştirici Araçları araç çubuğundaki uzantı simgesinin yanında görüntülenen başlık.
-
pagePath
dize
Uzantı dizinine göre panelin HTML sayfasının yolu.
İlerlemeler
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Kaydedici uzantı eklentisi kaydeder.
Parametreler
-
plugin
RecorderExtensionExtensionin arayüzünü uygulayan bir örnek.
-
ad
dize
Eklentinin adı.
-
mediaType
dize
Eklentinin oluşturduğu dize içeriğinin medya türü.