כך תפתחו הרחבות לכרום – חלק א’ [מדריך]

יש לכם רעיון לתוסף שימושי לכרום – למה שלא תפתחו אותו בעצמכם? מדריך קצר יעזור לכם לגשת למלאכה, בהצלחה !

תמונה: יח"צ, עיבוד תמונה

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

אחת האפשרויות המלהיבות ביותר שמציע הדפדפן הוא פיתוח הרחבות (Chrome Extensions), שמעצימות את יכולת הדפדפן, אותן ניתן להוריד ולהתקין בקלות מחנות האפליקציות וההרחבות של כרום.

הנה מתחילים

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

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

יאללה, קשקשנו מספיק, בואו נעבור לתכל’ס. איך מפתחים הרחבה לכרום.

מצרכים

1. חשבון מפתחים בגוגל. לא חובה, אבל מדובר סך הכל בתשלום חד פעמי של 5$ ואז יש לכם שרת להרחבה ואפשרות קלה ומהירה יותר להעלאה של הרחבות שפתחתם.

2.  ידע בסיסי ב HTML וגאווה סקריפט (גם CSS, אבל פחות קריטי). אם אתם לא יודעים אני ממליץ לכם ללמוד. זה לא מאד מורכב, בטח ברמה הבסיסית של העניינים ותמיד טוב ללמוד דברים חדשים. בכל מקרה, אין מקום טוב יותר ללמוד בו את יכולות הפיתוח הללו מאשר ב http://www.w3schools.com. אם אתם ממש בתחילת הדרך מכאן תוכלו להוריד את עורך ה HTML לצורך הפיתוח (Notepad++)

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

 

נתחיל בפיתוח הרחבה שתראה חלון שמציג את הטקסט “שלום עולם”:

לכל הרחבה יש 2 קבצים בסיסיים שחייבים להיות אצל גוגל + תמונה שתשמש ככפתור עליו ילחץ המשתמש:

1. manifest.json

2. popup.html

3. icon.png

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

והנה הקוד שאתם צריכים בשביל קובץ ה popup. לא הכי תקני בעולם, אבל יעשה את העבודה בשביל ההדגמה שלנו.

תמונה של אייקון: פשוט תבחרו אחד מכאן ותשמרו אותו בשם icon.png זה לא קריטי כרגע בשביל ההתנסות, אבל לפני שתעלו את ההרחבה לחנות האפליקציות, כדאי מאד שתמצאו אייקונים חינמיים, או שתצרו אחד בעצמכם.

את שלושת הקבצים האלו שימו בתיקייה נפרדת שיצרתם, יחד. לא משנה מה השם של התיקייה.

זהו. אתם מוכנים להתחיל לשחק עם ההרחבה שיצרתם:

1. גשו להגדרות של הדפדפן שלכם (אייקון של ראצ’ר למעלה), תבחרו “כלים” ואז “הרחבות”.

chrome extension tools

2.  לחצו על הצ’ק בוקס “מצב מפתח”.

3. לחצו על הכפתור “טען תוסף שלא נארז”.

chrome extension developer mode

4. בחרו את התיקייה שם שמתם את שלושת הקבצים.

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

first chrome extension

זהו, אתם מוזמנים לשחק עם ההרחבה הנהדרת שיצרתם. במדריכים הבאים נראה איך אפשר ליצור משהו קצת יותר רציני ואיך מעלים את הרחבה שבניתם לחנות האפליקציות וההרחבות של גוגל.

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

Avatar

מורד שטרן

כותב הבלוג Usability Talking

הגב

9 תגובות על "כך תפתחו הרחבות לכרום – חלק א’ [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
אבי
Guest

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

Yoav Moran
Guest

אהבתי. מצפה בשקיקה להמשך. :)

מורד שטרן
Guest

נכון. popup היא אפשרות אחת לבניית תוסף.
לא רציתי להיכנס לזה, אלא לטוס במהירות לתוסף פועל.

כן, גם אני אהבתי שהקוד גלוי לחלוטין :)

עודד דויטש
Guest

הקוד הזה נותן Syntax error בשורה של ה- “popup”:”popup.html”. צריך להוסיף פסיק שורה אחת לפני, בשורת ההכרזה על האייקון. אבל, עכשיו הוא מציג את ההרחבה אבל לא מציג את האייקון, רק מקום ריק איפה שהוא אמור להיות…

עודד דויטש
Guest

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

רוני
Guest

יש הרבה מקומות טובים יותר ללמוד בהם מ-W3Schools. אפילו הוקם אתר שמבקר אותם בחריפות ומציע חלופות: http://w3fools.com/
ולפיתוח מודרני, כולל באזז-וורדס כמו html5, css3 וכו’ אני ממליץ על http://movethewebforward.org/

מעבר לזה, לשם הצלילה לתכל’ס המאמר מתבסס על כמה הנחות יסוד: אתם רוצים להפיץ את התוסף ב-Chrome Web Store (ולכן החשבון – לא חובה בכלל); אתם משתמשים בכרום בעברית, על Windows (צילומי מסך והמלצה בודדה על notepad++). אם זה מתאים לכם, מצוין :-)

מורד שטרן
Guest

היי רוני,

קודם כל תודה על הקישור – נראה טוב, אני אצלול לזה.

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

Koby
Guest

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

מאוד הייתי ממליץ לכל מי שמעוניין לפתח תוספים שיסתכל על קרוסריידר (crossrider.com) – ארכיטקטורה מאוד דומה לכרום (כתיבה בג’אווה סקריפט, קוד שרץ על העמוד שנטען, קוד שרץ ברקע) אבל עובד בכל הדפדפנים! למען האמת, גם אם רוצים לפתח תוסף רק לדפדפן בודד (כרום/פיירפוקס/אקספלורר – מחק את המיותר) זה עדיין יותר קל.
(גילוי נאות: אני אחד מהמייסדים)

יותם
Guest

יש לי בעיה, זה עושה בעיה ואז כשאני מתקן את זה ושם פסיק זה לא פותח לי את החלון

wpDiscuz

תגיות לכתבה: