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

מהי תוסף Chrome?

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

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

מה אתה רוצה לבנות?

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

התוכנית

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

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

שלב 1: הגדרת הדברים

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

עבור סיומת הסרט עלינו לקבל הרשאה לשלוט ב- ActiveTab , כך manifest.jsonשהקובץ שלנו נראה בערך כך:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,

"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },

“chrome_url_overrides” : { “newtab”: “newtab.html”},

 “permissions”: [“activeTab”]}

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

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

“browser_action”: { “default_popup”: “popup.html”, },

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

שלב 2: בדוק אם זה עובד

השלב הבא הוא ליצור את newtab.htmlהקובץ ולהכניס ' Hello world':

  Test   
Hello World!

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

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

שלב 3: לעשות דברים נחמדים

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

סיום התוכנית

כל מה שהייתי צריך עוד כדי לסיים את סיומת הסרט היה HTML, CSS ו- JavaScript, כך שאני לא חושב שזה רלוונטי לצלול עמוק לתוך הקוד, אבל הייתי רוצה לעבור אותו במהירות.

הנה מה שעשיתי:

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

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

התוצאה

עכשיו עם manifest.jsonהקובץ הקטן הזה וסתם קצת HTML, CSS ו- JavaScript, כל כרטיסייה חדשה שתפתח נראית הרבה יותר מעניינת:

שלב 4: פרסם את התוסף שלך

כאשר התוסף הראשון שלך ב- Chrome נראה נחמד ועובד כמו שצריך, הגיע הזמן לפרסם אותו בחנות Chrome. פשוט עקוב אחר קישור זה כדי לעבור אל לוח המחוונים של חנות האינטרנט של Chrome (תתבקש להיכנס לחשבון Google שלך ​​אם אינך). לאחר מכן לחץ על Add new itemהכפתור, קבל את התנאים ותעבור לדף בו תוכל להעלות את התוסף שלך. כעת דחס את התיקיה המכילה את הפרויקט שלך והעלה את קובץ ה- ZIP.

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

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

Got questions or feedback? Let me know in the comments!

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.