คำอธิบาย
ใช้ chrome.devtools.recorder
API เพื่อปรับแต่งแผงโปรแกรมบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ
ความพร้อมใช้งาน
ดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ในข้อมูลสรุปเกี่ยวกับ DevTools API
ภาพรวม
devtools.recorder
API เป็นฟีเจอร์ดูตัวอย่างที่ช่วยให้คุณขยายแผงโปรแกรมอัดเสียงในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้
ตั้งแต่ Chrome M105 เป็นต้นไป คุณสามารถขยายฟังก์ชันการส่งออกได้ ตั้งแต่ Chrome M112 เป็นต้นไป คุณสามารถขยายปุ่มเล่นซ้ำได้
การปรับแต่งฟีเจอร์การส่งออก
หากต้องการลงทะเบียนปลั๊กอินส่วนขยาย ให้ใช้ฟังก์ชัน registerRecorderExtensionPlugin
ฟังก์ชันนี้ต้องมีอินสแตนซ์ปลั๊กอิน ซึ่งได้แก่ name
และ mediaType
เป็นพารามิเตอร์ อินสแตนซ์ของปลั๊กอินต้องใช้ 2 วิธี ได้แก่ stringify
และ stringifyStep
name
จากส่วนขยายจะปรากฏในเมนูส่งออกในแผงโปรแกรมอัดเสียง
เมื่อผู้ใช้คลิกตัวเลือกการส่งออกที่ส่วนขยายระบุไว้ แผงโปรแกรมอัดเสียงจะเรียกใช้ 1 ใน 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'
);
การปรับแต่งปุ่มเล่นซ้ำ
หากต้องการปรับแต่งปุ่มเล่นซ้ำในโปรแกรมอัดเสียง ให้ใช้ฟังก์ชัน registerRecorderExtensionPlugin
ปลั๊กอินต้องใช้เมธอด replay
เพื่อให้การปรับแต่งมีผล
หากตรวจพบวิธีการนี้ ปุ่มเล่นซ้ำจะปรากฏในโปรแกรมอัดเสียง
เมื่อคลิกปุ่ม ระบบจะส่งออบเจ็กต์การบันทึกปัจจุบันเป็นอาร์กิวเมนต์แรกไปยังเมธอด replay
ณ จุดนี้ ส่วนขยายสามารถแสดง RecorderView
สำหรับจัดการการเล่นซ้ำ หรือใช้ API ของส่วนขยายอื่นๆ เพื่อดำเนินการตามคำขอเล่นซ้ำ หากต้องการสร้าง RecorderView
ใหม่ ให้เรียกใช้ chrome.devtools.recorder.createView
ตัวอย่างปลั๊กอิน Replay
โค้ดต่อไปนี้ใช้ปลั๊กอินส่วนขยายที่สร้างมุมมองโปรแกรมอัดเสียงจำลอง และแสดงเมื่อมีการขอเล่นซ้ำ
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
-
-
เป็นสตริง
void
แปลงไฟล์บันทึกเสียงจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง
ฟังก์ชัน
stringify
มีลักษณะดังนี้(recording: object) => {...}
-
กำลังบันทึก
ออบเจ็กต์
บันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาการบันทึกของ Puppeteer
-
-
stringifyStep
void
แปลงขั้นตอนของการบันทึกจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง
ฟังก์ชัน
stringifyStep
มีลักษณะดังนี้(step: object) => {...}
-
ก้าว
ออบเจ็กต์
ขั้นตอนของการบันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาขั้นตอนของ Puppeteer
-
RecorderView
แสดงมุมมองที่ส่วนขยายสร้างขึ้นเพื่อฝังไว้ในแผงโปรแกรมอัดเสียง
พร็อพเพอร์ตี้
-
onHidden
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อมุมมองซ่อน
ฟังก์ชัน
onHidden.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
onShown
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อแสดงมุมมอง
ฟังก์ชัน
onShown.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
แสดง
void
ระบุว่าส่วนขยายต้องการแสดงมุมมองนี้ในแผงโปรแกรมอัดเสียง
ฟังก์ชัน
show
มีลักษณะดังนี้() => {...}
วิธีการ
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
สร้างมุมมองที่จัดการกับการเล่นซ้ำได้ ระบบจะฝังมุมมองนี้ไว้ในแผงโปรแกรมอัดเสียง
พารามิเตอร์
-
title
string
ชื่อที่แสดงถัดจากไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
-
pagePath
string
เส้นทางของหน้า HTML ของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย
การคืนสินค้า
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
ลงทะเบียนปลั๊กอินส่วนขยายโปรแกรมอัดเสียง
พารามิเตอร์
-
plugin
อินสแตนซ์ที่ใช้อินเทอร์เฟซ RecorderExtensionPlugin
-
ชื่อ
string
ชื่อของปลั๊กอิน
-
mediaType
string
ประเภทสื่อของเนื้อหาสตริงที่ปลั๊กอินสร้าง