יצירת תוסף לדפדפן Google Chrome

יצירת תוספים לדפדפן כרום של גוגל היא עניין פשוט ונעים

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

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

יצירת manifest.json

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


{
  "name": "Compare-Calls Extension",
  "version": "1.0",
  "description": "Compare international calls from Israel",
  "browser_action": {
    "default_icon": "icon.gif",
    "popup": "popup.html"
  }
}


באובייקט הזה יש מעט מידע על התוסף שהכנתי. ראשית, השם שלו. שנית, הגרסה שלו. שלישית, התיאור שלו.
אחרי כן אני מעביר את המידע browser_action שקובע בעצם מה התוסף עושה. לגוגל יש דוקומנטציה נהדרת של manifest.js ובה אפשר לראות את כל האפשרויות. אנו בוחרים באפשרות pop up – כלומר פופ אפ שנפתח כתוצאה מלחיצה על התוסף שלנו.
ב-pop up אני צריך לציין שם של קובץ שיכיל את הפופאפ שלי.
בתכונת default_icon אני משתמש על מנת ליצור את האייקון שלי.

עד כאן בנוגע ל-manifest.json.

יצירת האייקון

יצירת האייקון היא דבר פשוט, כל מה שצריך לעשות זה ליצור/להוריד אייקון כלשהו ולשמור אותו בתיקיה שלנו. לא לשכוח לשנות את default_icon ב-manifest.json לשם של האייקון שלנו! גודל האייקון צריך להיות 19 על 19 פיקסלים.

יצירת הפופ-אפ

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


<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="he-IL">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
<meta name="language" content="he" /> 
</head>
<body>
<form action="http://www.compare-calls.com/main" accept-charset="UTF-8" method="get" target="_blank">
<input type="submit" value="חיפוש"></input>

<select name="title" class="form-select" id="edit-title" ><option value="" selected="selected">בחר מדינה להשוואת שיחות</option><option value="אוגנדה">אוגנדה</option><option value="אוגנדה - סלולרי">אוגנדה - סלולרי</option><option value="אוזבקיסטן">אוזבקיסטן</option><option value="אוזבקיסטן - סלולרי">אוזבקיסטן - סלולרי</option><option value="אוסטריה">אוסטריה</option><option value="אוסטריה - סלולרי">אוסטריה - סלולרי</option><option value="אוסטרליה">אוסטרליה</option><option value="אוסטרליה - סלולרי">אוסטרליה - סלולרי</option><option value="אוקראינה">אוקראינה</option><option value="אוקראינה - סלולרי">אוקראינה - סלולרי</option><option value="אורוגוואי">אורוגוואי</option><option value="אורוגוואי - סלולרי">אורוגוואי - סלולרי</option><option value="אזרביג'אן">אזרביג'אן</option><option value="אזרביג'אן - סלולרי">אזרביג'אן - סלולרי</option><option value="איטליה">איטליה</option><option value="איטליה - סלולרי">איטליה - סלולרי</option><option value="איי דומיניקה">איי דומיניקה</option><option value="איי דומיניקה - סלולרי">איי דומיניקה - סלולרי</option><option value="איי הבתולה ארצות הברית">איי הבתולה ארצות הברית</option><option value="איי הבתולה ארצות הברית - סלולרי">איי הבתולה ארצות הברית - סלולרי</option><option value="איי הבתולה בריטניה">איי הבתולה בריטניה</option><option value="איי הבתולה בריטניה - סלולרי">איי הבתולה בריטניה - סלולרי</option><option value="איי מיוט">איי מיוט</option><option value="איי מיוט - סלולרי">איי מיוט - סלולרי</option><option value="איי מריאנה">איי מריאנה</option><option value="איי מריאנה - סלולרי">איי מריאנה - סלולרי</option><option value="איי מרשל">איי מרשל</option><option value="איי מרשל - סלולרי">איי מרשל - סלולרי</option><option value="איי סולומון">איי סולומון</option><option value="איי סולומון - סלולרי">איי סולומון - סלולרי</option><option value="איי סיישל">איי סיישל</option><option value="איי סיישל - סלולרי">איי סיישל - סלולרי</option><option value="איי פארו">איי פארו</option><option value="איי פארו - סלולרי">איי פארו - סלולרי</option><option value="איי פוקלנד">איי פוקלנד</option><option value="איי פוקלנד - סלולרי">איי פוקלנד - סלולרי</option><option value="איי קוק">איי קוק</option><option value="איי קוק - סלולרי">איי קוק - סלולרי</option><option value="איי קוקוס">איי קוקוס</option><option value="איי קוקוס - סלולרי">איי קוקוס - סלולרי</option><option value="איי קיימן">איי קיימן</option><option value="איי קיימן - סלולרי">איי קיימן - סלולרי</option><option value="איי קריסטמס">איי קריסטמס</option><option value="איי קריסטמס - סלולרי">איי קריסטמס - סלולרי</option><option value="איים מלדבים">איים מלדבים</option><option value="איים מלדבים - סלולרי">איים מלדבים - סלולרי</option><option value="אינדונזיה">אינדונזיה</option><option value="אינדונזיה - סלולרי">אינדונזיה - סלולרי</option><option value="אינמרסט">אינמרסט</option><option value="אינמרסט - סלולרי">אינמרסט - סלולרי</option><option value="איסלנד">איסלנד</option><option value="איסלנד - סלולרי">איסלנד - סלולרי</option><option value="אירידיום">אירידיום</option><option value="אירידיום - סלולרי">אירידיום - סלולרי</option><option value="אירלנד">אירלנד</option><option value="אירלנד - סלולרי">אירלנד - סלולרי</option><option value="אירן">אירן</option><option value="אירן - סלולרי">אירן - סלולרי</option><option value="אל סלבדור">אל סלבדור</option><option value="אל סלבדור - סלולרי">אל סלבדור - סלולרי</option><option value="אלבניה">אלבניה</option><option value="אלבניה - סלולרי">אלבניה - סלולרי</option><option value="אנגווילה">אנגווילה</option><option value="אנגווילה - סלולרי">אנגווילה - סלולרי</option><option value="אנגולה">אנגולה</option><option value="אנגולה - סלולרי">אנגולה - סלולרי</option><option value="אנדורה">אנדורה</option><option value="אנדורה - סלולרי">אנדורה - סלולרי</option><option value="אנטיגואה וברבודה">אנטיגואה וברבודה</option><option value="אנטיגואה וברבודה - סלולרי">אנטיגואה וברבודה - סלולרי</option><option value="אנטילים הולנדיים">אנטילים הולנדיים</option><option value="אנטילים הולנדיים - סלולרי">אנטילים הולנדיים - סלולרי</option><option value="אנגוילה">אנגוילה</option><option value="אנגוילה - סלולרי">אנגוילה - סלולרי</option><option value="אנטרטיקה">אנטרטיקה</option><option value="אנטרטיקה - סלולרי">אנטרטיקה - סלולרי</option><option value="אסטוניה">אסטוניה</option><option value="אסטוניה - סלולרי">אסטוניה - סלולרי</option><option value="אסנשיין">אסנשיין</option><option value="אסנשיין - סלולרי">אסנשיין - סלולרי</option><option value="אפגניסטן">אפגניסטן</option><option value="אפגניסטן - סלולרי">אפגניסטן - סלולרי</option><option value="אקוודור">אקוודור</option><option value="אקוודור - סלולרי">אקוודור - סלולרי</option><option value="ארגנטינה">ארגנטינה</option><option value="ארגנטינה - סלולרי">ארגנטינה - סלולרי</option><option value="ארובה">ארובה</option><option value="ארובה - סלולרי">ארובה - סלולרי</option><option value="אריטריה">אריטריה</option><option value="אריטריה - סלולרי">אריטריה - סלולרי</option><option value="ארמניה">ארמניה</option><option value="ארמניה - סלולרי">ארמניה - סלולרי</option><option value="ארצות הברית">ארצות הברית</option><option value="ארצות הברית - סלולרי">ארצות הברית - סלולרי</option><option value="אתיופיה">אתיופיה</option><option value="אתיופיה - סלולרי">אתיופיה - סלולרי</option><option value="באהמס">באהמס</option><option value="באהמס - סלולרי">באהמס - סלולרי</option><option value="בוטן">בוטן</option><option value="בוטן - סלולרי">בוטן - סלולרי</option><option value="בולגריה">בולגריה</option><option value="בולגריה - סלולרי">בולגריה - סלולרי</option><option value="בוליביה">בוליביה</option><option value="בוליביה - סלולרי">בוליביה - סלולרי</option><option value="בוסניה הרצגובינה">בוסניה הרצגובינה</option><option value="בוסניה הרצגובינה - סלולרי">בוסניה הרצגובינה - סלולרי</option><option value="בופוטסואנה">בופוטסואנה</option><option value="בופוטסואנה - סלולרי">בופוטסואנה - סלולרי</option><option value="בורונדי">בורונדי</option><option value="בורונדי - סלולרי">בורונדי - סלולרי</option><option value="בורקינה פסו">בורקינה פסו</option><option value="בורקינה פסו - סלולרי">בורקינה פסו - סלולרי</option><option value="בחריין">בחריין</option><option value="בחריין - סלולרי">בחריין - סלולרי</option><option value="בלגיה">בלגיה</option><option value="בלגיה - סלולרי">בלגיה - סלולרי</option><option value="בליז">בליז</option><option value="בליז - סלולרי">בליז - סלולרי</option><option value="בלרוס">בלרוס</option><option value="בלרוס - סלולרי">בלרוס - סלולרי</option><option value="בנגלדש">בנגלדש</option><option value="בנגלדש - סלולרי">בנגלדש - סלולרי</option><option value="בנין">בנין</option><option value="בנין - סלולרי">בנין - סלולרי</option><option value="ברבדוס">ברבדוס</option><option value="ברבדוס - סלולרי">ברבדוס - סלולרי</option><option value="ברוני דרוסלם">ברוני דרוסלם</option><option value="ברוני דרוסלם - סלולרי">ברוני דרוסלם - סלולרי</option><option value="ברזיל">ברזיל</option><option value="ברזיל - סלולרי">ברזיל - סלולרי</option><option value="בריטניה">בריטניה</option><option value="בריטניה - סלולרי">בריטניה - סלולרי</option><option value="ברמודה">ברמודה</option><option value="ברמודה - סלולרי">ברמודה - סלולרי</option><option value="גאנה">גאנה</option><option value="גאנה - סלולרי">גאנה - סלולרי</option><option value="גבון">גבון</option><option value="גבון - סלולרי">גבון - סלולרי</option><option value="גואדלופ">גואדלופ</option><option value="גואדלופ - סלולרי">גואדלופ - סלולרי</option><option value="גואטמלה">גואטמלה</option><option value="גואטמלה - סלולרי">גואטמלה - סלולרי</option><option value="גואם">גואם</option><option value="גואם - סלולרי">גואם - סלולרי</option><option value="גיאנה צרפתית">גיאנה צרפתית</option><option value="גיאנה צרפתית - סלולרי">גיאנה צרפתית - סלולרי</option><option value="גיברלטר">גיברלטר</option><option value="גיברלטר - סלולרי">גיברלטר - סלולרי</option><option value="גינאה">גינאה</option><option value="גינאה - סלולרי">גינאה - סלולרי</option><option value="גינאה ביסו">גינאה ביסו</option><option value="גינאה ביסו - סלולרי">גינאה ביסו - סלולרי</option><option value="גינאה בריטית">גינאה בריטית</option><option value="גינאה בריטית - סלולרי">גינאה בריטית - סלולרי</option><option value="גינאה משוונית">גינאה משוונית</option><option value="גינאה משוונית - סלולרי">גינאה משוונית - סלולרי</option><option value="גמביה">גמביה</option><option value="גמביה - סלולרי">גמביה - סלולרי</option><option value="ג'מייקה">ג'מייקה</option><option value="ג'מייקה - סלולרי">ג'מייקה - סלולרי</option><option value="גרוזיה">גרוזיה</option><option value="גרוזיה - סלולרי">גרוזיה - סלולרי</option><option value="גרינלנד">גרינלנד</option><option value="גרינלנד - סלולרי">גרינלנד - סלולרי</option><option value="גרמניה">גרמניה</option><option value="גרמניה - סלולרי">גרמניה - סלולרי</option><option value="גרנדה">גרנדה</option><option value="גרנדה - סלולרי">גרנדה - סלולרי</option><option value="דגי'בוטי">דגי'בוטי</option><option value="דגי'בוטי - סלולרי">דגי'בוטי - סלולרי</option><option value="דיאגו גרסיה">דיאגו גרסיה</option><option value="דיאגו גרסיה - סלולרי">דיאגו גרסיה - סלולרי</option><option value="דנמרק">דנמרק</option><option value="דנמרק - סלולרי">דנמרק - סלולרי</option><option value="דרום אפריקה">דרום אפריקה</option><option value="דרום אפריקה - סלולרי">דרום אפריקה - סלולרי</option><option value="דרום קוריאה">דרום קוריאה</option><option value="דרום קוריאה - סלולרי">דרום קוריאה - סלולרי</option><option value="האיטי">האיטי</option><option value="האיטי - סלולרי">האיטי - סלולרי</option><option value="הודו">הודו</option><option value="הודו - סלולרי">הודו - סלולרי</option><option value="הולנד">הולנד</option><option value="הולנד - סלולרי">הולנד - סלולרי</option><option value="הונג קונג">הונג קונג</option><option value="הונג קונג - סלולרי">הונג קונג - סלולרי</option><option value="הונגריה">הונגריה</option><option value="הונגריה - סלולרי">הונגריה - סלולרי</option><option value="הונדורוס">הונדורוס</option><option value="הונדורוס - סלולרי">הונדורוס - סלולרי</option><option value="הרפובליקה הדומיניקנית">הרפובליקה הדומיניקנית</option><option value="הרפובליקה הדומיניקנית - סלולרי">הרפובליקה הדומיניקנית - סלולרי</option><option value="ויטנאם">ויטנאם</option><option value="ויטנאם - סלולרי">ויטנאם - סלולרי</option><option value="ויילס ופוטונה">ויילס ופוטונה</option><option value="ויילס ופוטונה - סלולרי">ויילס ופוטונה - סלולרי</option><option value="ונואטו">ונואטו</option><option value="ונואטו - סלולרי">ונואטו - סלולרי</option><option value="ונצואלה">ונצואלה</option><option value="ונצואלה - סלולרי">ונצואלה - סלולרי</option><option value="ותיקן">ותיקן</option><option value="ותיקן - סלולרי">ותיקן - סלולרי</option><option value="זאיר">זאיר</option><option value="זאיר - סלולרי">זאיר - סלולרי</option><option value="זימבבווה">זימבבווה</option><option value="זימבבווה - סלולרי">זימבבווה - סלולרי</option><option value="זמביה">זמביה</option><option value="זמביה - סלולרי">זמביה - סלולרי</option><option value="חוף השנהב">חוף השנהב</option><option value="חוף השנהב - סלולרי">חוף השנהב - סלולרי</option><option value="טג'יקיסטן">טג'יקיסטן</option><option value="טג'יקיסטן - סלולרי">טג'יקיסטן - סלולרי</option><option value="טובלו">טובלו</option><option value="טובלו - סלולרי">טובלו - סלולרי</option><option value="טוגו">טוגו</option><option value="טוגו - סלולרי">טוגו - סלולרי</option><option value="טונגה">טונגה</option><option value="טונגה - סלולרי">טונגה - סלולרי</option><option value="טוניסיה">טוניסיה</option><option value="טוניסיה - סלולרי">טוניסיה - סלולרי</option><option value="טוקלאו">טוקלאו</option><option value="טוקלאו - סלולרי">טוקלאו - סלולרי</option><option value="טוראיה">טוראיה</option><option value="טוראיה - סלולרי">טוראיה - סלולרי</option><option value="טורקיה">טורקיה</option><option value="טורקיה - סלולרי">טורקיה - סלולרי</option><option value="טורקמינסטן">טורקמינסטן</option><option value="טורקמינסטן - סלולרי">טורקמינסטן - סלולרי</option><option value="טורקס">טורקס</option><option value="טורקס - סלולרי">טורקס - סלולרי</option><option value="טיוואן">טיוואן</option><option value="טיוואן - סלולרי">טיוואן - סלולרי</option><option value="טנזניה">טנזניה</option><option value="טנזניה - סלולרי">טנזניה - סלולרי</option><option value="טרינידד וטובגו">טרינידד וטובגו</option><option value="טרינידד וטובגו - סלולרי">טרינידד וטובגו - סלולרי</option><option value="יוון">יוון</option><option value="יוון - סלולרי">יוון - סלולרי</option><option value="יפן">יפן</option><option value="יפן - סלולרי">יפן - סלולרי</option><option value="ירדן">ירדן</option><option value="ירדן - סלולרי">ירדן - סלולרי</option><option value="כווית">כווית</option><option value="כווית - סלולרי">כווית - סלולרי</option><option value="לאוס">לאוס</option><option value="לאוס - סלולרי">לאוס - סלולרי</option><option value="לבנון">לבנון</option><option value="לבנון - סלולרי">לבנון - סלולרי</option><option value="לוב">לוב</option><option value="לוב - סלולרי">לוב - סלולרי</option><option value="לוקסמבורג">לוקסמבורג</option><option value="לוקסמבורג - סלולרי">לוקסמבורג - סלולרי</option><option value="לטביה">לטביה</option><option value="לטביה - סלולרי">לטביה - סלולרי</option><option value="ליבריה">ליבריה</option><option value="ליבריה - סלולרי">ליבריה - סלולרי</option><option value="ליטא">ליטא</option><option value="ליטא - סלולרי">ליטא - סלולרי</option><option value="ליכטנשטיין">ליכטנשטיין</option><option value="ליכטנשטיין - סלולרי">ליכטנשטיין - סלולרי</option><option value="לסטו">לסטו</option><option value="לסטו - סלולרי">לסטו - סלולרי</option><option value="מאוריטניה">מאוריטניה</option><option value="מאוריטניה - סלולרי">מאוריטניה - סלולרי</option><option value="מאורציוס">מאורציוס</option><option value="מאורציוס - סלולרי">מאורציוס - סלולרי</option><option value="מלזיה">מלזיה</option><option value="מלזיה - סלולרי">מלזיה - סלולרי</option><option value="מאלי">מאלי</option><option value="מאלי - סלולרי">מאלי - סלולרי</option><option value="מדגסקר">מדגסקר</option><option value="מדגסקר - סלולרי">מדגסקר - סלולרי</option><option value="מוזמביק">מוזמביק</option><option value="מוזמביק - סלולרי">מוזמביק - סלולרי</option><option value="מולדובה">מולדובה</option><option value="מולדובה - סלולרי">מולדובה - סלולרי</option><option value="מונגוליה">מונגוליה</option><option value="מונגוליה - סלולרי">מונגוליה - סלולרי</option><option value="מונטנגרו">מונטנגרו</option><option value="מונטנגרו - סלולרי">מונטנגרו - סלולרי</option><option value="מונסרט">מונסרט</option><option value="מונסרט - סלולרי">מונסרט - סלולרי</option><option value="מונקו">מונקו</option><option value="מונקו - סלולרי">מונקו - סלולרי</option><option value="מזרח טימור">מזרח טימור</option><option value="מזרח טימור - סלולרי">מזרח טימור - סלולרי</option><option value="מיאנמר">מיאנמר</option><option value="מיאנמר - סלולרי">מיאנמר - סלולרי</option><option value="מיקרונזיה">מיקרונזיה</option><option value="מיקרונזיה - סלולרי">מיקרונזיה - סלולרי</option><option value="מלאווי">מלאווי</option><option value="מלאווי - סלולרי">מלאווי - סלולרי</option><option value="מלטה">מלטה</option><option value="מלטה - סלולרי">מלטה - סלולרי</option><option value="מצרים">מצרים</option><option value="מצרים - סלולרי">מצרים - סלולרי</option><option value="מקאו">מקאו</option><option value="מקאו - סלולרי">מקאו - סלולרי</option><option value="מקדוניה">מקדוניה</option><option value="מקדוניה - סלולרי">מקדוניה - סלולרי</option><option value="מקסיקו">מקסיקו</option><option value="מקסיקו - סלולרי">מקסיקו - סלולרי</option><option value="מרוקו">מרוקו</option><option value="מרוקו - סלולרי">מרוקו - סלולרי</option><option value="מרטיניק">מרטיניק</option><option value="מרטיניק - סלולרי">מרטיניק - סלולרי</option><option value="מרכז אפריקה">מרכז אפריקה</option><option value="מרכז אפריקה - סלולרי">מרכז אפריקה - סלולרי</option><option value="נאורו">נאורו</option><option value="נאורו - סלולרי">נאורו - סלולרי</option><option value="נורווגיה">נורווגיה</option><option value="נורווגיה - סלולרי">נורווגיה - סלולרי</option><option value="נורפולק">נורפולק</option><option value="נורפולק - סלולרי">נורפולק - סלולרי</option><option value="ניג'ר">ניג'ר</option><option value="ניג'ר - סלולרי">ניג'ר - סלולרי</option><option value="ניגריה">ניגריה</option><option value="ניגריה - סלולרי">ניגריה - סלולרי</option><option value="ניו זילנד">ניו זילנד</option><option value="ניו זילנד - סלולרי">ניו זילנד - סלולרי</option><option value="ניואה">ניואה</option><option value="ניואה - סלולרי">ניואה - סלולרי</option><option value="ניקרגואה">ניקרגואה</option><option value="ניקרגואה - סלולרי">ניקרגואה - סלולרי</option><option value="נמיביה">נמיביה</option><option value="נמיביה - סלולרי">נמיביה - סלולרי</option><option value="נסיכויות המפרץ">נסיכויות המפרץ</option><option value="נסיכויות המפרץ - סלולרי">נסיכויות המפרץ - סלולרי</option><option value="נפאל">נפאל</option><option value="נפאל - סלולרי">נפאל - סלולרי</option><option value=" סאו תומה ופרינסיפה"> סאו תומה ופרינסיפה</option><option value="סאו תומה ופרינסיפה - סלולרי">סאו תומה ופרינסיפה - סלולרי</option><option value="סודן">סודן</option><option value="סודן - סלולרי">סודן - סלולרי</option><option value="סווזילנד">סווזילנד</option><option value="סווזילנד - סלולרי">סווזילנד - סלולרי</option><option value="סומליה">סומליה</option><option value="סומליה - סלולרי">סומליה - סלולרי</option><option value="סוריה">סוריה</option><option value="סוריה - סלולרי">סוריה - סלולרי</option><option value="סורינם">סורינם</option><option value="סורינם - סלולרי">סורינם - סלולרי</option><option value="סיירה ליאונה">סיירה ליאונה</option><option value="סיירה ליאונה - סלולרי">סיירה ליאונה - סלולרי</option><option value="סין">סין</option><option value="סין - סלולרי">סין - סלולרי</option><option value="סינגפור">סינגפור</option><option value="סינגפור - סלולרי">סינגפור - סלולרי</option><option value="סלובניה">סלובניה</option><option value="סלובניה - סלולרי">סלובניה - סלולרי</option><option value="סלובקיה">סלובקיה</option><option value="סלובקיה - סלולרי">סלובקיה - סלולרי</option><option value="סמואה אמריקאית">סמואה אמריקאית</option><option value="סמואה אמריקאית - סלולרי">סמואה אמריקאית - סלולרי</option><option value="סמואה מערב">סמואה מערב</option><option value="סמואה מערב - סלולרי">סמואה מערב - סלולרי</option><option value="סן מרינו">סן מרינו</option><option value="סן מרינו - סלולרי">סן מרינו - סלולרי</option><option value="סנגל">סנגל</option><option value="סנגל - סלולרי">סנגל - סלולרי</option><option value="סנט הלנה">סנט הלנה</option><option value="סנט הלנה - סלולרי">סנט הלנה - סלולרי</option><option value="סנט וינסנט וגרנדין">סנט וינסנט וגרנדין</option><option value="סנט וינסנט וגרנדין - סלולרי">סנט וינסנט וגרנדין - סלולרי</option><option value="סנט לוצ'יה">סנט לוצ'יה</option><option value="סנט לוצ'יה - סלולרי">סנט לוצ'יה - סלולרי</option><option value="סנט פייר ומיקולון">סנט פייר ומיקולון</option><option value="סנט פייר ומיקולון - סלולרי">סנט פייר ומיקולון - סלולרי</option><option value="סנט קיטס ונוויס">סנט קיטס ונוויס</option><option value="סנט קיטס ונוויס - סלולרי">סנט קיטס ונוויס - סלולרי</option><option value="ספרד">ספרד</option><option value="ספרד - סלולרי">ספרד - סלולרי</option><option value="סרביה">סרביה</option><option value="סרביה - סלולרי">סרביה - סלולרי</option><option value="סרי לנקה">סרי לנקה</option><option value="סרי לנקה - סלולרי">סרי לנקה - סלולרי</option><option value="עומאן">עומאן</option><option value="עומאן - סלולרי">עומאן - סלולרי</option><option value="עיראק">עיראק</option><option value="עיראק - סלולרי">עיראק - סלולרי</option><option value="ערב הסעודית">ערב הסעודית</option><option value="ערב הסעודית - סלולרי">ערב הסעודית - סלולרי</option><option value="פולין">פולין</option><option value="פולין - סלולרי">פולין - סלולרי</option><option value="פולינזיה הצרפתית">פולינזיה הצרפתית</option><option value="פולינזיה הצרפתית - סלולרי">פולינזיה הצרפתית - סלולרי</option><option value="פורטו ריקו">פורטו ריקו</option><option value="פורטו ריקו - סלולרי">פורטו ריקו - סלולרי</option><option value="פורטוגל">פורטוגל</option><option value="פורטוגל - סלולרי">פורטוגל - סלולרי</option><option value="פיג'י">פיג'י</option><option value="פיג'י - סלולרי">פיג'י - סלולרי</option><option value="פיליפינים">פיליפינים</option><option value="פיליפינים - סלולרי">פיליפינים - סלולרי</option><option value="פינלנד">פינלנד</option><option value="פינלנד - סלולרי">פינלנד - סלולרי</option><option value="פלאו">פלאו</option><option value="פלאו - סלולרי">פלאו - סלולרי</option><option value="פנמה">פנמה</option><option value="פנמה - סלולרי">פנמה - סלולרי</option><option value="פפואה גינאה החדשה">פפואה גינאה החדשה</option><option value="פפואה גינאה החדשה - סלולרי">פפואה גינאה החדשה - סלולרי</option><option value="פקיסטן">פקיסטן</option><option value="פקיסטן - סלולרי">פקיסטן - סלולרי</option><option value="פרגוואי">פרגוואי</option><option value="פרגוואי - סלולרי">פרגוואי - סלולרי</option><option value="פרו">פרו</option><option value="פרו - סלולרי">פרו - סלולרי</option><option value="צפון קוריאה">צפון קוריאה</option><option value="צפון קוריאה - סלולרי">צפון קוריאה - סלולרי</option><option value="צרפת">צרפת</option><option value="צרפת - סלולרי">צרפת - סלולרי</option><option value="קובה">קובה</option><option value="קובה - סלולרי">קובה - סלולרי</option><option value="קולומביה">קולומביה</option><option value="קולומביה - סלולרי">קולומביה - סלולרי</option><option value="קומורוס">קומורוס</option><option value="קומורוס - סלולרי">קומורוס - סלולרי</option><option value="קונגו">קונגו</option><option value="קונגו - סלולרי">קונגו - סלולרי</option><option value="קוסטה ריקה">קוסטה ריקה</option><option value="קוסטה ריקה - סלולרי">קוסטה ריקה - סלולרי</option><option value="קזחסטן">קזחסטן</option><option value="קזחסטן - סלולרי">קזחסטן - סלולרי</option><option value="קטר">קטר</option><option value="קטר - סלולרי">קטר - סלולרי</option><option value="קייפ וורדה">קייפ וורדה</option><option value="קייפ וורדה - סלולרי">קייפ וורדה - סלולרי</option><option value="קירבטי">קירבטי</option><option value="קירבטי - סלולרי">קירבטי - סלולרי</option><option value="קירגיסטן">קירגיסטן</option><option value="קירגיסטן - סלולרי">קירגיסטן - סלולרי</option><option value="קלדוניה החדשה">קלדוניה החדשה</option><option value="קלדוניה החדשה - סלולרי">קלדוניה החדשה - סלולרי</option><option value="קמבודיה">קמבודיה</option><option value="קמבודיה - סלולרי">קמבודיה - סלולרי</option><option value="קמרון">קמרון</option><option value="קמרון - סלולרי">קמרון - סלולרי</option><option value="קנדה">קנדה</option><option value="קנדה - סלולרי">קנדה - סלולרי</option><option value="קניה">קניה</option><option value="קניה - סלולרי">קניה - סלולרי</option><option value="קפריסין">קפריסין</option><option value="קפריסין - סלולרי">קפריסין - סלולרי</option><option value="קרואטיה">קרואטיה</option><option value="קרואטיה - סלולרי">קרואטיה - סלולרי</option><option value="ראוניון">ראוניון</option><option value="ראוניון - סלולרי">ראוניון - סלולרי</option><option value="רואנדה">רואנדה</option><option value="רואנדה - סלולרי">רואנדה - סלולרי</option><option value="רומניה">רומניה</option><option value="רומניה - סלולרי">רומניה - סלולרי</option><option value="רוסיה">רוסיה</option><option value="רוסיה - סלולרי">רוסיה - סלולרי</option><option value="שבדיה">שבדיה</option><option value="שבדיה - סלולרי">שבדיה - סלולרי</option><option value="שוויץ">שוויץ</option><option value="שוויץ - סלולרי">שוויץ - סלולרי</option><option value="תאילנד">תאילנד</option><option value="תאילנד - סלולרי">תאילנד - סלולרי</option><option value="תימן">תימן</option><option value="תימן - סלולרי">תימן - סלולרי</option></select>
</form>

</body>
</html>

בדיקת התוסף והעלאה

אחרי שיצרנו את הפופאפ, כדאי לנו לבדוק את התוסף שיצרנו בכרום שלנו. נלחץ על אייקון המפתח השוודי: Customize and control Google Chrome. אחרי כן נבחר בTools ואז ב-Extensions ואז ב Load unpacked extensions ונבחר בתיקיה שלנו. זה הכל, אם הכל תקין יהיה אפשר לראות את התוסף. ניתן לבצע שינויים בתוסף ולעדכנו ואז ללחוץ על Update extensions now. בסיום ניתן ללחוץ על Pack או לכווץ את הכל ל-ZIP ולהעלות לספרית התוספים של כרום.

לשם הדוגמא ניתן לראות, להוריד ולהשתמש בתוסף שלי ל-compare-calls שהקוד שלו פורסם במלואו כאן.

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

גלילה לראש העמוד