Chrome הוא בקלות דפדפן האינטרנט הפופולרי ביותר על פני כדור הארץ. על פי הנתונים הסטטיסטיים של Statcounter, נתח השוק של Chrome כ -65% מהשוק בדפדפנים שולחניים נכון לסוף 2017.

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

אם אתה רוצה לנצל את המגמה, תוכל לבנות תוסף Chrome בסיסי. אתה רק צריך קצת בסיסי מיומנויות פיתוח אינטרנט (HTML, CSS ו- Javascript), כמו גם כפית של JSON לקשור את כל זה ביחד.

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

כתיבת תוסף בסיסי של Chrome: גורל המניפסט

עבור הדרכה זו נבנה תוסף Chrome בסיסי המציג הודעה קופצת פשוטה בעת לחיצה. אנחנו צריכים כמה קבצים חשובים: סמל ("icon.png"), קובץ HTML ("popup.html") ואת המניפסט החשוב ביותר ("manifest.json"). כל הקבצים האלה יחיו בתוך ספרייה עם שם התוסף שלך. במקרה זה נקרא "שלום העולם".

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

קובץ המניפסט של ההרחבה הבסיסית שלנו נראה כך:

 {"manifest_version": 2, "name": "Hello World!", "description": "תוסף Chrome הראשון שלי", "browser_action": {"default_icon": "icon.png", "default_popup": " .html "}, " הרשאות ": [" activeTab "]}

קובץ המניפסט הזה יוסיף סמל בסרגל הכלים של המשתמש, שכאשר לוחצים עליו, טוען את התוכן של הקובץ בשם "popup.html". להלן החריטה על שאר התוכן:

  • manifest_version אומר ל- Chrome איזו גרסה של סימון המניפסט שאתה עובד איתו. עבור תוספים מודרניים, עליך להגדיר זאת ל 2.
  • name מציג את השם שהתוסף יציג בחנות Chrome וב- "chrome: // תוספים".
  • description מציג את הטקסט התיאורי שמוצג ב- "chrome: // extensions."
  • browser action טוענת את הסמל לסרגל הכלים. זה גם מאפשר הרחבה כדי להגיב קלט המשתמש על ידי הצגת tooltip, קופץ או תג. בדוק רשימה מלאה של כל מה "browser_action" יכול לעשות.
  • default_icon מציג את הנתיב לסמל מספריית התוסף.
  • default_popup מציג את הנתיב לקובץ שיטען בעת ​​לחיצה על סמל התוסף.
  • permissions מגבילות את האזור התפקודי של ההרחבה. activeTab הוא הנפוץ ביותר, ומאפשר לתוסף לגשת לכרטיסייה הקדמית ביותר. Google מספקת רשימה של כל ההרשאות שתוסף יכול לבקש.

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

כתיבת תוסף בסיסי של Chrome: חלונות קופצים

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

 שלום עולם

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

כתיבת תוסף בסיסי של Chrome: טוען אל Chrome

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

1. נווט אל "chrome: // extensions" והפעל את "מצב מפתח" על ידי סימון תיבת הסימון בפינה השמאלית העליונה.

2. לחץ על הלחצן "טען תוסף שנפרק ..." ובחר את ספריית התוסף.

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

4. לחץ על הרחבה כדי לראות את (פשוט מאוד) השפעה.

מסקנה: הרחבת תוסף Chrome שלך

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

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