תוספים של DevTools מוסיפים תכונות ל-Chrome DevTools באמצעות גישה לממשקי ה-API של תוספים שספציפיים ל-DevTools, דרך דף כלי הפיתוח שנוסף לתוסף.
ממשקי ה-API של התוספים הספציפיים לכלי פיתוח כוללים:
הדף 'כלי פיתוח'
כשנפתח חלון של כלי פיתוח, תוסף של DevTools יוצר מופע של דף כלי הפיתוח שלו שקיים כל עוד החלון פתוח. לדף הזה יש גישה לממשקי ה-API של DevTools API ולתוספים, והוא יכול לבצע את הפעולות הבאות:
- יצירת לוחות ואינטראקציה איתם באמצעות ממשקי ה-API של
devtools.panels
, כולל הוספה של דפי תוספים אחרים כלוחות או כסרגלי צד לחלון של כלי הפיתוח. - ממשקי ה-API של
devtools.inspectedWindow
יעזרו לכם לקבל מידע על החלון שנבדק ולהעריך את הקוד בחלון שנבדק. - קבלת מידע על בקשות לרשתות באמצעות ממשקי ה-API של
devtools.network
. - להרחיב את חלונית מכשיר ההקלטה באמצעות ממשקי ה-API של
devtools.recorder
.
הדף של כלי הפיתוח יכול לגשת ישירות לממשקי ה-API של התוספים. ההרשאות כוללות את היכולת לתקשר עם Service Worker באמצעות העברת הודעות.
איך יוצרים תוסף לכלי פיתוח
על מנת ליצור דף של כלי פיתוח לתוסף, צריך להוסיף את השדה devtools_page
במניפסט של התוסף:
{
"name": ...
"version": "1.0",
"devtools_page": "devtools.html",
...
}
השדה devtools_page
חייב להצביע על דף HTML. מכיוון שהדף של כלי הפיתוח חייב להיות מקומי לתוסף, מומלץ לציין אותו באמצעות כתובת URL יחסית.
החברים ב-chrome.devtools
API זמינים רק לדפים שנטענים בחלון של כלי הפיתוח, כשהחלון הזה פתוח. לסקריפטים של תוכן ולדפי תוספים אחרים אין גישה לממשקי ה-API האלה.
רכיבי ממשק משתמש של כלי פיתוח: חלוניות וחלוניות של סרגלי צד
בנוסף לרכיבים הרגילים בממשק המשתמש של התוספים, כמו פעולות בדפדפן, תפריטי הקשר וחלונות קופצים, תוסף של כלי פיתוח יכול להוסיף רכיבים בממשק המשתמש לחלון של כלי הפיתוח:
- חלונית היא כרטיסייה ברמה העליונה, כגון החלוניות 'רכיבים', 'מקורות' ו'רשת'.
- בחלונית צדדית מוצג ממשק משתמש משלים שקשור לחלונית. החלוניות Styles, Computed Styles ו-Event Listeners בחלונית Elements הן דוגמאות לחלוניות בסרגל צד. בהתאם לגרסת Chrome שבה אתם משתמשים ולמיקום שבו אביזר העגינה של חלון DevTools, החלוניות של סרגל הצד עשויות להיראות כמו התמונה לדוגמה הבאה:
כל לוח הוא קובץ HTML משלו, שיכול לכלול משאבים אחרים (JavaScript, CSS, תמונות וכו'). כדי ליצור לוח בסיסי, משתמשים בקוד הבא:
chrome.devtools.panels.create("My Panel",
"MyPanelIcon.png",
"Panel.html",
function(panel) {
// code invoked on panel creation
}
);
ל-JavaScript שמופעל בחלונית או בחלונית סרגל צד יש גישה לאותם ממשקי API כמו הדף של כלי הפיתוח.
כדי ליצור חלונית בסיסית של סרגל צד, משתמשים בקוד הבא:
chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
function(sidebar) {
// sidebar initialization code here
sidebar.setObject({ some_data: "Some data to show" });
});
יש כמה דרכים להציג תוכן בחלונית של סרגל הצד:
- תוכן HTML: צריך להפעיל את
setPage()
כדי לציין דף HTML שיוצג בחלונית. - נתוני JSON: מעבירים אובייקט JSON אל
setObject()
. - ביטוי JavaScript: מעבירים ביטוי אל
setExpression()
. כלי הפיתוח מעריך את הביטוי בהקשר של הדף שנבדק, ואז מציג את הערך המוחזר.
גם ב-setObject()
וגם ב-setExpression()
, הערך בחלונית מציג את הערך כפי שהוא יופיע
במסוף כלי הפיתוח. עם זאת, ב-setExpression()
אפשר להציג רכיבי DOM ואובייקטים שרירותיים של JavaScript, ואילו ב-setObject()
יש תמיכה רק באובייקטים של JSON.
תקשורת בין רכיבי התוסף
בקטעים הבאים מתוארות כמה דרכים מועילות לאפשר לרכיבי התוספים של כלי הפיתוח לתקשר זה עם זה.
החדרה של סקריפט תוכן
כדי להחדיר סקריפט תוכן, משתמשים ב-scripting.executeScript()
:
// DevTools page -- devtools.js
chrome.scripting.executeScript({
target: {
tabId: chrome.devtools.inspectedWindow.tabId
},
files: ["content_script.js"]
});
אפשר לאחזר את מזהה הכרטיסייה של החלון שנבדק באמצעות הנכס inspectedWindow.tabId
.
אם כבר הוחדר סקריפט תוכן, תוכלו להשתמש בממשקי API להעברת הודעות כדי לתקשר איתו.
הערכת ה-JavaScript בחלון שנבדק
אפשר להשתמש בשיטה inspectedWindow.eval()
כדי להפעיל קוד JavaScript בהקשר של הדף שנבדק. אפשר להפעיל את השיטה eval()
מדף של כלי פיתוח, מחלונית או מחלונית בסרגל הצד.
כברירת מחדל, הביטוי מוערך בהקשר של המסגרת הראשית של הדף.
ב-inspectedWindow.eval()
נעשה שימוש באותו הקשר ובאפשרויות לביצוע סקריפטים כמו בקוד שהוזן במסוף DevTools, שמאפשר גישה לתכונות DevTools Utilities API של כלי הפיתוח במהלך השימוש ב-eval()
. לדוגמה, הפונקציה SOAK משתמשת בו כדי לבדוק רכיב:
chrome.devtools.inspectedWindow.eval(
"inspect($$('head script[data-soak=main]')[0])",
function(result, isException) { }
);
אפשר גם להגדיר את useContentScriptContext
לערך true
כשמפעילים את inspectedWindow.eval()
כדי להעריך את הביטוי באותו הקשר שבו נמצאים הסקריפטים של התוכן. כדי להשתמש באפשרות הזו, צריך להשתמש בהצהרה לגבי סקריפט תוכן סטטי לפני הקריאה ל-eval()
, על ידי קריאה ל-executeScript()
או על ידי ציון סקריפט תוכן בקובץ manifest.json
. אחרי שההקשר של סקריפט ההקשר נטען, אפשר להשתמש באפשרות הזו גם כדי להחדיר סקריפטים נוספים של תוכן.
העברת הרכיב שנבחר אל סקריפט תוכן
לסקריפט התוכן אין גישה ישירה לרכיב הנוכחי שנבחר. עם זאת, לכל קוד שמריצים באמצעות inspectedWindow.eval()
יש גישה למסוף כלי הפיתוח ולממשקי ה-API של כלי השירות במסוף. לדוגמה, בקוד מוערך אפשר להשתמש ב-$0
כדי לגשת לרכיב שנבחר.
כדי להעביר את הרכיב שנבחר לסקריפט תוכן:
יוצרים שיטה בסקריפט התוכן שלוקחת את הרכיב שנבחר כארגומנט.
function setSelectedElement(el) { // do something with the selected element }
קוראים לשיטה מהדף של כלי הפיתוח באמצעות
inspectedWindow.eval()
עם האפשרותuseContentScriptContext: true
.chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });
האפשרות useContentScriptContext: true
מציינת שצריך להעריך את הביטוי באותו הקשר שבו נמצאים הסקריפטים של התוכן, כדי שתהיה לו גישה ל-method setSelectedElement
.
קבלת window
של חלונית עזר
כדי להפעיל את postMessage()
מחלונית של devtools, נדרשת הפניה לאובייקט window
שלו. קבלו את חלון iframe של פאנל מה-handler של האירועים panel.onShown
:
extensionPanel.onShown.addListener(function (extPanelWindow) {
extPanelWindow instanceof Window; // true
extPanelWindow.postMessage( // …
});
שליחת הודעות מסקריפטים שהוחדרו לדף כלי הפיתוח
קוד שהוחדר ישירות לדף בלי סקריפט תוכן, כולל על ידי הוספת תג <script>
או קריאה ל-inspectedWindow.eval()
, לא יכול לשלוח הודעות לדף כלי הפיתוח באמצעות runtime.sendMessage()
. במקום זאת, מומלץ לשלב את הסקריפט המוחדר עם סקריפט תוכן שיכול לשמש כמתווך, ולהשתמש בשיטה window.postMessage()
. בדוגמה הבאה נשתמש בסקריפט הרקע מהקטע הקודם:
// injected-script.js
window.postMessage({
greeting: 'hello there!',
source: 'my-devtools-extension'
}, '*');
// content-script.js
window.addEventListener('message', function(event) {
// Only accept messages from the same frame
if (event.source !== window) {
return;
}
var message = event.data;
// Only accept messages that we know are ours. Note that this is not foolproof
// and the page can easily spoof messages if it wants to.
if (typeof message !== 'object' || message === null ||
message.source !== 'my-devtools-extension') {
return;
}
chrome.runtime.sendMessage(message);
});
אפשר למצוא שיטות חלופיות אחרות להעברת מסרים ב-GitHub.
זיהוי פתיחה וסגירה של כלי הפיתוח
כדי לבדוק אם חלון ה-DevTools פתוח, מוסיפים האזנה ל-onConnect ל-Service Worker וקוראים ל-connect() בדף DevTools. מכיוון שלכל כרטיסייה יכול להיות חלון נפרד של כלי פיתוח, יכול להיות שתקבלו מספר אירועי התחברות. כדי לעקוב אחרי פתיחה של חלון כלשהו של כלי פיתוח, צריך לספור את אירועי ההתחברות והניתוק כמו בדוגמה הבאה:
// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
if (port.name == "devtools-page") {
if (openCount == 0) {
alert("DevTools window opening.");
}
openCount++;
port.onDisconnect.addListener(function(port) {
openCount--;
if (openCount == 0) {
alert("Last DevTools window closing.");
}
});
}
});
הדף של כלי הפיתוח יוצר חיבור כזה:
// devtools.js
// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
name: "devtools-page"
});
// Send a periodic heartbeat to keep the port open.
setInterval(() => {
port.postMessage("heartbeat");
}, 15000);
דוגמאות לתוספים של כלי פיתוח
הדוגמאות בדף הזה מגיעות מהדפים הבאים:
- תוסף Polymer Devtools – משתמש בכלי עזר רבים שפועלים בדף המארח כדי לשלוח שאילתות לגבי מצב DOM/JS כדי לשלוח חזרה לחלונית המותאמת אישית.
- תוסף React DevTools – משתמש במודול משנה של כלי הרינדור כדי לעשות שימוש חוזר ברכיבי ממשק המשתמש של DevTools.
- Ember Inspector – ליבת תוסף משותפת עם מתאמים גם ל-Chrome וגם ל-Firefox.
- Coquette-inspect – תוסף נקי שמבוסס על React עם סוכן לניפוי באגים שמוזרק לדף המארח.
- לתוספים לדוגמה יש תוספים ששווים יותר להתקנה, להתנסות בהם וללמוד מהם.
מידע נוסף
מידע נוסף על ממשקי ה-API הרגילים שבהם תוספים יכולים להשתמש זמין בכתובת chrome.* ממשקי API וממשקי API לאינטרנט.
נשמח לקבל משוב! ההערות וההצעות שלך יעזרו לנו לשפר את ממשקי ה-API.
דוגמאות
בקטע טעימות תוכלו למצוא דוגמאות לשימוש בממשקי API של DevTools.