chrome.devtools.panels

คำอธิบาย

ใช้ chrome.devtools.panels API เพื่อผสานรวมส่วนขยายเข้ากับ UI ของหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ โดยสร้างแผงของคุณเอง เข้าถึงแผงที่มีอยู่ และเพิ่มแถบด้านข้าง

ไฟล์ Manifest

ต้องประกาศคีย์ต่อไปนี้ในไฟล์ Manifest เพื่อใช้ API นี้

"devtools_page"

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

ภาพรวม

แผงส่วนขยายและแถบด้านข้างแต่ละรายการจะแสดงเป็นหน้า HTML แยกกัน หน้าส่วนขยายทั้งหมดที่แสดง ในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึงโมดูลทั้งหมดใน chrome.devtools API รวมถึง chrome.extension API API ส่วนขยายอื่นๆ จะไม่พร้อมใช้งานในหน้าต่างๆ ภายในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แต่คุณอาจเรียกใช้ได้โดยส่งคำขอไปยังหน้าพื้นหลังของส่วนขยาย ในลักษณะเดียวกับที่ทำในสคริปต์เนื้อหา

คุณสามารถใช้วิธี devtools.panels.setOpenResourceHandler เพื่อติดตั้งฟังก์ชัน Callback ที่จัดการคำขอของผู้ใช้ในการเปิดทรัพยากร (โดยปกติคือการคลิกลิงก์ทรัพยากรใน หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) ระบบจะเรียกใช้ตัวแฮนเดิลที่ติดตั้งไว้เพียงตัวเดียวเท่านั้น ผู้ใช้สามารถระบุ (โดยใช้กล่องโต้ตอบการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ) ได้ทั้งลักษณะการทำงานเริ่มต้นหรือส่วนขยายเพื่อจัดการคำขอเปิดทรัพยากร หากส่วนขยายเรียก 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");
  }
);

ภาพหน้าจอนี้แสดงให้เห็นถึงผลลัพธ์ที่ตัวอย่างข้างต้นจะมีต่อหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

แผงไอคอนส่วนขยายในแถบเครื่องมือ DevTools

หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง API ของแผง DevTools จากที่เก็บ chrome-extension-samples

ประเภท

Button

ปุ่มที่ส่วนขยายสร้างขึ้น

พร็อพเพอร์ตี้

  • onClicked

    Event<functionvoidvoid>

    เริ่มทำงานเมื่อมีการคลิกปุ่ม

    ฟังก์ชัน onClicked.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • อัปเดต

    เป็นโมฆะ

    อัปเดตแอตทริบิวต์ของปุ่ม หากละเว้นอาร์กิวเมนต์บางรายการหรือ null ระบบจะไม่ทำการอัปเดตแอตทริบิวต์ที่เกี่ยวข้อง

    ฟังก์ชัน update มีลักษณะดังนี้ 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      สตริง ไม่บังคับ

      เส้นทางไปยังไอคอนใหม่ของปุ่ม

    • tooltipText

      สตริง ไม่บังคับ

      ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม

    • ปิดอยู่

      บูลีน ไม่บังคับ

      ปุ่มปิดใช้อยู่หรือไม่

ElementsPanel

แสดงแผงองค์ประกอบ

พร็อพเพอร์ตี้

  • onSelectionChanged

    Event<functionvoidvoid>

    ทำงานเมื่อมีการเลือกออบเจ็กต์ในแผง

    ฟังก์ชัน onSelectionChanged.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • createSidebarPane

    เป็นโมฆะ

    Promise

    สร้างแผงภายในแถบด้านข้างของแผง

    ฟังก์ชัน createSidebarPane มีลักษณะดังนี้ 

    (title: string, callback?: function) => {...}

    • title

      สตริง

      ข้อความที่แสดงในคำบรรยายภาพของแถบด้านข้าง

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (result: ExtensionSidebarPane) => void

      • ผลลัพธ์

        ExtensionSidebarPane

        ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น

    • returns

      Promise<ExtensionSidebarPane>

      รอดำเนินการ

      การเรียกกลับที่เรียกใช้เมื่อสร้างแถบด้านข้าง

      Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

ExtensionPanel

แสดงแผงที่สร้างโดยส่วนขยาย

พร็อพเพอร์ตี้

  • onHidden

    Event<functionvoidvoid>

    เริ่มทำงานเมื่อผู้ใช้เปลี่ยนจากแผง

    ฟังก์ชัน onHidden.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • onSearch

    Event<functionvoidvoid>

    ทริกเกอร์เมื่อมีการดำเนินการค้นหา (เริ่มการค้นหาใหม่ การไปยังส่วนต่างๆ ของผลการค้นหา หรือการยกเลิกการค้นหา)

    ฟังก์ชัน onSearch.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (action: string, queryString?: string) => void

      • การดำเนินการ

        สตริง

      • queryString

        สตริง ไม่บังคับ

  • onShown

    Event<functionvoidvoid>

    เริ่มทำงานเมื่อผู้ใช้เปลี่ยนไปใช้แผง

    ฟังก์ชัน onShown.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (window: Window) => void

      • หน้าต่าง

        หน้าต่าง

  • createStatusBarButton

    เป็นโมฆะ

    เพิ่มปุ่มลงในแถบสถานะของแผง

    ฟังก์ชัน createStatusBarButton มีลักษณะดังนี้ 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      สตริง

      เส้นทางไปยังไอคอนของปุ่ม ไฟล์ควรมีรูปภาพขนาด 64x24 พิกเซลซึ่งประกอบด้วยไอคอนขนาด 32x24 พิกเซล 2 รายการ ระบบจะใช้ไอคอนด้านซ้ายเมื่อปุ่มไม่ได้ใช้งาน และจะแสดงไอคอนด้านขวาเมื่อกดปุ่ม

    • tooltipText

      สตริง

      ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม

    • ปิดอยู่

      บูลีน

      ปุ่มปิดใช้อยู่หรือไม่

  • แสดง

    เป็นโมฆะ

    Chrome 140 ขึ้นไป

    แสดงแผงโดยการเปิดใช้งานแท็บที่เกี่ยวข้อง

    ฟังก์ชัน show มีลักษณะดังนี้ 

    () => {...}

ExtensionSidebarPane

แถบด้านข้างที่สร้างโดยส่วนขยาย

พร็อพเพอร์ตี้

  • onHidden

    Event<functionvoidvoid>

    เริ่มทำงานเมื่อแผงแถบด้านข้างซ่อนอยู่เนื่องจากผู้ใช้เปลี่ยนไปใช้แผงอื่นที่โฮสต์แผงแถบด้านข้าง

    ฟังก์ชัน onHidden.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • onShown

    Event<functionvoidvoid>

    เริ่มทำงานเมื่อแผงแถบด้านข้างปรากฏขึ้นเนื่องจากผู้ใช้เปลี่ยนไปใช้แผงที่โฮสต์แผงแถบด้านข้าง

    ฟังก์ชัน onShown.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (window: Window) => void

      • หน้าต่าง

        หน้าต่าง

  • setExpression

    เป็นโมฆะ

    Promise

    กำหนดนิพจน์ที่จะได้รับการประเมินภายในหน้าเว็บที่ตรวจสอบ ผลลัพธ์จะแสดงในแผงแถบด้านข้าง

    ฟังก์ชัน setExpression มีลักษณะดังนี้ 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • นิพจน์

      สตริง

      นิพจน์ที่จะประเมินในบริบทของหน้าเว็บที่ตรวจสอบ ออบเจ็กต์ JavaScript และโหนด DOM จะแสดงในโครงสร้างแบบขยายได้คล้ายกับคอนโซล/การตรวจสอบ

    • rootTitle

      สตริง ไม่บังคับ

      ชื่อที่ไม่บังคับสำหรับรูทของทรีนิพจน์

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

    • returns

      Promise<void>

      รอดำเนินการ

      การเรียกกลับที่เรียกใช้หลังจากอัปเดตแผงแถบด้านข้างด้วยผลการประเมินนิพจน์

      Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

  • setHeight

    เป็นโมฆะ

    กำหนดความสูงของแถบด้านข้าง

    ฟังก์ชัน setHeight มีลักษณะดังนี้ 

    (height: string) => {...}

    • ส่วนสูง

      สตริง

      ข้อกำหนดขนาดที่คล้ายกับ CSS เช่น '100px' หรือ '12ex'

  • setObject

    เป็นโมฆะ

    Promise

    ตั้งค่าออบเจ็กต์ที่สอดคล้องกับ JSON ให้แสดงในแผงแถบด้านข้าง

    ฟังก์ชัน setObject มีลักษณะดังนี้ 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      สตริง

      ออบเจ็กต์ที่จะแสดงในบริบทของหน้าเว็บที่ตรวจสอบ ประเมินในบริบทของผู้โทร (ไคลเอ็นต์ API)

    • rootTitle

      สตริง ไม่บังคับ

      ชื่อที่ไม่บังคับสำหรับรูทของทรีนิพจน์

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

    • returns

      Promise<void>

      รอดำเนินการ

      การเรียกกลับที่เรียกใช้หลังจากอัปเดตแถบด้านข้างด้วยออบเจ็กต์

      Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

  • setPage

    เป็นโมฆะ

    กำหนดให้แสดงหน้า HTML ในแผงแถบด้านข้าง

    ฟังก์ชัน setPage มีลักษณะดังนี้ 

    (path: string) => {...}

    • เส้นทาง

      สตริง

      เส้นทางแบบสัมพัทธ์ของหน้าส่วนขยายที่จะแสดงในแถบด้านข้าง

SourcesPanel

แสดงแผงแหล่งที่มา

พร็อพเพอร์ตี้

  • onSelectionChanged

    Event<functionvoidvoid>

    ทำงานเมื่อมีการเลือกออบเจ็กต์ในแผง

    ฟังก์ชัน onSelectionChanged.addListener มีลักษณะดังนี้ 

    (callback: function) => {...}

    • callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • createSidebarPane

    เป็นโมฆะ

    Promise

    สร้างแผงภายในแถบด้านข้างของแผง

    ฟังก์ชัน createSidebarPane มีลักษณะดังนี้ 

    (title: string, callback?: function) => {...}

    • title

      สตริง

      ข้อความที่แสดงในคำบรรยายภาพของแถบด้านข้าง

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (result: ExtensionSidebarPane) => void

      • ผลลัพธ์

        ExtensionSidebarPane

        ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น

    • returns

      Promise<ExtensionSidebarPane>

      รอดำเนินการ

      การเรียกกลับที่เรียกใช้เมื่อสร้างแถบด้านข้าง

      Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

Theme

Chrome 99 ขึ้นไป

ธีมที่เครื่องมือสำหรับนักพัฒนาเว็บใช้

ค่าแจกแจง

"default"
ธีมเครื่องมือสำหรับนักพัฒนาเว็บเริ่มต้น ซึ่งจะเป็นธีมสว่างเสมอ

"มืด"
ธีมมืด

พร็อพเพอร์ตี้

elements

แผงองค์ประกอบ

ประเภท

ElementsPanel

sources

แผงแหล่งที่มา

ประเภท

SourcesPanel

themeName

Chrome 59 ขึ้นไป

ชื่อของธีมสีที่ตั้งค่าไว้ในการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บของผู้ใช้ ค่าที่เป็นไปได้: default (ค่าเริ่มต้น) และ dark

ประเภท

สตริง

เมธอด

create()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

สร้างแผงส่วนขยาย

พารามิเตอร์

  • title

    สตริง

    ชื่อที่แสดงข้างไอคอนส่วนขยายในแถบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

  • iconPath

    สตริง

    เส้นทางของไอคอนแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย

  • pagePath

    สตริง

    เส้นทางของหน้า HTML ของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (panel: ExtensionPanel) => void

    • แผง

      ExtensionPanel

      ออบเจ็กต์ ExtensionPanel ที่แสดงแผงที่สร้างขึ้น

การคืนสินค้า

  • Promise<ExtensionPanel>

    รอดำเนินการ

    ฟังก์ชันที่จะเรียกใช้เมื่อสร้างแผง

    Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

ขอให้ DevTools เปิด URL ในแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

พารามิเตอร์

  • URL

    สตริง

    URL ของทรัพยากรที่จะเปิด

  • lineNumber

    ตัวเลข

    ระบุหมายเลขบรรทัดที่จะเลื่อนไปเมื่อโหลดทรัพยากร

  • columnNumber

    หมายเลข ไม่บังคับ

    Chrome 114 ขึ้นไป

    ระบุหมายเลขคอลัมน์ที่จะเลื่อนไปเมื่อโหลดทรัพยากร

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    รอดำเนินการ

    ฟังก์ชันที่จะเรียกใช้เมื่อโหลดทรัพยากรสำเร็จแล้ว

    Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

ระบุฟังก์ชันที่จะเรียกใช้เมื่อผู้ใช้คลิกลิงก์ทรัพยากรในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หากต้องการยกเลิกการตั้งค่าตัวแฮนเดิล ให้เรียกเมธอดโดยไม่มีพารามิเตอร์ หรือส่งค่า Null เป็นพารามิเตอร์

พารามิเตอร์

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (resource: Resource, lineNumber: number) => void

    • แหล่งข้อมูล

      แหล่งข้อมูล

      ออบเจ็กต์ devtools.inspectedWindow.Resource สำหรับทรัพยากรที่มีการคลิก

    • lineNumber

      ตัวเลข

      ระบุหมายเลขบรรทัดภายในทรัพยากรที่คลิก

setThemeChangeHandler()

Chrome 99 ขึ้นไป 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

ระบุฟังก์ชันที่จะเรียกใช้เมื่อธีมปัจจุบันมีการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บ หากต้องการยกเลิกการตั้งค่าตัวแฮนเดิล ให้เรียกใช้เมธอดโดยไม่มีพารามิเตอร์ หรือส่ง null เป็นพารามิเตอร์

พารามิเตอร์

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (theme: Theme) => void

    • ธีม [theme]

      ธีม

      ธีมปัจจุบันในเครื่องมือสำหรับนักพัฒนาเว็บ