12 KiB
פרויקט תוסף לדפדפן חלק 1: הכל על דפדפנים
שרטוט מאת Wassim Chegham
חידון לפני השיעור
מבוא
תוספי דפדפן מוסיפים פונקציונליות נוספת לדפדפן. אבל לפני שתבנו אחד, כדאי ללמוד קצת על איך דפדפנים עובדים.
על הדפדפן
בסדרת שיעורים זו תלמדו כיצד לבנות תוסף לדפדפן שיעבוד על דפדפני Chrome, Firefox ו-Edge. בחלק זה תגלו כיצד דפדפנים פועלים ותבנו את השלד של מרכיבי התוסף לדפדפן.
אבל מהו בעצם דפדפן? מדובר ביישום תוכנה שמאפשר למשתמש הקצה לגשת לתוכן משרת ולהציג אותו בדפי אינטרנט.
✅ קצת היסטוריה: הדפדפן הראשון נקרא 'WorldWideWeb' ונוצר על ידי סר טימותי ברנרס-לי בשנת 1990.
כמה דפדפנים מוקדמים, דרך Karen McGrane
כאשר משתמש מתחבר לאינטרנט באמצעות כתובת URL (Uniform Resource Locator), בדרך כלל באמצעות פרוטוקול Hypertext Transfer Protocol דרך כתובת http או https, הדפדפן מתקשר עם שרת אינטרנט ומביא דף אינטרנט.
בשלב זה, מנוע הרינדור של הדפדפן מציג אותו על המכשיר של המשתמש, שיכול להיות טלפון נייד, מחשב שולחני או מחשב נייד.
לדפדפנים יש גם יכולת לשמור תוכן במטמון כך שלא יהיה צורך להביא אותו מהשרת בכל פעם. הם יכולים לתעד את היסטוריית הגלישה של המשתמש, לשמור 'עוגיות' (cookies), שהן פיסות מידע קטנות המשמשות לאחסון פעילות המשתמש, ועוד.
דבר חשוב מאוד לזכור לגבי דפדפנים הוא שהם לא כולם זהים! לכל דפדפן יש יתרונות וחסרונות, ומפתח אתרים מקצועי צריך להבין כיצד לגרום לדפי אינטרנט לפעול היטב בכל הדפדפנים. זה כולל טיפול בתצוגות קטנות כמו של טלפון נייד, וגם במשתמש שאינו מחובר לאינטרנט.
אתר שימושי מאוד שכדאי לכם לשמור במועדפים בדפדפן המועדף עליכם הוא caniuse.com. כשאתם בונים דפי אינטרנט, זה מאוד עוזר להשתמש ברשימות הטכנולוגיות הנתמכות של caniuse כדי לתמוך בצורה הטובה ביותר במשתמשים שלכם.
✅ איך אפשר לדעת אילו דפדפנים הכי פופולריים בקרב משתמשי האתר שלכם? בדקו את האנליטיקות שלכם - אפשר להתקין חבילות אנליטיקה שונות כחלק מתהליך פיתוח האתר, והן יספרו לכם אילו דפדפנים הכי בשימוש.
תוספי דפדפן
למה שתרצו לבנות תוסף לדפדפן? זהו כלי שימושי שמצורף לדפדפן כשאתם זקוקים לגישה מהירה למשימות שאתם נוטים לחזור עליהן. לדוגמה, אם אתם מוצאים את עצמכם צריכים לבדוק צבעים בדפי אינטרנט שונים, תוכלו להתקין תוסף דפדפן לבחירת צבעים. אם אתם מתקשים לזכור סיסמאות, תוכלו להשתמש בתוסף לניהול סיסמאות.
בנוסף, פיתוח תוספי דפדפן הוא כיף. הם נוטים לנהל מספר מוגבל של משימות שהם מבצעים היטב.
✅ מהם תוספי הדפדפן האהובים עליכם? אילו משימות הם מבצעים?
התקנת תוספים
לפני שתתחילו לבנות, כדאי להסתכל על תהליך הבנייה והפריסה של תוסף לדפדפן. למרות שכל דפדפן שונה מעט באופן שבו הוא מנהל את המשימה הזו, התהליך דומה ב-Chrome וב-Firefox לדוגמה הזו ב-Edge:
הערה: ודאו שאתם מפעילים את מצב המפתחים ומאפשרים תוספים מחנויות אחרות.
במהות, התהליך יהיה:
- בנו את התוסף שלכם באמצעות
npm run build - נווטו בדפדפן ללשונית התוספים באמצעות כפתור "הגדרות ועוד" (סמל
...) בפינה הימנית העליונה - אם זו התקנה חדשה, בחרו
load unpackedכדי להעלות תוסף חדש מתיקיית הבנייה שלו (במקרה שלנו זו/dist) - או, לחצו על
reloadאם אתם טוענים מחדש תוסף שכבר הותקן
✅ ההוראות הללו מתייחסות לתוספים שאתם בונים בעצמכם; כדי להתקין תוספים שפורסמו בחנות התוספים של הדפדפן, עליכם לנווט לאותן חנויות ולהתקין את התוסף שבחרתם.
התחילו
אתם הולכים לבנות תוסף לדפדפן שמציג את טביעת הרגל הפחמנית של האזור שלכם, כולל צריכת האנרגיה ומקור האנרגיה. התוסף יכלול טופס לאיסוף מפתח API כך שתוכלו לגשת ל-API של CO2 Signal.
מה תצטרכו:
- מפתח API; הזינו את כתובת האימייל שלכם בתיבה בעמוד זה ומפתח יישלח אליכם
- קוד האזור שלכם המתאים ל-Electricity Map (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO')
- קוד התחלתי. הורידו את תיקיית
start; תשלימו את הקוד בתיקייה זו. - NPM - NPM הוא כלי לניהול חבילות; התקינו אותו מקומית והחבילות המפורטות בקובץ
package.jsonשלכם יותקנו לשימוש בנכסי האינטרנט שלכם
✅ למדו עוד על ניהול חבילות במודול המצוין הזה
קחו רגע לעבור על בסיס הקוד:
dist
-|manifest.json (הגדרות ברירת מחדל כאן)
-|index.html (סימון HTML של החזית כאן)
-|background.js (JS רקע כאן)
-|main.js (JS שנבנה)
src
-|index.js (הקוד שלכם ב-JS כאן)
✅ ברגע שיש לכם את מפתח ה-API וקוד האזור, שמרו אותם במקום כלשהו להמשך.
בניית ה-HTML לתוסף
לתוסף הזה יש שני תצוגות. אחת לאיסוף מפתח ה-API וקוד האזור:
והשנייה להצגת צריכת הפחמן של האזור:
נתחיל בבניית ה-HTML לטופס ולעיצובו עם CSS.
בתיקיית /dist, תבנו טופס ואזור תוצאות. בקובץ index.html, מלאו את אזור הטופס המוגדר:
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
זהו הטופס שבו המידע השמור שלכם יוזן ויישמר באחסון המקומי.
לאחר מכן, צרו את אזור התוצאות; מתחת לתג הטופס האחרון, הוסיפו כמה div-ים:
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
בשלב זה, תוכלו לנסות בנייה. ודאו שאתם מתקינים את תלות החבילות של התוסף:
npm install
הפקודה הזו תשתמש ב-npm, מנהל החבילות של Node, כדי להתקין את webpack לתהליך הבנייה של התוסף שלכם. תוכלו לראות את תוצאת התהליך הזה על ידי התבוננות בקובץ /dist/main.js - תראו שהקוד נארז.
לעת עתה, התוסף אמור להיבנות ואם תפרסו אותו ב-Edge כתוסף, תראו טופס מוצג בצורה מסודרת.
ברכות, עשיתם את הצעדים הראשונים לבניית תוסף לדפדפן. בשיעורים הבאים תהפכו אותו ליותר פונקציונלי ושימושי.
🚀 אתגר
הסתכלו על חנות תוספי דפדפן והתקינו אחד לדפדפן שלכם. תוכלו לבדוק את הקבצים שלו בדרכים מעניינות. מה תגלו?
חידון אחרי השיעור
סקירה ולימוד עצמי
בשיעור זה למדתם קצת על ההיסטוריה של דפדפני האינטרנט; נצלו את ההזדמנות ללמוד על איך ממציאי ה-World Wide Web דמיינו את השימוש בו על ידי קריאה נוספת על ההיסטוריה שלו. אתרים שימושיים כוללים:
An interview with Tim Berners-Lee
משימה
כתב ויתור:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.