chrome.devtools.panels

תאריך הרענון: 2026-09-25 robots: noindex

תיאור

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

מניפסט

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

"devtools_page"

במאמר סיכום של ממשקי DevTools API יש מבוא כללי לשימוש בממשקי API של כלים למפתחים.

סקירה כללית

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

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

דוגמאות

הקוד הבא מוסיף חלונית שנמצאת ב-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");
  }
);

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

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

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

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

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

    • הושבת

      ‫boolean אופציונלי

      האם הכפתור מושבת.

ElementsPanel

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

מאפיינים

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      פונקציה

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

      () => void

  • createSidebarPane

    void

    Promise

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

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

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

    • title

      מחרוזת

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

    • callback

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

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

      (result: ExtensionSidebarPane) => void

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

    • החזרות

      Promise<ExtensionSidebarPane>

      ‫Chrome 152 ואילך

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

      התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

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

      מחרוזת

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

    • הושבת

      בוליאני

      האם הכפתור מושבת.

  • הצג

    void

    ‫Chrome 140+‎

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

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

    () => {...}

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

    Promise

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

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

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

    • ביטוי

      מחרוזת

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

    • rootTitle

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

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

    • callback

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

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

      () => void

    • החזרות

      Promise<void>

      ‫Chrome 152 ואילך

      קריאה חוזרת (callback) שמופעלת אחרי שחלונית סרגל הצד מתעדכנת עם תוצאות הערכת הביטוי.

      התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

  • setHeight

    void

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

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

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

    • גובה

      מחרוזת

      ציון גודל בסגנון CSS, כמו '100px' או '12ex'.

  • setObject

    void

    Promise

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

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

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

    • jsonObject

      מחרוזת

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

    • rootTitle

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

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

    • callback

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

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

      () => void

    • החזרות

      Promise<void>

      ‫Chrome 152 ואילך

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

      התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

  • setPage

    void

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

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

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

    • נתיב

      מחרוזת

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

SourcesPanel

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

מאפיינים

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      פונקציה

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

      () => void

  • createSidebarPane

    void

    Promise

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

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

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

    • title

      מחרוזת

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

    • callback

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

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

      (result: ExtensionSidebarPane) => void

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

    • החזרות

      Promise<ExtensionSidebarPane>

      ‫Chrome 152 ואילך

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

      התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

Theme

‫Chrome 99 ואילך

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

ספירה

‫default
העיצוב שמוגדר כברירת מחדל בכלי הפיתוח. העיצוב הזה תמיד בהיר.

‫'dark'
עיצוב כהה.

מאפיינים

elements

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

סוג

ElementsPanel

sources

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

סוג

SourcesPanel

themeName

Chrome 59 ואילך

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

סוג

מחרוזת

Methods

create()

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

יוצר לוח הרחבות.

פרמטרים

  • title

    מחרוזת

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

  • iconPath

    מחרוזת

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

  • pagePath

    מחרוזת

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

  • callback

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

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

    (panel: ExtensionPanel) => void

    • חלונית

      ExtensionPanel

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

החזרות

  • Promise<ExtensionPanel>

    ‫Chrome 152 ואילך

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

    התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

openResource()

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

הבקשה מופנית אל DevTools לפתוח כתובת URL בחלונית של DevTools.

פרמטרים

  • url

    מחרוזת

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

  • lineNumber

    number

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

  • columnNumber

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

    ‫Chrome 114 ואילך

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

  • callback

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

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

    () => void

החזרות

  • Promise<void>

    ‫Chrome 152 ואילך

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

    התמיכה ב-Promises קיימת רק ב-Manifest V3 ואילך. בפלטפורמות אחרות צריך להשתמש ב-callbacks.

setOpenResourceHandler()

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

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

פרמטרים

  • callback

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

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

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

‫Chrome 99 ואילך 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

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

פרמטרים

  • callback

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

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

    (theme: Theme) => void

    • עיצוב

      עיצוב

      העיצוב הנוכחי בכלי הפיתוח.