chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

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

ไฟล์ Manifest

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

"devtools_page"

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

ภาพรวม

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

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

    Promise

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

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

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

    • title

      สตริง

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

    • callback

      function ไม่บังคับ

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

      (result: ExtensionSidebarPane) => void

      • ผลลัพธ์

        ExtensionSidebarPane

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 ขึ้นไป

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

      ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ 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 ขึ้นไป

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

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

    Promise

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

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

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

    • นิพจน์

      สตริง

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

    • rootTitle

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

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

    • callback

      function ไม่บังคับ

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

      () => void

    • returns

      Promise<void>

      Chrome 152 ขึ้นไป

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

      ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

  • setHeight

    void

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

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

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

    • ความสูง

      สตริง

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

  • setObject

    void

    Promise

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

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

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

    • jsonObject

      สตริง

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

    • rootTitle

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

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

    • callback

      function ไม่บังคับ

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

      () => void

    • returns

      Promise<void>

      Chrome 152 ขึ้นไป

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

      ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

  • setPage

    void

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

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

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

    • เส้นทาง

      สตริง

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

SourcesPanel

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

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

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      ฟังก์ชัน

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

      () => void

  • createSidebarPane

    void

    Promise

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

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

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

    • title

      สตริง

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

    • callback

      function ไม่บังคับ

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

      (result: ExtensionSidebarPane) => void

      • ผลลัพธ์

        ExtensionSidebarPane

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 ขึ้นไป

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

      ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

Theme

Chrome 99 ขึ้นไป

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

ค่าแจกแจง

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

"dark"
ธีมมืด

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

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

    function ไม่บังคับ

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

    (panel: ExtensionPanel) => void

    • แผง

      ExtensionPanel

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

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

  • Promise<ExtensionPanel>

    Chrome 152 ขึ้นไป

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

    ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

openResource()

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

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

พารามิเตอร์

  • URL

    สตริง

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

  • lineNumber

    ตัวเลข

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

  • columnNumber

    number ไม่บังคับ

    Chrome 114 ขึ้นไป

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

  • callback

    function ไม่บังคับ

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

    () => void

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

  • Promise<void>

    Chrome 152 ขึ้นไป

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

    ระบบรองรับ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้ Callback

setOpenResourceHandler()

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

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

พารามิเตอร์

  • callback

    function ไม่บังคับ

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

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

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

      แหล่งข้อมูล

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

    • lineNumber

      ตัวเลข

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

setThemeChangeHandler()

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

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

พารามิเตอร์

  • callback

    function ไม่บังคับ

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

    (theme: Theme) => void

    • ธีม [theme]

      ธีม

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