chrome.devtools.panels

תיאור

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

מניפסט

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

"devtools_page"

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

סקירה כללית

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

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

דוגמאות

הקוד הבא מוסיף לוח שכלול ב-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

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • עדכון

    ריק

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

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

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

    • iconPath

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

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

    • tooltipText

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

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

    • הושבת

      ערך בוליאני אופציונלי

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

ElementsPanel

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

מאפיינים

  • onSelectionChanged

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • createSidebarPane

    ריק

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

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

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

    • title

      מחרוזת

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

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

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

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

      (result: ExtensionSidebarPane) => void

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

ExtensionPanel

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

מאפיינים

  • onHidden

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • onSearch

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

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

      • פעולה

        מחרוזת

      • queryString

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

  • onShown

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      (window: Window) => void

      • חלון

        חלון

  • createStatusBarButton

    ריק

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

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

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

    • iconPath

      מחרוזת

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

    • tooltipText

      מחרוזת

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

    • הושבת

      בוליאני

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

ExtensionSidebarPane

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

מאפיינים

  • onHidden

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • onShown

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      (window: Window) => void

      • חלון

        חלון

  • setExpression

    ריק

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

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

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

    • ביטוי

      מחרוזת

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

    • rootTitle

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

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

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

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

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

      () => void

  • setHeight

    ריק

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

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

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

    • גובה

      מחרוזת

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

  • setObject

    ריק

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

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

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

    • jsonObject

      מחרוזת

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

    • rootTitle

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

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

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

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

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

      () => void

  • setPage

    ריק

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

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

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

    • נתיב

      מחרוזת

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

SourcesPanel

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

מאפיינים

  • onSelectionChanged

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • createSidebarPane

    ריק

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

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

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

    • title

      מחרוזת

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

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

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

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

      (result: ExtensionSidebarPane) => void

      • אובייקט 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

    number

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

  • columnNumber

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

    Chrome 114 ואילך

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

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

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

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

    () => void

setOpenResourceHandler()

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

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

פרמטרים