שלב 1: יצירה והפעלה של אפליקציית Chrome

בשלב זה נלמד:

  • אבני הבניין הבסיסיות של אפליקציית 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:

סמל של אפליקציית Chrome ל-Codelab הזה

קובץ PNG זה ישמש אותך כסמל האפליקציה שיוצג למשתמשים בתפריט ההפעלה.

אישור שיצרת את כל הקבצים

ארבעת הקבצים הבאים אמורים להיות לכם עכשיו בתיקיית הפרויקט:

צילום מסך של תיקיית הקבצים

התקנת אפליקציית Chrome במצב פיתוח

אפשר להשתמש במצב פיתוח כדי לטעון ולהפעיל במהירות את האפליקציה, בלי להגדיר אותה כחבילת הפצה.

  1. ניגשים אל chrome://extensions מסרגל הכתובות ב-Chrome.
  2. מסמנים את התיבה מצב פיתוח.

הפעלה של מצב פיתוח

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

טעינת תוספים שאינם ארוזים

הפעלת האפליקציה Hello World הסתיימה

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

אפליקציית Hello World הסתיימה אחרי שלב 1

מזל טוב, יצרת עכשיו יישום Chrome חדש!

ניפוי באגים באפליקציית Chrome באמצעות כלי הפיתוח ל-Chrome

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

אחרי שמבצעים שינויים בקוד וטוענים מחדש את האפליקציה (לחיצה ימנית > טעינה מחדש של האפליקציה), בודקים אם יש שגיאות במסוף כלי הפיתוח (לחיצה ימנית > Inspect Element).

תיבת הדו-שיח &#39;בדיקת הרכיב&#39;

(אנחנו נתייחס לאפשרות בדיקת דף הרקע בשלב 3 בקטע 'התראות').

למסוף ה-JavaScript של כלי הפיתוח יש גישה לאותם ממשקי API שזמינים לאפליקציה שלך. אפשר לבדוק בקלות קריאה ל-API לפני שמוסיפים אותה לקוד:

יומן המסוף של כלי הפיתוח

אפשר לקבל מידע נוסף

לקבלת מידע מפורט יותר על חלק מממשקי ה-API שהוצגו בשלב הזה, עיינו במקורות הבאים:

מוכנים להמשיך לשלב הבא? עבור אל שלב 2 - ייבוא אפליקציית אינטרנט קיימת »