Deskripsi
Gunakan chrome.devtools.recorder
API untuk menyesuaikan panel Perekam Suara di DevTools.
devtools.recorder
API adalah fitur pratinjau yang memungkinkan Anda memperluas panel Perekam Suara di Chrome DevTools.
Lihat ringkasan API DevTools untuk pengantar umum tentang cara menggunakan API Developer Tools.
Ketersediaan
Konsep dan penggunaan
Menyesuaikan fitur ekspor
Untuk mendaftarkan plugin ekstensi, gunakan fungsi registerRecorderExtensionPlugin
. Fungsi ini memerlukan instance plugin, name
, dan mediaType
sebagai parameter. Instance plugin harus mengimplementasikan dua metode: stringify
dan stringifyStep
.
name
yang disediakan oleh ekstensi muncul di menu Ekspor di panel Perekam.
Bergantung pada konteks ekspor, saat pengguna mengklik opsi ekspor yang disediakan oleh ekstensi, panel Recorder akan memanggil salah satu dari dua fungsi:
stringify
yang menerima rekaman seluruh alur penggunaanstringifyStep
yang menerima satu langkah yang direkam
Parameter mediaType
memungkinkan ekstensi menentukan jenis output yang dihasilkan dengan fungsi stringify
dan stringifyStep
. Misalnya, application/javascript
jika hasilnya adalah program JavaScript.
Menyesuaikan tombol replay
Untuk menyesuaikan tombol putar ulang di Perekam, gunakan fungsi registerRecorderExtensionPlugin
. Plugin harus mengimplementasikan metode replay
agar penyesuaian dapat diterapkan.
Jika metode tersebut terdeteksi, tombol putar ulang akan muncul di Perekam.
Setelah mengklik tombol tersebut, objek rekaman saat ini akan diteruskan sebagai argumen pertama ke metode replay
.
Pada tahap ini, ekstensi dapat menampilkan RecorderView
untuk menangani replay atau menggunakan API ekstensi lain untuk memproses permintaan replay. Untuk membuat RecorderView
baru, panggil chrome.devtools.recorder.createView
.
Contoh
Ekspor plugin
Kode berikut mengimplementasikan plugin ekstensi yang membuat string rekaman menggunakan 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'
);
Plugin replay
Kode berikut menerapkan plugin ekstensi yang membuat tampilan Perekam Suara contoh dan menampilkannya pada permintaan replay:
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'
);
Temukan contoh ekstensi lengkap di GitHub.
Jenis
RecorderExtensionPlugin
Antarmuka plugin yang dipanggil panel Perekam Suara untuk menyesuaikan panel Perekam Suara.
Properti
-
replay
void
Chrome 112 dan yang lebih baruMengizinkan ekstensi untuk menerapkan fungsi replay kustom.
Fungsi
replay
terlihat seperti:(recording: object) => {...}
-
merekam
objek
Rekaman interaksi pengguna dengan halaman. Nilai ini harus cocok dengan skema perekaman Puppeteer.
-
-
merangkai
void
Mengonversi rekaman dari format panel Perekam Suara menjadi string.
Fungsi
stringify
terlihat seperti:(recording: object) => {...}
-
merekam
objek
Rekaman interaksi pengguna dengan halaman. Nilai ini harus cocok dengan skema perekaman Puppeteer.
-
-
stringifyStep
void
Mengonversi langkah rekaman dari format panel Perekam Suara menjadi string.
Fungsi
stringifyStep
terlihat seperti:(step: object) => {...}
-
langkah
objek
Langkah rekaman interaksi pengguna dengan halaman. Nilai ini harus cocok dengan skema langkah Puppeteer.
-
RecorderView
Mewakili tampilan yang dibuat oleh ekstensi untuk disematkan di dalam panel Perekam Suara.
Properti
-
onHidden
Peristiwa<functionvoidvoid>
Diaktifkan saat tampilan disembunyikan.
Fungsi
onHidden.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
onShown
Peristiwa<functionvoidvoid>
Diaktifkan saat tampilan ditampilkan.
Fungsi
onShown.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
tunjukkan
void
Menunjukkan bahwa ekstensi ingin menampilkan tampilan ini di panel Perekam Suara.
Fungsi
show
terlihat seperti:() => {...}
Metode
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Membuat tampilan yang dapat menangani replay. Tampilan ini akan disematkan di dalam panel Perekam Suara.
Parameter
-
title
string
Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.
-
pagePath
string
Jalur halaman HTML panel yang sesuai dengan direktori ekstensi.
Hasil
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Mendaftarkan plugin ekstensi Perekam Suara.
Parameter
-
plugin
Instance yang menerapkan antarmuka RecorderExtensionPlugin.
-
name
string
Nama plugin.
-
mediaType
string
Jenis media konten string yang dihasilkan plugin.