דף זה תורגם על ידי Cloud Translation API.

הרחבת כלי הפיתוח

תוספים של DevTools מוסיפים תכונות ל-Chrome DevTools באמצעות גישה לממשקי ה-API של תוספים שספציפיים ל-DevTools, דרך דף כלי הפיתוח שנוסף לתוסף.

תרשים ארכיטקטורה שבו מוצג דף כלי הפיתוח לתקשורת עם החלון שנבדק ועם קובץ השירות (service worker). מוצג קובץ השירות (service worker) כשהוא מתקשר עם הסקריפטים של התוכן ואת הגישה לממשקי ה-API של התוספים.
לדף 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, החלוניות של סרגל הצד עשויות להיראות כמו התמונה לדוגמה הבאה:

חלון של כלי פיתוח, עם החלונית 'רכיבים' וחלונית סרגל הצד של 'סגנונות'. — החלון של 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() מדף של כלי פיתוח, מחלונית או מחלונית בסרגל הצד.

זהירות: יש להשתמש ב-eval() רק אם אתם צריכים גישה לתוכן JavaScript בדף שנבדק. אחרת, מומלץ להשתמש בשיטה scripting.executeScript() כדי להריץ סקריפטים. מידע נוסף זמין במאמר inspectedWindow.

כברירת מחדל, הביטוי מוערך בהקשר של המסגרת הראשית של הדף. ב-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.

הרחבת כלי הפיתוח

הדף 'כלי פיתוח'

איך יוצרים תוסף לכלי פיתוח

רכיבי ממשק משתמש של כלי פיתוח: חלוניות וחלוניות של סרגלי צד

תקשורת בין רכיבי התוסף

החדרה של סקריפט תוכן

הערכת ה-JavaScript בחלון שנבדק

העברת הרכיב שנבחר אל סקריפט תוכן

קבלת window של חלונית עזר

שליחת הודעות מסקריפטים שהוחדרו לדף כלי הפיתוח

זיהוי פתיחה וסגירה של כלי הפיתוח

דוגמאות לתוספים של כלי פיתוח

מידע נוסף

דוגמאות

קבלת `window` של חלונית עזר