Dev-Time

כתיבת תוספים לכרום בקלות

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

*מי שרוצה להתחיל לכתוב בלי החפירות המקדימות יכול לקפוץ ישר לכאן

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

מה אפשר לעשות עם תוספים?

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

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

PirateTube – תוסף שמוסיף באתר thepiratebay.org לינק לצפייה ישירה בטריילר במידה ומדובר בתוצאה בקטגוריית “סרטים”

LinkedIn Ninja – תוסף ללינקדאין שמאפשר לבצע פעולות שביצוען ידנית לוקח הרבה יותר זמן

שני התוספים האלו מראים איך אפשר לכתוב תוספים לכל מטרה

אז איך מתחילים:

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

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

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

בהמשך אני אפרט על עוד חלקים של הקובץ אבל כרגע נתמקד רק בשורות 18-20, שורות אלו המתחילות במילה “js” מגדירות את מיקום קובץ הJavaScript שירוץ ברגע שהתוסף יטען.

בשביל הדוגמא המינימלית שמתי בתוך קובץ script.js את הקוד הבא:

את שני הקבצים שמרתי באותה תיקיה, ניתן להוריד את שני הקבצים מהלינק הזה: Extension Template

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

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

בהצלחה!!!

עדי בניה

1 comment

  • הסבר בסיסי ונחמד. אם מישהו קורא את זה ורוצה לפתח תוסף משלו, תכתבו את ה-manifest בעצמכם ואל תעתיקו אותו! ככה תמנעו מטעויות ודברים שאולי לא רציתם שיהיו בתוסף שלכם.

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

Follow

Get every new post delivered to your Inbox

Join other followers