תוסף Hello World

למד את העקרונות הבסיסיים של פיתוח תוספים ל-Chrome על ידי בניית התוסף הראשון של Hello World.

סקירה כללית

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

Hello World

בתוסף הזה יוצג 'תוספי שלום' כשהמשתמש ילחץ על סמל סרגל הכלים של התוסף.

תוסף Hello
חלון קופץ של תוסף שלום

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

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

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

מורידים את הסמל לספרייה שלכם וחשוב לשנות את שם הסמל כך שיתאים למה שמופיע במפתח "default_icon".

בחלון הקופץ, יוצרים קובץ בשם hello.html ומוסיפים את הקוד הבא:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

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

טעינת תוסף שלא נארז

כדי לטעון תוסף לא ארוז במצב פיתוח:

  1. כדי לעבור לדף התוספים, מזינים chrome://extensions בכרטיסייה חדשה. (מאוד לא ניתן לקשר כתובות URL ל-chrome://).
    • לחלופין, לוחצים על לחצן החידה של תפריט התוספים ובוחרים באפשרות ניהול תוספים בתחתית התפריט.
    • לחלופין, לוחצים על תפריט Chrome, מעבירים את העכבר מעל כלים נוספים ובוחרים באפשרות תוספים.
  2. מפעילים את 'מצב פיתוח' על ידי לחיצה על המתג שלצד מצב פיתוח.
  3. לוחצים על הלחצן Load unpacked ובוחרים את ספריית התוספים.
    דרך דף התוספים
    דף התוספים (chrome://extensions)

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

הצמדת התוסף

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

הצמדת התוסף
הצמדת התוסף

לוחצים על סמל הפעולה של התוסף (סמל סרגל הכלים). אתם אמורים לראות חלון קופץ.

תוסף עולם שלום
תוסף Hello World

טעינת התוסף מחדש

צריך לחזור לקוד ולשנות את שם התוסף ל-"Hello extensions of the World!" במניפסט.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

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

טעינה מחדש של תוסף

מתי לטעון מחדש את התוסף

בטבלה הבאה אפשר לראות אילו רכיבים צריך לטעון מחדש כדי לראות את השינויים:

רכיב תוסף נדרשת טעינה מחדש של התוסף
המניפסט כן
קובץ שירות (service worker) כן
סקריפטים של תוכן כן (בתוספת הדף המארח)
החלון הקופץ לא
דף האפשרויות לא
דפי HTML אחרים של תוספים לא

איתור יומנים ושגיאות של המסוף

יומני המסוף

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

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

יוצרים קובץ popup.js ומוסיפים את הקוד הבא:

console.log("This is a popup!")

כדי לראות את ההודעה שמחוברת ב-Play Console:

  1. פותחים את החלון הקופץ.
  2. לוחצים לחיצה ימנית על החלון הקופץ.
  3. בוחרים באפשרות בדיקה.
    בודק את החלון הקופץ.
    מתבצעת בדיקה של חלון קופץ.
  4. ב-DevTools, עוברים לחלונית Console.
    חלונית הקוד של כלי הפיתוח
    בדיקה של חלון קופץ

יומני שגיאות

עכשיו נשבור את התוסף. כדי לעשות זאת, נוכל להסיר את העלות המשוערת לסגירת המודעה בpopup.js:

console.log("This is a popup!) // ❌ broken code

נכנסים לדף 'תוספים' ופותחים את החלון הקופץ. יופיע לחצן שגיאות.

דף תוספים עם לחצן שגיאה

לוחצים על הלחצן שגיאות כדי לקבל מידע נוסף על השגיאה:

פרטי השגיאה של התוסף

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

בניית פרויקט של תוסף

יש דרכים רבות לבנות פרויקט של תוסף. עם זאת, הדרישה המוקדמת היחידה היא למקם את הקובץ Manifest.json בספריית השורש של התוסף כמו בדוגמה הבאה:

התוכן של תיקיית תוסף: Manifest.json , background.js, תיקיית סקריפטים, תיקייה קופצת ותיקיית תמונות.

שימוש ב-TypeScript

אם אתם מפתחים באמצעות עורך קוד כמו VSCode או Atom, תוכלו להשתמש בchrome-types של חבילות npm כדי לנצל את היתרונות של ההשלמה האוטומטית של Chrome API. חבילת ה-npm הזו מתעדכנת באופן אוטומטי כשקוד המקור של Chromium משתנה.

💡, שנתחיל ליצור?

כדי להתחיל את התהליך של למידת התוסף, צריך לבחור באחד מהמדריכים הבאים.

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