chrome.devtools.recorder

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 penggunaan API Developer Tools.

Ketersediaan

Chrome 105 dan yang lebih baru

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 Export di panel Perekam.

Bergantung pada konteks ekspor, saat pengguna mengklik opsi ekspor yang disediakan oleh ekstensi, panel Perekam memanggil salah satu dari dua fungsi:

Parameter mediaType memungkinkan ekstensi menentukan jenis output yang dihasilkan dengan Fungsi stringify dan stringifyStep. Misalnya, application/javascript jika hasilnya adalah JavaScript program ini.

Menyesuaikan tombol putar ulang

Untuk menyesuaikan tombol putar ulang di Perekam, gunakan fungsi registerRecorderExtensionPlugin. Plugin harus mengimplementasikan metode replay agar penyesuaian dapat diterapkan. Jika metode ini terdeteksi, tombol putar ulang akan muncul di Perekam. Setelah mengklik tombol tersebut, objek perekaman saat ini akan diteruskan sebagai argumen pertama ke metode replay.

Pada tahap ini, ekstensi dapat menampilkan RecorderView untuk menangani replay atau menggunakan API ekstensi lainnya untuk memproses permintaan replay. Untuk membuat RecorderView baru, panggil chrome.devtools.recorder.createView.

Contoh

Ekspor plugin

Kode berikut mengimplementasikan plugin ekstensi yang melakukan string pada 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 mengimplementasikan plugin ekstensi yang membuat tampilan Perekam Suara contoh dan menampilkannya pada permintaan pemutaran ulang:

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 baru

    Mengizinkan ekstensi untuk menerapkan fungsi replay kustom.

    Fungsi replay akan terlihat seperti ini: 

    (recording: object) => {...}

  • stringify

    void

    Mengonversi rekaman dari format panel Perekam Suara menjadi string.

    Fungsi stringify akan terlihat seperti ini: 

    (recording: object) => {...}

  • stringifyStep

    void

    Mengonversi langkah rekaman dari format panel Perekam ke dalam string.

    Fungsi stringifyStep akan terlihat seperti ini: 

    (step: object) => {...}

    • langkah

      objek

      Langkah dari perekaman interaksi pengguna dengan halaman. Ini harus cocok dengan skema langkah Puppeteer.

RecorderView

Chrome 112 dan yang lebih baru

Mewakili tampilan yang dibuat oleh ekstensi untuk disematkan di dalam panel Perekam Suara.

Properti

  • onHidden

    Peristiwa<functionvoidvoid>

    Diaktifkan saat tampilan disembunyikan.

    Fungsi onHidden.addListener akan terlihat seperti ini: 

    (callback: function) => {...}

    • callback

      fungsi

      Parameter callback terlihat seperti ini: 

      () => void

  • onShown

    Peristiwa<functionvoidvoid>

    Diaktifkan saat tampilan ditampilkan.

    Fungsi onShown.addListener akan terlihat seperti ini: 

    (callback: function) => {...}

    • callback

      fungsi

      Parameter callback terlihat seperti ini: 

      () => void

  • tunjukkan

    void

    Menunjukkan bahwa ekstensi ingin menampilkan tampilan ini di panel Perekam Suara.

    Fungsi show akan terlihat seperti ini: 

    () => {...}

Metode

createView()

Chrome 112 dan yang lebih baru 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Membuat tampilan yang dapat menangani replay. Tampilan ini akan disematkan di dalam panel Perekam Suara.

Parameter

  • judul

    string

    Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.

  • pagePath

    string

    Jalur halaman HTML panel yang relatif terhadap direktori ekstensi.

Hasil

registerRecorderExtensionPlugin()

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

Mendaftarkan plugin ekstensi Perekam Suara.

Parameter

  • Instance yang menerapkan antarmuka RecorderExtensionPlugin.

  • nama

    string

    Nama plugin.

  • mediaType

    string

    Jenis media konten string yang dihasilkan plugin.