ככה בונים תוסף כרום אישי עם AI

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

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

מה זה בעצם תוסף אישי, ולמה זה שונה מתוסף מהחנות

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

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

שווה להבדיל את זה משכבת התוספים החדשה של חברות ה-AI. כלים כמו Claude for Chrome או Codex בכרום מכניסים סוכן AI כללי שיודע לקרוא דפים ולפעול בהם לפי בקשה בשפה חופשית. מה שנעשה כאן הוא הפוך: פונקציה אחת קטנה, צפויה לחלוטין, שרצה בלי אינטרנט, בלי מודל ובלי עלות לכל הפעלה. שני הדברים שימושיים, אבל למשימות שונות.

הדוגמה: תוסף שמהפך את כיוון הדף

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

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

אחרי לחיצה על Alt+R: סרגל הצד עבר לימין וכל הפריסה התהפכה

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

לפני שמתחילים

הרשימה קצרה בכוונה, כי זה כל היופי בשיטה הזו:

• דפדפן כרום מעודכן, במחשב (לא בטלפון נייד).
• גישה לצ'אט AI שיודע לכתוב קוד - Claude, ChatGPT או Gemini יעשו את העבודה.
• תיקייה אחת ריקה במחשב, במקום שלא תמחקו בטעות - שימו לב שהתיקייה חייבת להישאר במקומה כל עוד התוסף פעיל.
• עורך טקסט כלשהו - Notepad מספיק, אין צורך ב-Node, אין שלב בנייה ואין ספריות להתקין.

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

השלבים המלאים

1. מגדירים את הצורך במשפט אחד: לפני שאתם פותחים צ'אט, נסחו לעצמכם בדיוק מה התוסף אמור לעשות ובאיזה רגע הוא מופעל. בדוגמה שלנו: "להפוך את כיוון הדף כולו בין RTL ל-LTR ובחזרה, כמתג, בהפעלה מקיצור מקלדת או מכפתור". ניסוח שלא עומד במשפט אחד הוא בדרך כלל סימן ששני תוספים מתחבאים בבקשה אחת, ואז עדיף לפצל.

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

3. יוצרים תיקייה ושומרים את הקבצים: המודל יחזיר לכם 4 קבצים (במקרה של התוסף שלנו). פתחו תיקייה, ושמרו כל קובץ בשם המדויק שקיבלתם, כולל הסיומת. הקובץ manifest.json הוא הקריטי, כי הוא זה שמצהיר בפני כרום מה התוסף הזה ומה הוא מבקש לעשות. אם שמרתם אותו בטעות כ-manifest.json.txt, כרום פשוט לא יזהה את התיקייה כתוסף.

תיקיית התוסף במחשב עם 4 קבצים: background.js, manifest.json, popup.html ו-popup.js

4. מפעילים מצב מפתח בכרום: הקלידו בשורת הכתובת chrome://extensions ולחצו Enter. בפינה הימנית העליונה של העמוד תראו מתג בשם Developer mode. הפעילו אותו. ברגע שתעשו זאת, יופיע בראש העמוד שורת כפתורים חדשה שלא הייתה שם לפני כן.

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

עמוד chrome://extensions עם חצים אדומים שמסמנים את מתג Developer mode בימין ואת כפתור Load unpacked בשמאל

6. בודקים את הקיצור: עברו לכתובת chrome://extensions/shortcuts וודאו שהקיצור מקלדת שהגדרתם רשום מול התוסף שלכם. אם השדה ריק, סימן שהקיצור התנגש עם קיצור קיים והדפדפן לא שיבץ אותו. אתם יכולים להקליד שם קיצור אחר ישירות, בלי לגעת בקוד.

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

הפופאפ של התוסף: כפתור ותזכורת לקיצור המקלדת

8. מתקנים בסבב שני: אם משהו לא עבד, אל תתקנו את הקוד לבד. חזרו לצ'אט, תארו בדיוק מה קרה, והדביקו את הודעת השגיאה אם יש. בעמוד התוספים, קישור בשם service worker ליד התוסף פותח את הקונסולה שלו ומראה שגיאות. זה המקום שממנו מעתיקים את השגיאה בחזרה לצ'אט.

הפרומפט המלא

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

אני רוצה לבנות תוסף כרום קטן לשימוש אישי, שאטען אותו כתיקייה מקומית (Load unpacked). אני לא מפרסם אותו בחנות.

מה התוסף צריך לעשות: להפוך את כיוון הדף כולו בין RTL ל-LTR ובחזרה, כ-toggle. בכל הפעלה מוצג טוסט צף קטן בראש הדף עם שם המצב החדש ("RTL" או "LTR"), שנעלם מעצמו אחרי כשנייה וחצי. שתי דרכי הפעלה: קיצור המקלדת Alt+R, וכפתור בפופאפ.

דרישות טכניות, אנא הקפד עליהן:

1. Manifest V3. ארבעה קבצים בלבד: manifest.json, background.js, popup.html, popup.js. בלי אייקונים, בלי ספריות חיצוניות, בלי שלב build.

2. הרשאות: permissions הוא ["activeTab", "scripting"] וזה הכל. אין host_permissions, אין content_scripts, אין tabs, אין storage. אני רוצה שכרום לא יציג על התוסף את האזהרה על קריאה ושינוי נתונים בכל האתרים.

3. אל תשתמש ב-content script קבוע. הזרק את הקוד לדף רק ברגע ההפעלה, דרך chrome.scripting.executeScript עם target של הטאב הפעיל. שני מסלולי ההפעלה צריכים לקרוא לאותה פונקציה מוזרקת, בלי לשכפל קוד.

4. הקיצור דרך chrome.commands עם suggested_key של Alt+R, ומאזין chrome.commands.onCommand ב-background.js. לא keydown, כי אני רוצה שהקיצור יופיע ב-chrome://extensions/shortcuts ושאוכל לשנות אותו שם.

5. ההיפוך עצמו: קרא את המצב הנוכחי מתג <html> וכתוב גם את המאפיין dir וגם את style.direction. הלוגיקה צריכה להסיק את המצב מהדף עצמו בכל הפעלה, בלי לשמור מצב בשום מקום, כדי שגם אם המשתמש רענן את הדף התוסף לא יתבלבל.

6. הטוסט: אלמנט div עם מזהה ייחודי, position: fixed, z-index גבוה מאוד, ועיצוב בסגנונות inline בלבד כדי שה-CSS של האתר לא ישפיע עליו. הגדר עליו במפורש direction ו-text-align משלו, כדי שההיפוך של הדף לא יהפוך גם אותו. אם טוסט קודם עדיין על המסך, הסר אותו לפני שאתה מוסיף חדש, כדי שהם לא יצטברו בלחיצות מהירות.

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

8. הפופאפ: כפתור אחד, ובלחיצה עליו התוסף מבצע את אותו היפוך על הטאב הפעיל והפופאפ נסגר.

בנוסף:

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

למה הפרומפט הזה עבד

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

• מספר הקבצים כאילוץ מוצהר: בקשה חופשית לבניית תוסף מקבלת בדרך כלל מבנה תיקיות, קובץ CSS נפרד, תיקיית אייקונים ולפעמים גם הצעה להתקין ספרייה. הכתבת "4 קבצים בלבד" מכריחה את המודל לפתרון מינימלי, וכשיש 4 קבצים אתם באמת יכולים לקרוא את כולם.
• הרשאות בשלילה, לא רק בחיוב: הסעיף לא רק אומר מה כן, אלא מפרט מה אין. בלי זה, מודל יוסיף כמעט תמיד host_permissions על כל האתרים, כי זה פותר בעיות מראש. המחיר הוא שכרום יציג על התוסף אזהרה שהוא יכול לקרוא ולשנות את הנתונים שלכם בכל האתרים, על תוסף שכל תפקידו להפוך כיוון טקסט.
• קביעת מנגנון ולא רק תוצאה: הבקשה לא הייתה "שיהיה קיצור מקלדת" אלא "קיצור דרך chrome.commands, לא keydown". שתי הדרכים נותנות קיצור עובד, אבל רק אחת מהן מופיעה בעמוד הקיצורים של כרום ומאפשרת לשנות אותה בלי לגעת בקוד. הבחירה הזו לא הייתה מתקבלת מעצמה.
• מקרי קצה מוגדרים מראש: שני סעיפים בפרומפט מוקדשים לדברים שנשברים. טוסטים שמצטברים בלחיצות מהירות, והזרקה שנכשלת בעמודי מערכת של כרום. אלה בדיוק הדברים שמתגלים רק בשימוש אמיתי, ואם מציינים אותם מראש חוסכים סבב תיקונים.
• בקשה להערות בעברית: זו לא בקשה אסתטית. תוסף שאתם מריצים בדפדפן שלכם בלי בקרת איכות של אף גורם הוא קוד שאתם אחראים עליו. הערות בעברית בכל בלוק הן מה שהופך את הקוד למשהו שאתם יכולים לקרוא ולבדוק, ולא לקופסה שחורה שסומכים עליה.
• בקשה להגבלות בסוף התשובה: הסעיף האחרון מבקש מהמודל למנות במפורש מה התוסף לא יכול ואיפה הוא יישבר. זה הופך את המודל מספק פתרונות לגורם שגם מסמן את הגבולות, וזה מידע שאחרת הייתם מגלים לבד, בדרך הקשה.

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

מה עוד אפשר לבנות באותה שיטה

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

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

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

שלוש אזהרות שחשוב להכיר לפני שאתם טוענים קוד לדפדפן

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

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

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

הצעד הראשון הוא לא הקוד

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