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

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

    מחרוזת

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

  • הושבת

    בוליאני

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

  • החזרות

    Button

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

      אובייקט 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 כפרמטר.

פרמטרים

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

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

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

  (resource: Resource) => void

  • משאב

    משאב

    אובייקט devtools.inspectedWindow.Resource למשאב שעליו לחצו.