תיאור
ניתן להשתמש ב-API של chrome.devtools.panels
כדי לשלב את התוסף בממשק המשתמש של חלון הכלים למפתחים: יוצרים לוחות משלכם, ניגשים ללוחות קיימים ומוסיפים סרגלי צד.
כל חלונית וסרגל צד של תוסף מוצגים כדף HTML נפרד. לכל דפי התוספים שמוצגים בחלון 'כלים למפתחים' יש גישה לכל המודולים ב-chrome.devtools
API, וגם ל-chrome.extension API. ממשקי API אחרים של תוספים אינם זמינים לדפים בחלון 'כלים למפתחים', אך אפשר להפעיל אותם על ידי שליחת בקשה לדף הרקע של התוסף, בדומה לאופן שבו עושים זאת בסקריפטים של תוכן.
אפשר להשתמש בשיטה devtools.panels.setOpenResourceHandler
כדי להתקין פונקציית קריאה חוזרת שמטפלת בבקשות של משתמשים לפתיחת משאב (בדרך כלל, לחיצה על קישור למשאב בחלון הכלים למפתחים). לכל היותר מתבצעת קריאה לאחד מה-handlers שהותקנו; המשתמשים יכולים לציין (באמצעות תיבת הדו-שיח 'הגדרות של כלים למפתחים') את התנהגות ברירת המחדל או תוסף לטיפול בבקשות פתוחות של משאבים. אם תוסף מבצע קריאה ל-setOpenResourceHandler()
כמה פעמים, רק ה-handler האחרון נשמר.
אפשר לעיין בסיכום של ממשקי ה-API למפתחים כדי לקבל מבוא כללי לשימוש בממשקי ה-API של כלים למפתחים.
מניפסט
דוגמה
הקוד הבא מוסיף חלונית שכלולה בתוך 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 לחלונית סרגל הצד שנוצרה.
-
-
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
האם הלחצן מושבת.
-
החזרות
-
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 לחלונית סרגל הצד שנוצרה.
-
-
תכונות
elements
חלונית הרכיבים.
סוג
sources
החלונית 'מקורות'.
סוג
themeName
השם של עיצוב הצבע שהוגדר בהגדרות של כלי הפיתוח של המשתמש. ערכים אפשריים: 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 שמייצג את החלונית שנוצרה.
-
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
של המשאב שעליו לחץ המשתמש.
-