לתוספים יש גישה לאותם כלי פיתוח ל-Chrome כמו דפי אינטרנט. כדי להתמקצע בניפוי באגים בתוספים, צריך לדעת איך לאתר יומנים ושגיאות של רכיבי התוסף השונים. המדריך הזה מספק טכניקות בסיסיות לניפוי באגים בתוסף.
לפני שמתחילים
מדריך זה מתבסס על ההנחה שיש לך ניסיון בסיסי בפיתוח אתרים. מומלץ לקרוא את המאמר פיתוח יסודות כדי לקבל מבוא לתהליך העבודה של פיתוח תוספים. עיצוב ממשק המשתמש מספק מבוא לרכיבי ממשק המשתמש שזמינים בתוספים.
לשבור את התוסף
במדריך הזה נקטע רכיב תוסף אחד בכל פעם ותדגים איך לתקן את הבעיה. חשוב לזכור לבטל את הבאגים שנוספו בקטע אחד לפני שממשיכים לקטע הבא. קודם כול, מורידים את דוגמת הצבעBroken Color ב-GitHub.
ניפוי באגים במניפסט
קודם כול, נשבור את קובץ המניפסט באמצעות שינוי של המפתח "version"
ל-"versions"
:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
עכשיו ננסה לטעון את התוסף באופן מקומי. תוצג תיבת דו-שיח של שגיאה שמצביעה על הבעיה:
Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.
כשמפתח מניפסט לא חוקי, הטעינה של התוסף נכשלת, אבל Chrome נותן רמז לפתרון הבעיה.
כדי לראות מה קורה, צריך לבטל את השינוי הזה ולהזין הרשאה לא חוקית.
משנים את ההרשאה "activeTab"
לאותיות קטנות "activetab"
:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
שומרים את התוסף ומנסים לטעון אותו שוב. הפעם היא אמורה להיטען. בדף הניהול של התוסף יש שלושה לחצנים: פרטים, הסרה ושגיאות. כשיש שגיאה, תווית הלחצן שגיאות הופכת לאדום. לוחצים על הלחצן Errors (שגיאות) על מנת לראות את השגיאה הבאה:
Permission 'activetab' is unknown or URL pattern is malformed.
לפני שממשיכים, צריך לשנות את ההרשאה בחזרה, ואז ללחוץ על ניקוי הכול בפינה השמאלית העליונה כדי לנקות את היומנים ולטעון מחדש את התוסף.
ניפוי באגים ב-Service Worker
איתור יומנים
קובץ השירות (service worker) מגדיר את צבע ברירת המחדל לאחסון, ומתעד אותו במסוף. כדי להציג את היומן הזה, פותחים את החלונית של כלי הפיתוח ל-Chrome. לשם כך, לוחצים על הקישור הכחול לצד בדיקת התצוגות.
איתור השגיאות
נשבור את קובץ השירות (service worker) על ידי שינוי onInstalled
לאותיות קטנות oninstalled
:
service-worker.js:
// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => {
chrome.runtime.oninstalled.addListener(() => {
chrome.storage.sync.set({ color: '#3aa757' }, () => {
console.log('The background color is green.');
});
});
מרעננים ולוחצים על שגיאות כדי להציג את יומן השגיאות. השגיאה הראשונה מציינת שהרישום של Service Worker נכשל. המשמעות היא שמשהו השתבש במהלך ההפעלה:
Service worker registration failed. Status code: 15.
השגיאה בפועל מתרחשת אחרי:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
מבטלים את הבאג שהוספנו, לוחצים על ניקוי הכול בפינה השמאלית העליונה וטוענים מחדש את התוסף.
בדיקת הסטטוס של קובץ השירות (service worker)
כדי לזהות מתי קובץ השירות (service worker) מתעורר כדי לבצע משימות, ניתן לפעול לפי השלבים הבאים:
- מעתיקים את מזהה התוסף שמופיע מעל 'תצוגות מפורטות'.
- פותחים את קובץ המניפסט בדפדפן. לדוגמה:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- בודקים את הקובץ.
- עוברים לחלונית Application (אפליקציה).
- נכנסים לחלונית Service Workers.
לבדיקת הקוד, מפעילים או מפסיקים את Service Worker באמצעות הקישורים שליד status.
בנוסף, אם ביצעתם שינויים בקוד של קובץ השירות (service worker), אפשר ללחוץ על Update או על skipwaiting כדי להחיל את השינויים באופן מיידי.
ניפוי באגים בחלון הקופץ
עכשיו, אחרי שהתוסף מופעל כמו שצריך, אפשר לבטל את החלון הקופץ על ידי הדגשת השורות המודגשות בהמשך:
popup.js:
...
changeColorButton.addEventListener('click', (event) => {
const color = event.target.value;
// Query the active tab before injecting the content script
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// Use the Scripting API to execute a script
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
args: [color],
func: setColor
});
});
});
חוזרים לדף 'ניהול תוספים'. הלחצן שגיאות יופיע שוב. לחצו עליו כדי להציג את היומן החדש. מוצגת לכם הודעת השגיאה הבאה:
Uncaught ReferenceError: tabs is not defined
אפשר לפתוח את כלי הפיתוח של החלון הקופץ על ידי בדיקת החלון הקופץ.
לפי השגיאה tabs is undefined
, התוסף לא יודע לאן להחדיר את סקריפט התוכן.
כדי לתקן זאת, מתקשרים אל tabs.query()
ובוחרים בכרטיסייה הפעילה.
כדי לעדכן את הקוד, לוחצים על Clear all (ניקוי הכול) בפינה הימנית העליונה וטוענים מחדש את התוסף.
סקריפטים של תוכן ניפוי באגים
עכשיו נשבר את סקריפט התוכן על ידי שינוי המשתנה "color" ל"צבעים":
content.js:
...
function setColor(color) {
// There's a typo in the line below;
// ❌ colors should be ✅ color.
document.body.style.backgroundColor = color;
document.body.style.backgroundColor = colors;
}
מרעננים את הדף, פותחים את החלון הקופץ ולוחצים על התיבה הירוקה. שום דבר לא קורה.
בדף 'ניהול תוספים' לא יופיע הלחצן שגיאות. הסיבה לכך היא שרק שגיאות בזמן הריצה, console.warning
וגם
console.error
מתועדות בדף 'ניהול תוספים'.
סקריפטים של תוכן פועלים בתוך אתר. לכן, כדי למצוא את השגיאות האלה, אנחנו צריכים לבדוק את דף האינטרנט שהתוסף מנסה לשנות:
Uncaught ReferenceError: colors is not defined
כדי להשתמש בכלי הפיתוח מתוך סקריפט התוכן, לוחצים על החץ של התפריט הנפתח ליד למעלה ובוחרים את התוסף.
בשגיאה כתוב ש-colors
לא מוגדר. התוסף לא יכול להעביר את המשתנה בצורה נכונה.
מתקנים את הסקריפט שהוחדר כדי להעביר את משתנה הצבע לקוד.
מעקב אחר בקשות רשת
בדרך כלל, החלון הקופץ שולח את כל בקשות הרשת הנדרשות, לפני שמפתחים זריזים ביותר יכולים לפתוח את כלי הפיתוח. כדי להציג את הבקשות האלה, צריך לרענן מתוך חלונית הרשת. החלון הקופץ יטען מחדש בלי לסגור את החלונית של כלי הפיתוח.
הצהרת הרשאות
לחלק מממשקי ה-API של תוספים נדרשות הרשאות. כדי לוודא שתוסף מבקש את ההרשאות הנכונות במניפסט, עיינו במאמר על הרשאות ובממשקי API של Chrome.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
קריאה נוספת
מידע נוסף על הכלים למפתחים ב-Chrome זמין במסמכי התיעוד.