chrome.devtools.recorder

คำอธิบาย

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

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

Chrome 105 ขึ้นไป

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

ภาพรวม

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

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

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

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

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

พารามิเตอร์ 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'
);

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

หากต้องการปรับแต่งปุ่มเล่นซ้ำในโปรแกรมอัดเสียง ให้ใช้ฟังก์ชัน 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

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

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

  • เล่นซ้ำ

    เป็นโมฆะ

    Chrome 112 ขึ้นไป

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

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

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

  • ทำให้เป็นสตริง

    เป็นโมฆะ

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

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

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

  • stringifyStep

    เป็นโมฆะ

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

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

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

    • ก้าว

      ออบเจ็กต์

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

RecorderView

Chrome 112 ขึ้นไป

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

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

  • onHidden

    เหตุการณ์<functionvoid>

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

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

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

    • Callback

      ฟังก์ชัน

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

      () => void

  • onShown

    เหตุการณ์<functionvoid>

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

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

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

    • Callback

      ฟังก์ชัน

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

      () => void

  • แสดง

    เป็นโมฆะ

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

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

    () => {...}

เมธอด

createView()

Chrome 112 ขึ้นไป
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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

พารามิเตอร์

  • title

    สตริง

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

  • pagePath

    สตริง

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

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

registerRecorderExtensionPlugin()

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

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

พารามิเตอร์

  • ปลั๊กอิน

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

  • ชื่อ

    สตริง

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

  • mediaType

    สตริง

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