מפתחים את התוסף הראשון של Hello World כדי להכיר את היסודות של פיתוח תוספים ל-Chrome.
סקירה כללית
תיצור 'שלום עולם' לטעון את התוסף באופן מקומי, לאתר יומנים ולעיין בהמלצות נוספות.
שלום עולם
בתוסף הזה יוצג הכיתוב 'תוספים שלום' כשהמשתמש ילחץ על סמל סרגל הכלים של התוסף.
![תוסף Hello](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=9&hl=he)
מתחילים ביצירת ספרייה חדשה לאחסון קובצי התוספים. אם אתם מעדיפים, אתם יכולים להוריד את הגרסה המלאה קוד מקור מ-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 על ידי טעינה מקומית שלו. מוודאים שכל הקבצים שמורים.
טעינה של תוסף שלא נארז
כדי לטעון תוסף לא ארוז במצב פיתוח:
- כדי לעבור לדף התוספים, מזינים
chrome://extensions
בכרטיסייה חדשה. (לא ניתן לקשר כתובות URL מסוגchrome://
).- לחלופין, לוחצים על לחצן החידות בתפריט התוספים ובוחרים ניהול תוספים בחלק התחתון של התפריט.
- אפשרות נוספת: לוחצים על תפריט Chrome, מעבירים את העכבר מעל כלים נוספים ובוחרים באפשרות תוספים.
- כדי להפעיל את מצב פיתוח, לוחצים על המתג לצד מצב פיתוח.
- לוחצים על הלחצן Load unpacked ובוחרים את ספריית התוספים.
דף התוספים (chrome://extensions)
הנה! התוסף הותקן בהצלחה. אם לא נכללו סמלים של תוספים המניפסט, ייווצר סמל גנרי לתוסף.
הצמדת התוסף
כברירת מחדל, אם התוסף נטען באופן מקומי, הוא יופיע בתפריט התוספים (). אפשר להצמיד את התוסף לסרגל הכלים כדי לגשת במהירות לתוסף במהלך הפיתוח.
![הצמדת התוסף](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=9&hl=he)
ללחוץ על סמל הפעולה של התוסף (סמל סרגל הכלים). אתם אמורים לראות חלון קופץ.
![שלום עולם](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=9&hl=he)
טעינה מחדש של התוסף
חזרו לקוד ושנו את שם התוסף ל"תוספים שלום של העולם!" במניפסט.
{
"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!")
כדי לראות את ההודעה הזו ביומן במסוף:
- פותחים את החלון הקופץ.
- לוחצים לחיצה ימנית על החלון הקופץ.
- בוחרים באפשרות בדיקה.
מתבצעת בדיקה של חלון קופץ. - בקטע DevTools, עוברים לחלונית המסוף.
מתבצעת בדיקה של חלון קופץ
יומני שגיאה
עכשיו נשבר את התוסף. נוכל לעשות זאת על ידי הסרת הציטוט הסוגר בpopup.js
:
console.log("This is a popup!) // ❌ broken code
עוברים לדף 'תוספים' ופותחים את החלון הקופץ. יופיע הלחצן שגיאות.
לוחצים על הלחצן שגיאות כדי לקבל מידע נוסף על השגיאה:
למידע נוסף על ניפוי באגים ב-Service Worker, בדף האפשרויות ובסקריפטים של התוכן, אפשר לעיין בניפוי באגים. תוספים.
בניית פרויקט תוסף
יש דרכים רבות לבנות פרויקט הרחבה; עם זאת, התנאי המוקדם היחיד הוא להציב את קובץ המניפסט.json בספריית הבסיס של התוסף, כמו בדוגמה הבאה:
שימוש ב-TypeScript
אם אתם מפתחים באמצעות עורך קוד כמו VSCode או Atom, תוכלו להשתמש ב-npm חבילות סוגי Chrome כדי לנצל את היתרונות של השלמה אוטומטית עבור Chrome API. חבילת ה-NPM הזו מתעדכנת באופן אוטומטי כשקוד המקור של Chromium שינויים.
🚀 אתם מוכנים להתחיל לבנות?
יש לבחור כל אחד מהמדריכים הבאים כדי להתחיל את תהליך הלמידה של התוספים.
Extension | מה תלמדו |
---|---|
הרצת סקריפטים בכל דף | כדי להוסיף רכיב לכל דף באופן אוטומטי. |
החדרת סקריפטים לכרטיסייה הפעילה | כדי להריץ קוד בדף הנוכחי אחרי שלוחצים על פעולת התוסף. |
ניהול הכרטיסיות | כדי ליצור חלון קופץ שמנהל את הכרטיסיות בדפדפן. |
טיפול באירועים עם Service Worker | איך קובץ שירות של תוסף מטפל באירועים. |