chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

ใช้ chrome.devtools.recorder API เพื่อปรับแต่งแผงโปรแกรมอัดเสียงในเครื่องมือสำหรับนักพัฒนาเว็บ

ความพร้อมใช้งาน

Chrome 105 ขึ้นไป

ดูสรุป API ของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาเว็บ

ภาพรวม

devtools.recorder API เป็นฟีเจอร์เวอร์ชันตัวอย่างที่ช่วยให้คุณขยายแผงเครื่องอัดเสียงในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้ ตั้งแต่ Chrome M105 เป็นต้นไป คุณจะขยายฟังก์ชันการส่งออกได้ ตั้งแต่ Chrome M112 เป็นต้นไป คุณสามารถขยายปุ่มเล่นซ้ำได้

การปรับแต่งฟีเจอร์การส่งออก

หากต้องการลงทะเบียนปลั๊กอินส่วนขยาย ให้ใช้ฟังก์ชัน registerRecorderExtensionPlugin ฟังก์ชันนี้ต้องใช้อินสแตนซ์ปลั๊กอิน, name และ mediaType เป็นพารามิเตอร์ อินสแตนซ์ปลั๊กอินต้องใช้ 2 วิธี ได้แก่ stringify และ stringifyStep

name ที่ส่วนขยายมีให้จะแสดงในเมนูส่งออกในแผงโปรแกรมบันทึก

เมื่อผู้ใช้คลิกตัวเลือกการส่งออกที่ส่วนขยายมีให้ แผงโปรแกรมอัดเสียงจะเรียกใช้ฟังก์ชันใดฟังก์ชันหนึ่งจาก 2 ฟังก์ชันต่อไปนี้ ทั้งนี้ขึ้นอยู่กับบริบทการส่งออก

• stringify ที่ได้รับการบันทึกโฟลว์ผู้ใช้ทั้งหมด
• stringifyStep ที่ได้รับขั้นตอนที่บันทึกไว้เพียงขั้นตอนเดียว

พารามิเตอร์ mediaType ช่วยให้ส่วนขยายระบุประเภทเอาต์พุตที่สร้างด้วยฟังก์ชัน stringify และ stringifyStep ได้ เช่น application/javascript หากผลลัพธ์เป็นโปรแกรม JavaScript

ตัวอย่างปลั๊กอินการส่งออก

โค้ดต่อไปนี้จะใช้ปลั๊กอินส่วนขยายที่แปลงไฟล์บันทึกเป็นสตริงโดยใช้ 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'
);

การปรับแต่งปุ่มเล่นซ้ำ

หากต้องการปรับแต่งปุ่มเล่นซ้ำใน Recorder ให้ใช้ฟังก์ชัน registerRecorderExtensionPlugin ปลั๊กอินต้องใช้เมธอด replay เพื่อให้การปรับแต่งมีผล หากตรวจพบเมธอด ปุ่มเล่นซ้ำจะปรากฏในโปรแกรมอัดเสียง เมื่อคลิกปุ่ม ระบบจะส่งออบเจ็กต์การบันทึกปัจจุบันเป็นอาร์กิวเมนต์แรกไปยังเมธอด replay

ณ จุดนี้ ส่วนขยายสามารถแสดง RecorderView เพื่อจัดการการเล่นซ้ำหรือใช้ API ส่วนขยายอื่นๆ เพื่อประมวลผลคำขอเล่นซ้ำ หากต้องการสร้าง RecorderView ใหม่ ให้เรียกใช้ chrome.devtools.recorder.createView

ตัวอย่างปลั๊กอินการเล่นซ้ำ

โค้ดต่อไปนี้ใช้ปลั๊กอินส่วนขยายที่สร้างมุมมองโปรแกรมอัดเสียงจำลองและแสดงมุมมองดังกล่าวเมื่อมีคำขอเล่นซ้ำ

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'
);

ดูตัวอย่างส่วนขยายที่สมบูรณ์ใน GitHub

ประเภท

RecorderExtensionPlugin

อินเทอร์เฟซปลั๊กอินที่แผงโปรแกรมอัดเสียงเรียกใช้เพื่อปรับแต่งแผงโปรแกรมอัดเสียง

พร็อพเพอร์ตี้

• เล่นซ้ำ

  void

  Chrome 112 ขึ้นไป

  อนุญาตให้ส่วนขยายใช้ฟังก์ชันการเล่นซ้ำที่กำหนดเอง

  ฟังก์ชัน replay จะมีลักษณะดังนี้

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

  • กำลังบันทึก

    ออบเจ็กต์

    การบันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาการบันทึกของ Puppeteer

• stringify

  void

  แปลงการบันทึกจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง

  ฟังก์ชัน stringify จะมีลักษณะดังนี้

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

  • กำลังบันทึก

    ออบเจ็กต์

    การบันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาการบันทึกของ Puppeteer

• stringifyStep

  void

  แปลงขั้นตอนของไฟล์บันทึกจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง

  ฟังก์ชัน stringifyStep จะมีลักษณะดังนี้

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

  • ขั้นตอน

    ออบเจ็กต์

    ขั้นตอนการบันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาขั้นตอนของ Puppeteer

RecorderView

Chrome 112 ขึ้นไป

แสดงมุมมองที่สร้างโดยส่วนขยายเพื่อฝังไว้ในแผงโปรแกรมอัดเสียง

พร็อพเพอร์ตี้

• onHidden

  Event<functionvoidvoid>

  เริ่มทำงานเมื่อมุมมองถูกซ่อน

  ฟังก์ชัน onHidden.addListener จะมีลักษณะดังนี้

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

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback จะมีลักษณะดังนี้

    () => void

• onShown

  Event<functionvoidvoid>

  เริ่มทำงานเมื่อมุมมองแสดงขึ้น

  ฟังก์ชัน onShown.addListener จะมีลักษณะดังนี้

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

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback จะมีลักษณะดังนี้

    () => void

• แสดง

  void

  ระบุว่าส่วนขยายต้องการแสดงมุมมองนี้ในแผงโปรแกรมอัดเสียง

  ฟังก์ชัน show จะมีลักษณะดังนี้

  () => {...}

เมธอด

createView()

Chrome 112 ขึ้นไป

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

สร้างมุมมองที่จัดการการเล่นซ้ำได้ มุมมองนี้จะฝังอยู่ภายในแผงโปรแกรมอัดเสียง

พารามิเตอร์

• title

  สตริง

  ชื่อที่แสดงข้างไอคอนส่วนขยายในแถบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

• pagePath

  สตริง

  เส้นทางของหน้า HTML ของแผงที่เกี่ยวข้องกับไดเรกทอรีส่วนขยาย

การคืนสินค้า

• RecorderView

registerRecorderExtensionPlugin()

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

ลงทะเบียนปลั๊กอินส่วนขยายโปรแกรมอัดเสียง

พารามิเตอร์

• ปลั๊กอิน

  RecorderExtensionPlugin

  อินสแตนซ์ที่ใช้อินเทอร์เฟซ RecorderExtensionPlugin

• name

  สตริง

  ชื่อของปลั๊กอิน

• mediaType

  สตริง

  ประเภทสื่อของเนื้อหาสตริงที่ปลั๊กอินสร้างขึ้น