המדריך השלם ליצירת תוסף לכרום
מבוא
ובכן היי לכם D=
להרבה אנשים היום יש גוגל כרום, ולאחרונה גם התחילו לצוץ יותר ויותר תוספות מגניבות שאפשר להתקין לכרום.
דוגמא לתוסף שאני בניתי:
תיאור: התוסף שלי מתרגם תווים מיוחדים ותווים של שפות זרות ליוניקוד והפוך.
כמובן שאפשר לבנות כל דבר, החל מתוסף שבודק לכם מיילים בג'ימייל, עידכונים מאתרים, מחשבון, מילון ובקיצור רק הדמיון מגביל אתכם.
לעומת פיירפוקס ששם לבנות תוסף זה סיפור מההפטרה, לבנות תוסף לכרום זה כל כך קל שכל אחד עם ידע בסיסי בתכנות יכול לעשות את זה.
מה צריך כדי להתחיל?
- ידע בסיסי בג'אווה סקריפט ו-HTML
- כרום מעודכן
- קצת שכל ורצון טוב
- תוכנה לעריכת טקסט (ממליצה על Notepad++)
בואו נתחיל!
אנחנו נבנה תוסף שמציג תמונות מתוך פליקר, ברגע שאתם לוחצים על האייקון של התוסף:
ובכן פתחו תיקיה חדשה במחשב וקראו לה myExtension
צרו בה שני קבצים חדשים:
manifest.json ו-popup.html
פתחו את קובץ ה-manifest.json
והעתיקו לתוכה את הקוד הבא:
הסבר:קוד:{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ] }
קובץ ה-manifest אחראי בעצם על ההגדרות הכלליות של התוסף. בו אתם קובעים את האייקון של התוסף, את שמו, התיאור שלו, הגרסא, וקובעים הראשות לאתר שממנו אתם רוצים לקרוא.
במקרה שלנו התוסף שלנו קורא מהאתר של flickr ולכן אנחנו צריכים להעתיק לתוסף את הרשות לגשת לאתר לקרוא ממנו. את זה אנחנו עושים ע"י השורה:
קוד:"permissions": [ "http://api.flickr.com/" ]
כעת שמרו באותה התיקיה את התמונה הבאה שתשמש אותנו בתור אייקון:
האייקון צריך להיות קובץ PNG בגודל 19 על 19 מקסימום.
כעת פתחו את קובץ ה-popup.html.
הקובץ הזה אחראי על מה שהתוסף עושה הלכה למעשה. כלומר ללכת לאתר של פליקר, למצו את הקוד HTML של התמונות ולהעתיק אותו לחלק שמוצג לנו בתוסף.
הpopup.html הוא קובץ HTML רגיל שניתן להוסיף לתוכו קוד CSS, HTML וJS שעושה את הפעולה העיקרית.
העתיקו לתוך הקובץ את הקוד הבא:
לינק לקוד
בקצרה, מה שהקוד עושה זה ללכת לאתר פליקר, להעתיק את הקוד של התמונות, ועבור כל תמונה בפליקר לייצר אובייקט תמונה בתוסף.
הממ זהו סיימנו לעבוד על התוסף!
מה עכשיו?
עכשיו הזמן להתקין אותו על הכרום.
התקנת התוסף בדפדפן שלכם
בדפדפן שלכם הכנסו לכאן:
וכעת לחצו על "Load Unpacked Extension":
ובכן התוסף כעת מותקן ועכשיו הוא מופיע לד הURL.
בדיקת שגיאות
לתוסף של כרום יש נטייה לא לספר לכם שיש לכם שגיאה בקוד... אז מה עושים אם התוסף לא מראה לכם כלום?
מאוד פשוט. ליד התוסף שעכשיו התקנתם יופיע ID
* חפשו כמובן את הID של התוסף שלכם, התמונה היא רק דוגמא
כעת כתבו בשורת הכתובות:
chrome-extension://extensionId/popup.html
כשהID מחליף את extensionId.
כלומר למשל: chrome-extension://mihcahmgecmbnbcchbopgniflfhgnkff/popup.html
כעת יפתח התוסף שלכם על עמוד מלא ותוכלו לבדוק שגיאות ע"י לחיצה ימנית-> Inspect Element.
ולחיצה על כפתור המסומן:
אם יופיעו לכם בקונסול שגיאות באדום, משהו התפקשש לכם בקוד...
בכל אופן זה המקום לעשות ניסויים ולבדוק מה לא בסדר.
פרסום התוסף לכל העולם!
ובכל הגעתם לשלב שבניתם תוסף שולט שאתם רוצים שכולםםם יראו?
הכנסו לעמוד הבא:
https://chrome.google.com/extensions
ולחצו בצד על "Publish your extensions".
לשם כך אתם צריכים חשבון גוגל (חשבון ג'ימייל יספיק).
אחרי שהתחברתם יופיע לכם מסך חדש והכפתור Add new item.
זוכרים את התיקיה שבה כל הקבצים שלכם נמצאים? פתחו תוכנת כיווץ כמו Winrar או Winzip וכווצו את כל הקבצים ביחד לפורמט ZIP.
כעת בחרו ב-choose file ואז upload.
ייפתח לכם מסך חדש. הוסיפו את הנתונים לפי ההוראות:
ובסוף לחצו על Upload File
ובכן זהו זה D=
אם משהו לא ברור אתם מוזמנים לשאול!!!
ציטוט ההודעה
נכתב במקור על ידי yolei
