chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Deskripsi

Gunakan chrome.devtools.recorder API untuk menyesuaikan panel Perekam di DevTools.

Ketersediaan

Chrome 105+

Lihat Ringkasan API DevTools untuk pengantar umum tentang penggunaan API Alat Developer.

Ringkasan

devtools.recorder API adalah fitur pratinjau yang memungkinkan Anda memperluas panel Perekam di Chrome DevTools. Mulai Chrome M105, Anda dapat memperluas fungsi ekspor. Mulai Chrome M112, Anda dapat memperluas tombol replay.

Menyesuaikan fitur ekspor

Untuk mendaftarkan plugin ekstensi, gunakan fungsi registerRecorderExtensionPlugin. Fungsi ini memerlukan instance plugin, name, dan mediaType sebagai parameter. Instance plugin harus menerapkan dua metode: stringify dan stringifyStep.

name yang disediakan oleh ekstensi akan muncul di menu Ekspor di panel Perekam.

Bergantung pada konteks ekspor, saat pengguna mengklik opsi ekspor yang disediakan oleh ekstensi, panel Perekam 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.

Contoh plugin ekspor

Kode berikut mengimplementasikan plugin ekstensi yang mengubah rekaman menjadi string 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'
);

Menyesuaikan tombol replay

Untuk menyesuaikan tombol putar ulang di Perekam, gunakan fungsi registerRecorderExtensionPlugin. Plugin harus menerapkan metode replay agar penyesuaian diterapkan. Jika metode terdeteksi, tombol putar ulang akan muncul di Perekam. Setelah mengklik tombol, 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 plugin replay

Kode berikut mengimplementasikan plugin ekstensi yang membuat tampilan Perekam tiruan dan menampilkannya saat ada 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 untuk menyesuaikan panel Perekam.

Properti

  • replay

    void

    Chrome 112+

    Memungkinkan ekstensi menerapkan fungsi replay kustom.

    Fungsi replay terlihat seperti: 

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

  • stringify

    void

    Mengonversi rekaman dari format panel Perekam ke string.

    Fungsi stringify terlihat seperti: 

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

  • stringifyStep

    void

    Mengonversi langkah perekaman dari format panel Perekam menjadi string.

    Fungsi stringifyStep terlihat seperti: 

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

    • langkah

      objek

      Langkah perekaman interaksi pengguna dengan halaman. Skema ini harus cocok dengan skema langkah Puppeteer.

RecorderView

Chrome 112+

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

Properti

  • onHidden

    Event<functionvoidvoid>

    Diaktifkan saat tampilan disembunyikan.

    Fungsi onHidden.addListener terlihat seperti: 

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

    • callback

      fungsi

      Parameter callback terlihat seperti: 

      () => void

  • onShown

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

    Fungsi show terlihat seperti: 

    () => {...}

Metode

createView()

Chrome 112+ 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Membuat tampilan yang dapat menangani pemutaran ulang. Tampilan ini akan disematkan di dalam panel Perekam.

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,
): void

Mendaftarkan plugin ekstensi Perekam Suara.

Parameter

  • Instance yang mengimplementasikan antarmuka RecorderExtensionPlugin.

  • nama

    string

    Nama plugin.

  • mediaType

    string

    Jenis media konten string yang dihasilkan plugin.