הרחבת אתרים של Chrome - אין צורך בניסיון קודם בקידוד: 6 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:12

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

כדי ליצור תוסף אינטרנט של Chrome, יש צורך בקידוד, לכן כדאי מאוד לבדוק HTML, JavaScript ו- CSS באתר שלהלן:

www.w3schools.com/default.asp (בתי ספר w3 הוא אתר טוב לקידוד משאבים)

לא יודעים איך לקודד? אל דאגה, הדרכה זו תעזור להנחות את הדרך.

הדבר הטוב ביותר בתוספי Chrome הוא שניתן להתאים אותם אישית. זה לא רק דבר אחד ספציפי שאפשר לעשות, אז תהיו יצירתיים.

אספקה

המצרכים הדרושים להלן:

• מחשב עם עורך טקסט (אני משתמש בפנקס רשימות)
• גוגל כרום

וזה הכל!

שלב 1: צור את המדריך

ראשית, צור תיקייה שתכיל את כל הקבצים, ותקרא לה 'הרחבה'. ניתן לשנות את השם מאוחר יותר אם תרצה בכך.

שלב 2: צור את הקובץ המניפסט וקוד אותו

קובץ המניפסט הוא חלק חשוב מאוד בתוסף. הוא אומר להרחבה בדיוק מה לעשות ולהיות. קבצי המניפסט מעוצבים ב- JSON. השלב הראשון הוא לפתוח עורך טקסט ולשמור קובץ חדש בשם 'manifest.json'.

הקלד הבא את הסקריפט שלהלן:

{

"name": "הרחבה ראשונה", "גרסה": "1.0", "description": "אני יכול לקוד סיומת", "manifest_version": 2, "browser_action": {"default_title": "הרחבה ראשונה"}}

זכור את הפסיקים אחרי הערכים!

לאחר הקלדה, שמור את קובץ המניפסט ועבור אל chrome: // extensions (יש להשתמש ב- Chrome כדפדפן זה). פעם ב- chrome: // extensions, הפעל את מצב המפתחים. לאחר מכן, לחץ על הלחצן 'טען לא ארוז' ובחר בתיקיית 'הרחבה'.

גליל תופים בבקשה…

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

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

אתר אחד שעובד היטב לציור אייקונים הוא https://www.piskelapp.com/. קיימות גם תוכניות ציור אחרות לשימוש. הסמלים צריכים להיות מרובעים. בפרויקט זה ישתמשו בסמלים 16x16, 32x32, 48x48 ו- 128x128. לאחר יצירת הסמל, צור תיקייה בשם 'תמונות' בתיקיית ההרחבה והכניס את הסמל לתיקייה זו. אולי כדאי לתת שם תמונה לפי גודלה. לדוגמה, 'icon32.png'. הקוד החדש נמצא למטה:

{

"name": "הרחבה ראשונה", "גרסה": "1.0", "description": "אני יכול לקוד סיומת", "manifest_version": 2, "browser_action": {"default_title": "הרחבה ראשונה", " default_icon ": {" 16 ":" images/icon16-p.webp

לעיון בקוד המניפסט, עבור אל

שלב 4: הוסף קופץ

לתוסף זה יהיה קופץ. הקופץ הוא קובץ HTML (Hypertext Markup Language), לכן כדאי ללמוד תחילה את היסודות של HTML, CSS ו- JavaScript.

ראשית, שמור מסמך כקובץ 'popup.html' בתיקיית הסיומת.

לאחר מכן, ערוך את קובץ המניפסט כך שיציג 'popup.html' בעת לחיצה עליו. הקוד החדש נמצא למטה:

{

"name": "הרחבה ראשונה", "גרסה": "1.0", "description": "אני יכול לקוד סיומת", "manifest_version": 2, "browser_action": {"default_title": "הרחבה ראשונה", " default_icon ": {" 16 ":" images/icon16-p.webp

אל תשכח את הפסיק!

כעת, אם קוד HTML הבא יתווסף ל- popup.html, הוא יראה את 'שלום עולם' בלחיצה.

שלום עולם

שלב 5: לגרום לזה להיראות טוב ולהפוך אותו לאינטראקטיבי

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

שלום עולם

שלום עולם

#שלום {צבע-רקע: #000000; צבע: #ff0000; גבול: 8px התחלה #86a3b2; רדיוס גבול: 50 פיקסלים; להפוך: לסובב (57 מעלות); ריפוד: 10 פיקסלים; user-select: none; סמן: שערה; מעבר: להפוך 2s; } #שלום: רחף {transform: rotate (-417deg); }

הדוגמה השנייה הזו יכולה להיות מבלבלת מאוד, למתחילים. אבל זה היה כדי להראות לך עד כמה CSS חשובה לתוכנית/הרחבה. עכשיו יהיה זמן טוב לקחת הפסקה וללמוד כמה קידוד HTML5 ולהשתמש ב- developer.chrome.com לעיון כלשהו. זה עלול לקחת קצת זמן, אך ניתן לבצע הרחבה מצוינת.

שלב 6: פרסם אותו בחנות האינטרנט של Chrome

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

הדבר הראשון שצריך לעשות כדי להפוך תוסף לציבורי הוא להפוך את תיקיית הסיומת לקובץ zip. הדבר השני לעשות הוא להיכנס אל https://chrome.google.com/webstore/category/extensions ולהיכנס לחשבון Google. לאחר מכן, לחץ על כפתור גלגל השיניים של ההגדרות ולאחר מכן לחץ על 'לוח מחוונים למפתחים'. לחץ על כפתור 'פריט חדש' כדי להעלות את קובץ ה- zip. כשאתה שם, עליך לערוך את רישום החנות, הפרטיות והתמחור. ניתן לפרסם הרחבה בקלות אם היא נשלחת לבדיקה.

עכשיו כשהסיומת הסתיימה, המשך לקודד!