chrome.devtools.panels

คำอธิบาย

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

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

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

ดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ในข้อมูลสรุปเกี่ยวกับ DevTools 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 แผง 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

        ออบเจ็กต์ 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

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

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

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

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

elements

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

ประเภท

ElementsPanel

sources

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

ประเภท

SourcesPanel

themeName

Chrome 59 ขึ้นไป

ชื่อของธีมสีที่ตั้งค่าไว้ในการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บของผู้ใช้ ค่าที่เป็นไปได้คือ 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

      ออบเจ็กต์ 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