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