chrome.devtools.recorder

Deskripsi

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

devtools.recorder API adalah fitur pratinjau yang memungkinkan Anda memperluas panel Perekam di Chrome DevTools.

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

Ketersediaan

Chrome 105+

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 menerapkan dua metode: stringify dan stringifyStep.

name yang disediakan oleh ekstensi akan muncul di menu Export di panel Recorder.

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 dihasilkannya dengan fungsi stringify dan stringifyStep. Misalnya, application/javascript jika hasilnya adalah program JavaScript.

Menyesuaikan tombol putar ulang

Untuk menyesuaikan tombol pemutaran ulang di Perekam, gunakan fungsi registerRecorderExtensionPlugin. Plugin harus menerapkan metode replay agar penyesuaian dapat diterapkan. Jika metode terdeteksi, tombol pemutaran 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 pemutaran ulang atau menggunakan API ekstensi lain untuk memproses permintaan pemutaran ulang. Untuk membuat RecorderView baru, panggil chrome.devtools.recorder.createView.

Contoh

Plugin ekspor

Kode berikut menerapkan 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'
);

Plugin putar ulang

Kode berikut mengimplementasikan plugin ekstensi yang membuat tampilan Perekam dummy dan menampilkannya saat 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 pemutaran ulang kustom.

    Fungsi replay akan terlihat seperti: 

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

  • stringify

    void

    Mengonversi rekaman dari format panel Perekam Suara menjadi string.

    Fungsi stringify akan terlihat seperti: 

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

  • stringifyStep

    void

    Mengonversi langkah perekaman dari format panel Perekam menjadi string.

    Fungsi stringifyStep akan terlihat seperti: 

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

    • langkah

      objek

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

RecorderView

Chrome 112+

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

Properti

  • onHidden

    Event<functionvoidvoid>

    Diaktifkan saat tampilan disembunyikan.

    Fungsi onHidden.addListener akan terlihat seperti: 

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

    • callback

      fungsi

      Parameter callback terlihat seperti: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Diaktifkan saat tampilan ditampilkan.

    Fungsi onShown.addListener akan 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 akan 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 relatif terhadap direktori ekstensi.

Hasil

registerRecorderExtensionPlugin()

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

Mendaftarkan plugin ekstensi Perekam.

Parameter

  • Instance yang menerapkan antarmuka RecorderExtensionPlugin.

  • nama

    string

    Nama plugin.

  • mediaType

    string

    Jenis media konten string yang dihasilkan plugin.