תיאור
אפשר להשתמש ב-API של chrome.devtools.panels
כדי לשלב את התוסף בממשק המשתמש של החלון של הכלים למפתחים: ליצור לוחות משלכם, לגשת ללוחות קיימים ולהוסיף סרגלי צד.
כל חלונית וסרגל הצד של התוסף מוצגים כדף HTML נפרד. כל דפי התוסף מוצגים
בחלון 'כלים למפתחים', תהיה גישה לכל החלקים של ה-API של chrome.devtools
, וכן לכל
ממשקי 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
והכותרת מאפייני גופנים היא
חלונית הרכיבים ואז מגדירה את הגובה שלה ל-8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
צילום המסך ממחיש את ההשפעה של הדוגמה הזו על החלון של 'כלים למפתחים':
![חלונית סמל התוסף בסרגל הכלים של כלי הפיתוח](https://developer.chrome.google.cn/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=5&hl=he)
כדי לנסות את ה-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
חלונית הרכיבים.
סוג
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
number
מציינת את מספר השורה שאליה צריך לגלול כשהמשאב נטען.
-
columnNumber
מספר אופציונלי
Chrome 114 ואילךמציינת את מספר העמודה שאליה צריך לגלול כשהמשאב נטען.
-
קריאה חוזרת (callback)
פונקציה אופציונלית
הפרמטר
callback
נראה כך:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
מציינת את הפונקציה שתיקרא כשהמשתמש לוחץ על קישור למשאב בחלון 'כלים למפתחים'. כדי לבטל את ההגדרה של ה-handler, אפשר לקרוא לשיטה ללא פרמטרים או להעביר את הערך null כפרמטר.
פרמטרים
-
קריאה חוזרת (callback)
פונקציה אופציונלית
הפרמטר
callback
נראה כך:(resource: Resource) => void
-
משאב
אובייקט
devtools.inspectedWindow.Resource
למשאב שעליו לחצו.
-