chrome.devtools.panels

תיאור

ניתן להשתמש ב-API של chrome.devtools.panels כדי לשלב את התוסף בממשק המשתמש של חלון הכלים למפתחים: יוצרים לוחות משלכם, ניגשים ללוחות קיימים ומוסיפים סרגלי צד.

כל חלונית וסרגל צד של תוסף מוצגים כדף HTML נפרד. לכל דפי התוספים שמוצגים בחלון 'כלים למפתחים' יש גישה לכל המודולים ב-chrome.devtools API, וגם ל-chrome.extension API. ממשקי API אחרים של תוספים אינם זמינים לדפים בחלון 'כלים למפתחים', אך אפשר להפעיל אותם על ידי שליחת בקשה לדף הרקע של התוסף, בדומה לאופן שבו עושים זאת בסקריפטים של תוכן.

אפשר להשתמש בשיטה devtools.panels.setOpenResourceHandler כדי להתקין פונקציית קריאה חוזרת שמטפלת בבקשות של משתמשים לפתיחת משאב (בדרך כלל, לחיצה על קישור למשאב בחלון הכלים למפתחים). לכל היותר מתבצעת קריאה לאחד מה-handlers שהותקנו; המשתמשים יכולים לציין (באמצעות תיבת הדו-שיח 'הגדרות של כלים למפתחים') את התנהגות ברירת המחדל או תוסף לטיפול בבקשות פתוחות של משאבים. אם תוסף מבצע קריאה ל-setOpenResourceHandler() כמה פעמים, רק ה-handler האחרון נשמר.

אפשר לעיין בסיכום של ממשקי ה-API למפתחים כדי לקבל מבוא כללי לשימוש בממשקי ה-API של כלים למפתחים.

מניפסט

כדי להשתמש ב-API הזה, צריך להצהיר על המפתחות הבאים במניפסט.

"devtools_page"

דוגמה

הקוד הבא מוסיף חלונית שכלולה בתוך Panel.html, שמיוצגת על ידי FontPicker.png בסרגל הכלים של הכלים למפתחים ומסומנת בתור בוחר הגופנים:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

הקוד הבא מוסיף חלונית סרגל צד שכלולה בתוך Sidebar.html וכותרת Font Properties (מאפייני גופנים) לחלונית Elements (רכיבים), ואז מגדיר את הגובה שלה ל-8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

צילום המסך ממחיש את ההשפעה שתהיה לדוגמה הזו על החלון 'כלים למפתחים':

החלונית של סמלי התוספים בסרגל הכלים של כלי הפיתוח.

כדי לנסות את ה-API הזה, התקינו את דוגמה ל-API של devtools Panel מהמאגר chrome-extension-samples.

סוגים

Button

לחצן שנוצר על ידי התוסף.

תכונות

• onClicked

  אירוע<functionvoidvoid>

  מופעל כשלוחצים על הלחצן.

  הפונקציה onClicked.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• update

  void

  עדכון התכונות של הלחצן. אם משמיטים חלק מהארגומנטים או משמיטים את הערך null, המאפיינים התואמים לא מתעדכנים.

  הפונקציה update נראית כך:

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

  • iconPath

    מחרוזת אופציונלי

    נתיב לסמל החדש של הלחצן.

  • tooltipText

    מחרוזת אופציונלי

    טקסט שמוצג כהסבר קצר כשמשתמש מעביר את העכבר מעל הלחצן.

  • הושבת

    בוליאני אופציונלי

    האם הלחצן מושבת.

ElementsPanel

מייצג את חלונית הרכיבים.

תכונות

• onSelectionChanged

  אירוע<functionvoidvoid>

  מופעל כשאובייקט נבחר בלוח.

  הפונקציה onSelectionChanged.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• createSidebarPane

  void

  יצירת חלונית בסרגל הצד של הלוח.

  הפונקציה createSidebarPane נראית כך:

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

  • title

    מחרוזת

    טקסט שמוצג בכיתוב בסרגל הצד.

  • קריאה חוזרת (callback)

    פונקציה אופציונלי

    הפרמטר callback נראה כך:

    (result: ExtensionSidebarPane)=>void

    • תוצאה אחת

      ExtensionSidebarPane

      אובייקט ExtensionSidebarPane לחלונית סרגל הצד שנוצרה.

ExtensionPanel

מייצג לוח שנוצר על ידי התוסף.

תכונות

• onHidden

  אירוע<functionvoidvoid>

  מופעל כשהמשתמש יוצא מהלוח.

  הפונקציה onHidden.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• onSearch

  אירוע<functionvoidvoid>

  הופעל בעקבות פעולת חיפוש (התחלת חיפוש חדש, ניווט בתוצאות חיפוש או חיפוש שבוטל).

  הפונקציה onSearch.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

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

    • פעולה

      מחרוזת

    • queryString

      מחרוזת אופציונלי

• onShown

  אירוע<functionvoidvoid>

  מופעל כשהמשתמש עובר לחלונית.

  הפונקציה onShown.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    (window: Window)=>void

    • חלון

      חלון

• createStatusBarButton

  void

  צירוף לחצן לשורת הסטטוס של הלוח.

  הפונקציה createStatusBarButton נראית כך:

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

  • iconPath

    מחרוזת

    נתיב לסמל של הלחצן. הקובץ צריך להכיל תמונה בגודל 64x24 פיקסלים שמורכבת משני סמלים בגודל 32x24. הסמל השמאלי מוצג כשהלחצן לא פעיל. הסמל הימני מוצג כשלוחצים על הלחצן.

  • tooltipText

    מחרוזת

    טקסט שמוצג כהסבר קצר כשמשתמש מעביר את העכבר מעל הלחצן.

  • הושבת

    boolean

    האם הלחצן מושבת.

  • החזרות

    Button

ExtensionSidebarPane

סרגל צד שנוצר על ידי התוסף.

תכונות

• onHidden

  אירוע<functionvoidvoid>

  מופעל כאשר חלונית סרגל הצד מוסתרת כתוצאה ממעבר של המשתמש מהחלונית שמארחת את חלונית סרגל הצד.

  הפונקציה onHidden.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• onShown

  אירוע<functionvoidvoid>

  מופעל כשחלונית סרגל הצד הופכת לגלויה כתוצאה ממעבר של המשתמש לחלונית שמארחת אותה.

  הפונקציה onShown.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    (window: Window)=>void

    • חלון

      חלון

• setExpression

  void

  מגדיר ביטוי שמוערך בדף שנבדק. התוצאה תוצג בחלונית של סרגל הצד.

  הפונקציה setExpression נראית כך:

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

  • ביטוי

    מחרוזת

    ביטוי לבדיקה בהקשר של הדף שנבדק. אובייקטי JavaScript וצומתי DOM מוצגים בעץ שניתן להרחבה, בדומה ללוח/לשעון.

  • rootTitle

    מחרוזת אופציונלי

    כותרת אופציונלית לשורש של עץ הביטויים.

  • קריאה חוזרת (callback)

    פונקציה אופציונלי

    הפרמטר callback נראה כך:

    ()=>void

• setHeight

  void

  הגדרת הגובה של סרגל הצד.

  הפונקציה setHeight נראית כך:

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

  • גובה

    מחרוזת

    מפרט גודל דמוי-CSS, כגון '100px' או '12ex'.

• setObject

  void

  מגדירה אובייקט תואם JSON שיוצג בחלונית של סרגל הצד.

  הפונקציה setObject נראית כך:

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

  • jsonObject

    מחרוזת

    אובייקט שיוצג בהקשר של הדף שנבדק. הערכה בהקשר של מבצע הקריאה החוזרת (לקוח API).

  • rootTitle

    מחרוזת אופציונלי

    כותרת אופציונלית לשורש של עץ הביטויים.

  • קריאה חוזרת (callback)

    פונקציה אופציונלי

    הפרמטר callback נראה כך:

    ()=>void

• setPage

  void

  מגדיר דף HTML להצגה בחלונית של סרגל הצד.

  הפונקציה setPage נראית כך:

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

  • נתיב

    מחרוזת

    נתיב יחסי של דף תוסף להצגה בסרגל הצד.

SourcesPanel

העמודה הזו מייצגת את החלונית 'מקורות'.

תכונות

• onSelectionChanged

  אירוע<functionvoidvoid>

  מופעל כשאובייקט נבחר בלוח.

  הפונקציה onSelectionChanged.addListener נראית כך:

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

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• createSidebarPane

  void

  יצירת חלונית בסרגל הצד של הלוח.

  הפונקציה createSidebarPane נראית כך:

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

  • title

    מחרוזת

    טקסט שמוצג בכיתוב בסרגל הצד.

  • קריאה חוזרת (callback)

    פונקציה אופציונלי

    הפרמטר callback נראה כך:

    (result: ExtensionSidebarPane)=>void

    • תוצאה אחת

      ExtensionSidebarPane

      אובייקט ExtensionSidebarPane לחלונית סרגל הצד שנוצרה.

תכונות

elements

חלונית הרכיבים.

סוג

ElementsPanel

sources

החלונית 'מקורות'.

סוג

SourcesPanel

themeName

Chrome 59 ומעלה

השם של עיצוב הצבע שהוגדר בהגדרות של כלי הפיתוח של המשתמש. ערכים אפשריים: default (ברירת המחדל) ו-dark.

סוג

מחרוזת

שיטות

create()

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

יוצרת חלונית תוסף.

פרמטרים

• title

  מחרוזת

  הכותרת שמוצגת לצד סמל התוסף בסרגל הכלים למפתחים.

• iconPath

  מחרוזת

  הנתיב של סמל הלוח ביחס לספריית התוספים.

• pagePath

  מחרוזת

  נתיב דף ה-HTML של הלוח, יחסית לספריית התוספים.

• קריאה חוזרת (callback)

  פונקציה אופציונלי

  הפרמטר callback נראה כך:

  (panel: ExtensionPanel)=>void

  • חלונית

    ExtensionPanel

    אובייקט ExtensionPanel שמייצג את החלונית שנוצרה.

openResource()

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

בקשה מכלי הפיתוח לפתוח כתובת URL בחלונית 'כלים למפתחים'.

פרמטרים

• כתובת אתר

  מחרוזת

  כתובת ה-URL של המשאב שצריך לפתוח.

• lineNumber

  מספר

  מציינת את מספר השורה שיש לגלול אליה כשהמשאב נטען.

• columnNumber

  מספר אופציונלי

  Chrome 114 ומעלה

  מציינת את מספר העמודה שיש לגלול אליה כשהמשאב נטען.

• קריאה חוזרת (callback)

  פונקציה אופציונלי

  הפרמטר callback נראה כך:

  ()=>void

setOpenResourceHandler()

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

ההגדרה קובעת את הקריאה לפונקציה כשהמשתמש לוחץ על קישור למשאב בחלון 'כלים למפתחים'. כדי לבטל את ההגדרה של ה-handler, צריך לקרוא לשיטה ללא פרמטרים או להעביר את הערך null כפרמטר.

פרמטרים

• קריאה חוזרת (callback)

  פונקציה אופציונלי

  הפרמטר callback נראה כך:

  (resource: Resource)=>void

  • מקור מידע

    משאב

    אובייקט devtools.inspectedWindow.Resource של המשאב שעליו לחץ המשתמש.