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