כיצד ליצור תוסף לכרום

'בחיים הנוכחיים שלנו, אנחנו להוטים יותר להשתמש באפליקציות מדיה חברתית ובמנוע החיפוש של גוגל למטרות הבידור והחיפוש שלנו, כלומר, לחקור נושא חינוכי כלשהו באמצעות מנוע החיפוש 'גוגל' ולצבור גם ידע כללי. כדי להשתמש במנוע החיפוש של גוגל כדי לחפש משהו, עלינו להיות מותקן דפדפן כלשהו בטלפונים הניידים, הניידים או המחשבים האישיים שלנו. אחד הדפדפנים המשומשים והיעילים ביותר של המאה של היום הוא דפדפן 'גוגל כרום' שהגיע עם הרבה פונקציונליות טובות יחד עם התועלת של הרחבה. ה'תוסף' הוא התוסף שנמצא בכל דפדפן כדי להגביל או לאפשר אתרים ופונקציות שונות. הרחבות אלה אינן מגיעות בדרך כלל מובנית; אתה צריך להוסיף כל תוסף לדפדפן שלך בנפרד בכל פעם שנדרש. אם אתה קצת מומחה בטכנולוגיה, אז אולי אתה יודע את השימוש בקובצי JSON מניפסט כדי ליצור ולהוסיף הרחבה במספר שלבים. לפיכך, מאמר זה יכסה את כל השלבים ליצירת תוסף חדש בדפדפן Google Chrome.

לפני שתסתכל על השיטה ליצירת תוסף, עליך לוודא שדפדפן Google Chrome שלך ​​כבר הופעל ומנוע החיפוש 'גוגל' אינו מכיל רקע. אתה יכול לראות שלתמונה המצורפת למטה אין רקע למנוע החיפוש 'Google.com', כלומר, רקע לבן בלבד.

הוסף תיקיית הרחבה

פתח את הכלי Visual Studio Code שלך ​​במהירות מהאפליקציות של מערכת Windows שלך. זה עשוי לקחת עד דקה אחת כדי לפתוח כראוי את Visual Studio Code ולאפשר אותו לשימוש שלנו. לאחר שהושק כראוי ומוכן לשימוש, הוספנו את התיקיה שכבר נוצרה 'הרחבה' בה דרך רשימת התפריט 'קובץ' בשורת המשימות העליונה המוצגת למטה. לאחר יצירת תיקיית 'הרחבה', הוספנו לתוכה תיקיה נוספת בשם 'תמונה' המכילה את התמונות שישמשו כסמל עבור ההרחבה בדפדפן. יחד עם זה, הוספנו קובץ 'manifest.json' אחד וקובץ javascript אחד בשם 'script.js' כדי ליצור סיומת חדשה ולהוסיף אותה לדפדפן. נתחיל מהקובץ manifest.json על ידי לחיצה כפולה עליו כדי להתחיל לעבוד ב-JSON כדי ליצור ולהשתמש בתוסף כדי לשנות את הרקע של 'גוגל'.

צור קובץ מניפסט

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

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

יחד עם זה, נעשה שימוש במשתנה 'page_action' כדי להציג איזו תמונה תוצג לאחר לחיצה על סמל 'הרחבות' בשורת המשימות העליונה של Google Chrome. נעשה בו שימוש במשתנה 'Default_icon', יחד עם שלושת ערכי הנתיב השונים שלו לתמונות שישמשו כסמלים בכל טעינה מחדש. שלושה קבצי תמונה שונים משמשים למטרה זו. המשתנה האחרון content_scripts לוקח בו בסך הכל 2 משתנים חדשים, כלומר התאמות ו-CSS. המשתנה 'התאמות' מכיל את הנתיב לאתר שישתנה לאחר יצירת השימוש בתוסף החדש הזה. יחד עם זה, המשתנה 'CSS' מכיל את השם של קובץ CSS שישמש לעיצוב של Google.com לאחר הגשת הבקשה לסיומת, כלומר, עיצוב Google.com לאחר כל טעינה מחדש בהפעלת התוסף. כעת, כשהקוד הזה הושלם ומוכן לשימוש, פשוט שמור אותו במהירות ועבור לכיוון הקובץ 'main.css'.

בתוך קובץ ה-CSS main.css, הוספנו עיצוב עבור סיומת קובץ המניפסט שלנו שתיווצר. הסגנון יוחל באמצעות תג ה-html 'body', כלומר, ליישום על אזור ה-'body' המלא של קובץ המניפסט. קבענו את הרקע החדש עבור Google.com באמצעות 'URL' של קובץ תמונה ממנוע החיפוש. כעת, שמור את הקוד שלך לפני כל דבר.

לאחר השלמת הקודים הנדרשים, כלומר קובץ manifest.json ו-main.css, עלינו לפתוח את כלי השירות Extensions בדפדפן Google Chrome דרך כתובת האתר chrome://extensions' בכרטיסייה החדשה. אזור השירות של הרחבות נפתח. ממצב המפתחים שלו, אתה צריך לטעון את תיקיית 'הרחבה' הפרומה מהמערכת המקומית שלך כדי להפוך אותה להרחבה באמצעות הכפתור 'טען לא ארוזה' המוצג בתמונה למטה. התוסף נוספה ביעילות לדפדפן Chrome, כפי שמוצג. הסר את השגיאות כדי שזה יעבוד במלואו.

מסמל 'הרחבה', בחר בתוסף 'שנה רקע' כדי להציג אותה בשורת המשימות, כלומר, סיומת הסמל 'C'.

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

סיכום

החל מההסבר על השימוש בדפדפנים במערכת ווינדוס, דנו גם בחשיבות ההרחבות בכל דפדפן. לאחר ההסבר הקצר על ההרחבות, הסברנו את השיטה להשתמש בקובץ JSON המניפסט ליצירת הרחבה לדפדפן Google Chrome וכיצד להשתמש בו כדי לשנות רקע עבור מנוע החיפוש 'Google.com'. לאחר טעינת התוסף ב-Google chrome, השתמשנו בו ב-Google.com כדי לשנות את הרקע שלו.