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 cara menggunakan 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 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:

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 baru

    Mengizinkan ekstensi untuk menerapkan fungsi replay kustom.

    Fungsi replay terlihat seperti: 

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

  • merangkai

    void

    Mengonversi rekaman dari format panel Perekam Suara menjadi string.

    Fungsi stringify terlihat seperti: 

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

  • 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

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 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 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

  • 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

  • Instance yang menerapkan antarmuka RecorderExtensionPlugin.

  • name

    string

    Nama plugin.

  • mediaType

    string

    Jenis media konten string yang dihasilkan plugin.