chrome.devtools.panels

תיאור

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

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

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

סיכום של ממשקי ה-API של Developer Tools – מבוא כללי לשימוש בממשקי ה-API של Developer Tools.

מניפסט

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

"devtools_page"

דוגמה

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

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

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

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

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

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

כדי לנסות את ה-API הזה, צריך להתקין את הדוגמה ל-API של devtools panels מהמאגר 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

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

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

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

  • title

    מחרוזת

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

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

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

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

    (result: ExtensionSidebarPane) => void

    • תוצאה

      ExtensionSidebarPane

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

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. הסמל הימני מוצג כשהלחצן לוחץ, והסמל השמאלי מוצג כשהלחצן לא לוחץ.

  • tooltipText

    מחרוזת

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

  • הושבת

    בוליאני

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

  • החזרות

    Button

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

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

  הפונקציה 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

  Event<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.

סוג

מחרוזת

Methods

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,
)

הבקשה גורמת ל-DevTools לפתוח כתובת URL בחלונית של הכלים למפתחים.

פרמטרים

• כתובת אתר

  מחרוזת

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

• lineNumber

  number

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

• columnNumber

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

  גרסה 114 ואילך של Chrome

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

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

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

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

  () => void

setOpenResourceHandler()

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

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

פרמטרים

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

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

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

  (resource: Resource) => void

  • משאב

    משאב

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