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

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

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

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

סקריפט ברקע

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

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

Uncaught TypeError: Cannot read property 'addListener' of undefined

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

חוזרים לקוד.

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 יתועדו בדף ניהול התוספים.

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

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

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

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

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

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

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

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

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

  {
    "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 זמין במסמכי התיעוד.