chrome.devtools.recorder

คำอธิบาย

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

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

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

แนวคิดและการใช้งาน

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

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

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

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

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

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

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

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

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

ตัวอย่าง

ส่งออกปลั๊กอิน

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

ปลั๊กอินเล่นซ้ำ

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

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

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

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