chrome.devtools.panels

คำอธิบาย

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

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

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

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

ไฟล์ Manifest

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

"devtools_page"

ตัวอย่าง

โค้ดต่อไปนี้จะเพิ่มแผงที่อยู่ใน 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 แผงเครื่องมือสำหรับนักพัฒนาเว็บจากที่เก็บ chrome-extension-samples

ประเภท

Button

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

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

  • onClicked

    Event<functionvoidvoid>

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

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

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

    • callback

      ฟังก์ชัน

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

      () => void

  • อัปเดต

    void

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

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

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

    • iconPath

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

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

    • tooltipText

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

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

    • ปิดอยู่

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

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

ElementsPanel

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

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

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      ฟังก์ชัน

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

      () => void

  • createSidebarPane

    void

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

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

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

    • title

      สตริง

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 ขึ้นไป

      ระบบจะเรียกใช้ Callback เมื่อสร้างแถบด้านข้าง

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

    void

    เพิ่มปุ่มต่อท้ายแถบสถานะของแผง

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

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

    • iconPath

      สตริง

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

    • tooltipText

      สตริง

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

    • ปิดอยู่

      บูลีน

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

  • แสดง

    void

    Chrome 140 ขึ้นไป browser.* ตั้งแต่ Chrome 152

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

    ฟังก์ชัน 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

    void

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

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

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

    • นิพจน์

      สตริง

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

    • rootTitle

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

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

    • returns

      Promise<void>

      Chrome 152 ขึ้นไป

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

  • setHeight

    void

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

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

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

    • ความสูง

      สตริง

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

  • setObject

    void

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

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

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

    • jsonObject

      สตริง

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

    • rootTitle

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

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

    • returns

      Promise<void>

      Chrome 152 ขึ้นไป

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

  • setPage

    void

    ตั้งค่าหน้า HTML ให้แสดงในแผงแถบด้านข้าง

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

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

    • เส้นทาง

      สตริง

      Relative Path ของหน้าส่วนขยายที่จะแสดงภายในแถบด้านข้าง

SourcesPanel

แสดงแผงแหล่งข้อมูล

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

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      ฟังก์ชัน

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

      () => void

  • createSidebarPane

    void

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

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

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

    • title

      สตริง

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 ขึ้นไป

      ระบบจะเรียกใช้ Callback เมื่อสร้างแถบด้านข้าง

Theme

Chrome 99 ขึ้นไป browser.* ตั้งแต่ Chrome 152

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

ค่าแจกแจง

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

"dark"
ธีมมืด

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

elements

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

ประเภท

ElementsPanel

sources

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

ประเภท

SourcesPanel

themeName

Chrome 59 ขึ้นไป browser.* ตั้งแต่ Chrome 152

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

ประเภท

สตริง

เมธอด

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

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

พารามิเตอร์

  • title

    สตริง

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

  • iconPath

    สตริง

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

  • pagePath

    สตริง

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

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

  • Promise<ExtensionPanel>

    Chrome 152 ขึ้นไป

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

openResource()

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

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

พารามิเตอร์

  • URL

    สตริง

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

  • lineNumber

    ตัวเลข

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

  • columnNumber

    number ไม่บังคับ

    Chrome 114 ขึ้นไป เบราว์เซอร์* ตั้งแต่ Chrome 152

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

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

  • Promise<void>

    Chrome 152 ขึ้นไป

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

setOpenResourceHandler()

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

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

พารามิเตอร์

  • callback

    function ไม่บังคับ

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

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

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

      แหล่งข้อมูล

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

    • lineNumber

      ตัวเลข

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

setThemeChangeHandler()

Chrome 99 ขึ้นไป browser.* ตั้งแต่ Chrome 152 
browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

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

พารามิเตอร์

  • callback

    function ไม่บังคับ

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

    (theme: Theme) => void

    • ธีม [theme]

      ธีม

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