חבר משתמשים מתוסף Chrome

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

מדריך Google Chrome: צור סיומת

אני מזמין אותך לגלות כיצד ליצור סיומת לדפדפן האינטרנט של Google Chrome. יצירת הרחבה אולי נראית מורכבת, אך אל תפחד ! אכן, ניתן ליצור הרחבות של Google Chrome עם שפות שאנו מכירים היטב: JS, HTML ו- CSS.

התנאי המוקדם הקטן

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

קבע את התצורה של התוסף שלך

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

< "manifest_version": 2, // Indique la version du manifest (toujours 2) "name": "Tutoriel créer une extension", // Le nom de votre extension "description": "Chaine YT Plati'Script", // La description "version": "1.0", // La version en en l'occurrence la première donc 1.0 "permissions": [ // Les permissions, on y reviendra plus bas "http://*/*", "https://*/*", ], "browser_action": < // Les paramètres "default_icon" : "img/icon.png", // L'icône qui s'affiche en haut à droite de votre navigateur "default_popup": "popup.html" // Le popup qui s'affichera quand vous cliquez sur l'îcone >, "אייקונים": < // L'îcone qui s'affichera lorse que vous êtes sur la page extensions des paramètre "128" : "img/icon_128.png" // 128 = 128x128 la taille de votre image >>

כל הפרמטרים הזמינים לקובץ זה מתוארים בתיעוד.

הרשאות

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

מחרוזת תווים המייצגת סוג מסוים של הרשאה, למשל גישה לכרטיסיות כרטיסיות (רשימת הרשאות)
סיבה המייצגת פורמט כתובת אתר שאליה אנו ניגשים (דפוסי התאמה)

"הרשאות": [// הרשאות, נחזור למטה "http: //*/*", "https: //*/*", "כרטיסיות" // כרטיסיות היא אישור ליצור כרטיסיות חדשות],

עבור “http: /// /“וה-” https: /// /“, אנו אומרים לו שהסיומת יכולה לעבוד על כל דפי HTTP או HTTPS.

צור קופץ

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

 H1, עמ ' בוקר טוב
 שלום אני קופץ פשוט
מי לא תופס הרבה מקום

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

בדוק את ההרחבה שלה

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

תַסרִיט

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

JavaScript בפופ-אפ

קודם כל אפשר לטעון JavaScript ישירות ב- Pop-Up. אכן, זהו דף אינטרנט קלאסי עליו אנו יכולים לטעון כל קובץ JavaScript עם התג .

 // אנו טוענים את הסקריפט שלנו בתוכן HTML H1, p בוקר טוב
 שלום אני קופץ פשוט
מי לא תופס הרבה מקום

עם זאת, קובץ ה- JavaScript יוטען רק בפתיחת הקופץ, פתאום אם המשתמש לעולם לא תומך בכפתור, JavaScript שלך לעולם לא יבוצע

JavaScript ב”רקע “

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

סקריפטים של התוכן

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

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

התראות כרום

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

"הרשאות": [// הרשאות, נחזור למטה "http: //*/*", "https: //*/*", "כרטיסיות", // כרטיסיות היא אישור ליצור כרטיסיות חדשות "הודעות" " // מפעיל התראות],

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

הודעה var = הודעה חדשה ('כותרת השמירה !', < icon: 'votreicon.jpg', body: "Votre petite description de la notification", >);

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