תוספים לניפוי באגים

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

איתור היומנים

התוספים מורכבים מרכיבים רבים ושונים, לכל אחד מהרכיבים יש אחריות משלו. כאן אפשר להוריד תוסף שפגום כדי להתחיל לאתר יומני שגיאות של רכיבים שונים בתוסף.

סקריפט רקע

עוברים לדף ניהול התוספים של Chrome בכתובת chrome://extensions ומוודאים שמצב הפיתוח מופעל. לוחצים על הלחצן Load Unpacked ובוחרים בספרייה של התוסף הפגום. אחרי הטעינה של התוסף, אמורים להופיע בו שלושה לחצנים: פרטים, הסרה ושגיאות באותיות אדומות.

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

Uncaught TypeError: Cannot read property 'addListener' of undefined

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

חוזרים לקוד.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

סקריפט הרקע מנסה להאזין לאירוע onInstalled, אבל שם הנכס צריך לכלול "I" באותיות רישיות. מעדכנים את הקוד כך שישקף את הקריאה הנכונה, לוחצים על הלחצן Clear all (ניקוי הכול) בפינה השמאלית העליונה ומטעינים מחדש את התוסף.

חלון קופץ

עכשיו, אחרי שהתוסף מופעל כראוי, אפשר לבדוק רכיבים אחרים. מרעננים את הדף הזה, או פותחים כרטיסייה חדשה ועוברים לדף כלשהו בכתובת developer.chrome.com, פותחים את החלון הקופץ ולוחצים על הריבוע הירוק. ו... כלום לא קורה.

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

Uncaught ReferenceError: tabs is not defined

אפשר גם לבדוק את החלון הקופץ כדי לראות את השגיאות שקשורות אליו.

השגיאה tabs is undefined מציינת שהתוסף לא יודע איפה להחדיר את סקריפט התוכן. כדי לתקן את הבעיה, צריך להפעיל את השיטה tabs.query() ואז לבחור את הכרטיסייה הפעילה.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

מעדכנים את הקוד, לוחצים על הלחצן Clear all (ניקוי הכול) בפינה השמאלית העליונה ומטעינים מחדש את התוסף.

סקריפט תוכן

מרעננים את הדף, פותחים את החלון הקופץ ולוחצים על התיבה הירוקה. ו… לא, צבע הרקע עדיין לא השתנה! חוזרים לדף ניהול התוספים… ואין לחצן שגיאות. הסיבה האפשרית לכך היא סקריפט התוכן שפועל בתוך דף האינטרנט.

פותחים את חלונית כלי הפיתוח של דף האינטרנט שהתוסף מנסה לשנות.

רק שגיאות זמן ריצה, console.warning ו-console.error, יתועדו בדף ניהול התוספים.

כדי להשתמש בכלי הפיתוח מתוך סקריפט התוכן, לוחצים על החץ בתפריט הנפתח לצד top ובוחרים את התוסף.

השגיאה אומרת ש-color לא מוגדר. יכול להיות שהתוסף לא מעביר את המשתנה בצורה נכונה. מתקנים את הסקריפט שהוזן כדי להעביר את משתנה הצבע לקוד.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

כרטיסיות של תוספים

יומנים של דפי תוספים שמוצגים ככרטיסייה, כמו דפי שינוי ואפשרויות לדף מלא, נמצאים במסוף דף האינטרנט ובדף ניהול התוספים.

מעקב אחרי בקשות רשת

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

הצהרה על הרשאות

למרחיבים יש יכולות דומות לאלה של דפי אינטרנט, אבל לרוב הם זקוקים להרשאה כדי להשתמש בתכונות מסוימות, כמו קובצי cookie, אחסון ובקשות XMLHttpRequsts ממקורות שונים. מומלץ לעיין במאמר בנושא הרשאות ובממשקי ה-API של Chrome הזמינים כדי לוודא שהתוסף מבקש את ההרשאות הנכונות בmanifest שלו.

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

השלבים הבאים

מידע נוסף על ניפוי באגים בתוספים זמין בסרטון פיתוח וניפוי באגים. מידע נוסף על כלי הפיתוח של Chrome זמין במסמכי העזרה.