คำอธิบาย
ใช้ chrome.devtools.panels
API เพื่อผสานรวมส่วนขยายเข้ากับ UI หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ โดยสร้างแผงของคุณเอง เข้าถึงแผงที่มีอยู่ และเพิ่มแถบด้านข้าง
แต่ละแผงส่วนขยายและแถบด้านข้างจะแสดงเป็นหน้า HTML แยกกัน หน้าส่วนขยายทั้งหมดที่แสดง
ในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึงทุกส่วนของ chrome.devtools
API รวมทั้ง
API ส่วนขยายอื่นๆ
คุณสามารถใช้เมธอด devtools.panels.setOpenResourceHandler
เพื่อติดตั้งฟังก์ชัน Callback ได้
ที่จัดการคำขอเปิดทรัพยากรของผู้ใช้ (โดยทั่วไปจะเป็นการคลิกลิงก์ทรัพยากรในส่วน
หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) เครื่องจัดการที่ติดตั้งส่วนใหญ่จะถูกเรียก ที่ผู้ใช้สามารถระบุ (โดยใช้
กล่องโต้ตอบการตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) การทำงานเริ่มต้นหรือส่วนขยายที่ใช้จัดการทรัพยากร
คำขอที่เปิดอยู่ หากส่วนขยายโทร setOpenResourceHandler()
หลายครั้ง เฉพาะ
ตัวแฮนเดิลเดิมจะยังคงอยู่
ดูข้อมูลสรุปเกี่ยวกับ DevTools API สำหรับข้อมูลเบื้องต้นเกี่ยวกับการใช้ API เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
ไฟล์ Manifest
ตัวอย่าง
โค้ดต่อไปนี้จะเพิ่มแผงที่อยู่ใน Panel.html
ซึ่งแสดงด้วย FontPicker.png
ใน
แถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และติดป้ายกำกับเป็นเครื่องมือเลือกแบบอักษร
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
โค้ดต่อไปนี้จะเพิ่มแผงแถบด้านข้างที่มีอยู่ใน Sidebar.html
และมีชื่อว่าคุณสมบัติแบบอักษรลงใน
แผงองค์ประกอบ แล้วตั้งค่าความสูงเป็น 8ex
ดังนี้
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
ภาพหน้าจอแสดงผลกระทบที่ตัวอย่างนี้จะมีต่อหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
![แผงไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาเว็บ](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=9&hl=th)
หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง API แผงเครื่องมือสำหรับนักพัฒนาเว็บจาก chrome-extension-samples ที่เก็บได้
ประเภท
Button
ปุ่มที่สร้างโดยส่วนขยาย
พร็อพเพอร์ตี้
-
onClicked
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อมีการคลิกปุ่ม
ฟังก์ชัน
onClicked.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
อัปเดต
เป็นโมฆะ
อัปเดตแอตทริบิวต์ของปุ่ม หากละเว้นอาร์กิวเมนต์บางส่วนหรือ
null
แอตทริบิวต์ที่เกี่ยวข้องจะไม่อัปเดตฟังก์ชัน
update
มีลักษณะดังนี้(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
string ไม่บังคับ
เส้นทางไปยังไอคอนใหม่ของปุ่ม
-
tooltipText
string ไม่บังคับ
ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม
-
ปิดอยู่
บูลีน ไม่บังคับ
ปุ่มปิดใช้งานหรือไม่
-
ElementsPanel
แสดงแผงองค์ประกอบ
พร็อพเพอร์ตี้
-
onSelectionChanged
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อเลือกออบเจ็กต์ในแผง
ฟังก์ชัน
onSelectionChanged.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
createSidebarPane
เป็นโมฆะ
สร้างแผงภายในแถบด้านข้างของแผง
ฟังก์ชัน
createSidebarPane
มีลักษณะดังนี้(title: string, callback?: function) => {...}
-
title
สตริง
ข้อความที่แสดงในคำบรรยายแทนเสียงของแถบด้านข้าง
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ExtensionSidebarPane) => void
-
ผลลัพธ์
ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น
-
-
ExtensionPanel
แสดงแผงที่สร้างโดยส่วนขยาย
พร็อพเพอร์ตี้
-
onHidden
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อผู้ใช้ออกจากแผง
ฟังก์ชัน
onHidden.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
onSearch
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อมีการดำเนินการค้นหา (การเริ่มการค้นหาใหม่ การไปยังส่วนต่างๆ ของผลการค้นหา และการค้นหาถูกยกเลิก)
ฟังก์ชัน
onSearch.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(action: string, queryString?: string) => void
-
การดำเนินการ
สตริง
-
queryString
string ไม่บังคับ
-
-
-
onShown
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อผู้ใช้เปลี่ยนไปใช้แผง
ฟังก์ชัน
onShown.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(window: Window) => void
-
หน้าต่าง
หน้าต่าง
-
-
-
createStatusBarButton
เป็นโมฆะ
เพิ่มปุ่มต่อท้ายแถบสถานะของแผง
ฟังก์ชัน
createStatusBarButton
มีลักษณะดังนี้(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
สตริง
เส้นทางไปยังไอคอนของปุ่ม ไฟล์ควรมีรูปภาพขนาด 64x24 พิกเซล ซึ่งประกอบด้วยไอคอนขนาด 32x24 จำนวน 2 ไอคอน ไอคอนด้านซ้ายจะถูกใช้เมื่อปุ่มไม่มีการใช้งาน ไอคอนทางขวาจะแสดงขึ้นเมื่อกดปุ่ม
-
tooltipText
สตริง
ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม
-
ปิดอยู่
boolean
ปุ่มปิดใช้งานหรือไม่
-
returns
-
ExtensionSidebarPane
แถบด้านข้างที่สร้างโดยส่วนขยาย
พร็อพเพอร์ตี้
-
onHidden
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อแผงแถบด้านข้างถูกซ่อนไว้เนื่องจากผู้ใช้เปลี่ยนจากแผงที่โฮสต์แผงแถบด้านข้าง
ฟังก์ชัน
onHidden.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
onShown
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อบานหน้าต่างแถบด้านข้างปรากฏขึ้นเมื่อผู้ใช้สลับไปยังแผงที่โฮสต์แผงนั้น
ฟังก์ชัน
onShown.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(window: Window) => void
-
หน้าต่าง
หน้าต่าง
-
-
-
setExpression
เป็นโมฆะ
ตั้งค่านิพจน์ที่ได้รับการประเมินภายในหน้าที่ตรวจสอบ ผลลัพธ์จะแสดงในแผงแถบด้านข้าง
ฟังก์ชัน
setExpression
มีลักษณะดังนี้(expression: string, rootTitle?: string, callback?: function) => {...}
-
นิพจน์
สตริง
นิพจน์ที่จะประเมินในบริบทของหน้าเว็บที่ตรวจสอบ ออบเจ็กต์ JavaScript และโหนด DOM แสดงอยู่ในแผนผังที่ขยายได้ซึ่งคล้ายกับคอนโซล/นาฬิกา
-
rootTitle
string ไม่บังคับ
ชื่อที่ไม่บังคับสำหรับรากของต้นไม้นิพจน์
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
setHeight
เป็นโมฆะ
กำหนดความสูงของแถบด้านข้าง
ฟังก์ชัน
setHeight
มีลักษณะดังนี้(height: string) => {...}
-
ส่วนสูง
สตริง
ข้อกำหนดขนาดที่เหมือน CSS เช่น
'100px'
หรือ'12ex'
-
-
setObject
เป็นโมฆะ
ตั้งค่าออบเจ็กต์ที่สอดคล้องกับ JSON ที่จะแสดงในแผงแถบด้านข้าง
ฟังก์ชัน
setObject
มีลักษณะดังนี้(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
สตริง
ออบเจ็กต์ที่จะแสดงในบริบทของหน้าเว็บที่ตรวจสอบ ประเมินในบริบทของผู้โทร (ไคลเอ็นต์ API)
-
rootTitle
string ไม่บังคับ
ชื่อที่ไม่บังคับสำหรับรากของต้นไม้นิพจน์
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
setPage
เป็นโมฆะ
ตั้งค่าหน้า HTML ให้แสดงในแผงแถบด้านข้าง
ฟังก์ชัน
setPage
มีลักษณะดังนี้(path: string) => {...}
-
เส้นทาง
สตริง
เส้นทางที่เกี่ยวข้องของหน้าส่วนขยายที่จะแสดงภายในแถบด้านข้าง
-
SourcesPanel
แสดงแผงแหล่งที่มา
พร็อพเพอร์ตี้
-
onSelectionChanged
เหตุการณ์<functionvoid>
เริ่มทำงานเมื่อเลือกออบเจ็กต์ในแผง
ฟังก์ชัน
onSelectionChanged.addListener
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
-
-
createSidebarPane
เป็นโมฆะ
สร้างแผงภายในแถบด้านข้างของแผง
ฟังก์ชัน
createSidebarPane
มีลักษณะดังนี้(title: string, callback?: function) => {...}
-
title
สตริง
ข้อความที่แสดงในคำบรรยายแทนเสียงของแถบด้านข้าง
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ExtensionSidebarPane) => void
-
ผลลัพธ์
ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น
-
-
พร็อพเพอร์ตี้
elements
แผงองค์ประกอบ
ประเภท
sources
แผงแหล่งที่มา
ประเภท
themeName
ชื่อของธีมสีที่ตั้งค่าในเครื่องมือสำหรับนักพัฒนาเว็บของผู้ใช้ ค่าที่เป็นไปได้ ได้แก่ default
(ค่าเริ่มต้น) และ dark
ประเภท
สตริง
เมธอด
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
สร้างแผงส่วนขยาย
พารามิเตอร์
-
title
สตริง
ชื่อที่แสดงถัดจากไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
-
iconPath
สตริง
เส้นทางไอคอนของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย
-
pagePath
สตริง
เส้นทางหน้า HTML ของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(panel: ExtensionPanel) => void
-
แผง
ออบเจ็กต์ ExtensionPanel ที่แสดงแผงที่สร้างขึ้น
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
ขอให้เครื่องมือสำหรับนักพัฒนาเว็บเปิด URL ในแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
พารามิเตอร์
-
URL
สตริง
URL ของทรัพยากรที่จะเปิด
-
lineNumber
ตัวเลข
ระบุหมายเลขบรรทัดที่จะเลื่อนเมื่อทรัพยากรโหลดขึ้นมา
-
columnNumber
หมายเลข ไม่บังคับ
Chrome 114 ขึ้นไประบุหมายเลขคอลัมน์ที่จะเลื่อนเมื่อทรัพยากรโหลดขึ้นมา
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
ระบุฟังก์ชันที่จะเรียกใช้เมื่อผู้ใช้คลิกลิงก์ทรัพยากรในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หากต้องการยกเลิกการตั้งค่าตัวแฮนเดิล ให้เรียกใช้เมธอดที่ไม่มีพารามิเตอร์หรือส่ง null เป็นพารามิเตอร์
พารามิเตอร์
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(resource: Resource) => void
-
แหล่งข้อมูล
ออบเจ็กต์
devtools.inspectedWindow.Resource
สำหรับทรัพยากรที่มีการคลิก
-