תוסף Hello World

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

סקירה כללית

תיצור 'שלום עולם' לטעון את התוסף באופן מקומי, לאתר יומנים ולעיין בהמלצות נוספות.

שלום עולם

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

תוסף 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

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

חזרו לקוד ושנו את שם התוסף ל"תוספים שלום של העולם!" במניפסט.

{
  "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!")

כדי לראות את ההודעה הזו ביומן במסוף:

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

יומני שגיאה

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

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

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

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

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

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

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

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

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

התוכן של תיקיית התוספים: Mants.json, Background.js, תיקיית הסקריפטים, תיקיית חלון קופץ ותיקיית תמונות.

שימוש ב-TypeScript

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

🚀 אתם מוכנים להתחיל לבנות?

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

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