בשלב זה נלמד:
- אבני הבניין הבסיסיות של אפליקציית Chrome, כולל קובץ המניפסט וסקריפטים של רקע.
- איך להתקין, להריץ ולנפות באגים של אפליקציית Chrome
זמן משוער להשלמת השלב הזה: 10 דקות.
כדי לראות תצוגה מקדימה של מה שתבצעו בשלב הזה, דלגו לתחתית הדף הזה ↓.
היכרות עם אפליקציות Chrome
אפליקציית Chrome מכילה את הרכיבים הבאים:
- המניפסט מציין את המטא-מידע של האפליקציה. המניפסט מוסר ל-Chrome מידע על האפליקציה, על אופן ההפעלה שלה ועל ההרשאות הנוספות הנדרשות.
- דף האירוע, שנקרא גם סקריפט רקע, אחראי לניהול מחזור החיים של האפליקציה. סקריפט הרקע הוא המקום שבו רושמים מאזינים לאירועים ספציפיים באפליקציה, כמו הפעלה וסגירה של חלון האפליקציה.
- כל קובצי הקוד צריכים להיות ארוזים באפליקציית Chrome, כולל HTML, CSS, JS ו-Native Client.
- גם נכסים, כולל סמלי אפליקציות, צריכים להיכלל בחבילה באפליקציית Chrome.
יצירת מניפסט
פותחים את עורך הקוד/הטקסט המועדף עליכם ויוצרים את הקובץ הבא בשם manifest.json:
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
שימו לב איך המניפסט הזה מתאר סקריפט רקע בשם background.js. לאחר מכן תוכלו ליצור את הקובץ הזה.
"background": {
"scripts": ["background.js"]
}
אנו נספק לך סמל אפליקציה בהמשך השלב הזה:
"icons": {
"128": "icon_128.png"
},
יצירת סקריפט לרקע
יוצרים את הקובץ הבא ושומרים אותו בתור background.js:
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
סקריפט הרקע פשוט ממתין לאירוע ההפעלה chrome.app.runtime.onLaunched של האפליקציה, ומפעיל את פונקציית הקריאה החוזרת:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
כאשר אפליקציית Chrome מופעלת, chrome.app.window.create() ייצור חלון חדש ומשתמש בדף HTML בסיסי (index.html) בתור המקור. בשלב הבא יוצרים את תצוגת ה-HTML.
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
סקריפטים ברקע עשויים להכיל פונקציות listener נוספות, חלונות, הודעות פרסום ונתוני הפעלה נוספים - כל אלה משמשים את דף האירוע לניהול האפליקציה.
יצירה של תצוגת HTML
צרו דף אינטרנט פשוט כדי להציג במסך את הודעת Hello World (שלום עולם) ושמרו אותה בפורמט index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
בדיוק כמו כל דף אינטרנט אחר, גם קובץ ה-HTML הזה יכול לכלול חבילות JavaScript, CSS או נכסים.
הוספת סמל אפליקציה
לוחצים לחיצה ימנית ושומרים את התמונה הזו בגודל 128x128 בתיקיית הפרויקט בתור _icon128.png:
קובץ PNG זה ישמש אותך כסמל האפליקציה שיוצג למשתמשים בתפריט ההפעלה.
אישור שיצרת את כל הקבצים
ארבעת הקבצים הבאים אמורים להיות לכם עכשיו בתיקיית הפרויקט:
התקנת אפליקציית Chrome במצב פיתוח
אפשר להשתמש במצב פיתוח כדי לטעון ולהפעיל במהירות את האפליקציה, בלי להגדיר אותה כחבילת הפצה.
- ניגשים אל chrome://extensions מסרגל הכתובות ב-Chrome.
- מסמנים את התיבה מצב פיתוח.
- לוחצים על טעינת תוסף לא ארוז.
- בתיבת הדו-שיח לבחירת קבצים, מנווטים לתיקיית הפרויקט של האפליקציה ובוחרים בה כדי לטעון את האפליקציה.
הפעלת האפליקציה Hello World הסתיימה
אחרי שטוענים את הפרויקט כתוסף לא ארוז, לוחצים על Launch (השקה) לצד האפליקציה שמותקנת. אמור להיפתח חלון עצמאי חדש:
מזל טוב, יצרת עכשיו יישום Chrome חדש!
ניפוי באגים באפליקציית Chrome באמצעות כלי הפיתוח ל-Chrome
אפשר להשתמש בכלים למפתחים ב-Chrome כדי לבדוק, לנפות באגים, לערוך ביקורות ולבדוק את האפליקציה, בדיוק כמו בדף אינטרנט רגיל.
אחרי שמבצעים שינויים בקוד וטוענים מחדש את האפליקציה (לחיצה ימנית > טעינה מחדש של האפליקציה), בודקים אם יש שגיאות במסוף כלי הפיתוח (לחיצה ימנית > Inspect Element).
(אנחנו נתייחס לאפשרות בדיקת דף הרקע בשלב 3 בקטע 'התראות').
למסוף ה-JavaScript של כלי הפיתוח יש גישה לאותם ממשקי API שזמינים לאפליקציה שלך. אפשר לבדוק בקלות קריאה ל-API לפני שמוסיפים אותה לקוד:
אפשר לקבל מידע נוסף
לקבלת מידע מפורט יותר על חלק מממשקי ה-API שהוצגו בשלב הזה, עיינו במקורות הבאים:
- הפורמט של קובץ המניפסט ↑
- מניפסט – סמלים ↑
- מחזור החיים של אפליקציית Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
מוכנים להמשיך לשלב הבא? עבור אל שלב 2 - ייבוא אפליקציית אינטרנט קיימת »