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

בשלב הזה תלמדו:

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

זמן משוער להשלמת השלב הזה: 10 דקות.
כדי לראות תצוגה מקדימה של מה שתשלימו בשלב הזה, דלגו לתחתית הדף הזה ↓.

היכרות עם אפליקציות Chrome

אפליקציית Chrome מכילה את הרכיבים הבאים:

  • המניפסט מציין את המטא-פרטים של האפליקציה. המניפסט מספק ל-Chrome מידע על איך להפעיל אותה, ואם יש צורך בהרשאות נוספות.
  • דף האירוע, שנקרא גם סקריפט רקע, אחראי לניהול חיי האפליקציה במחזוריות. סקריפט הרקע הוא המקום שבו רושמים מאזינים לאירועים ספציפיים באפליקציה, כמו הפעלה וסגירה של חלון האפליקציה.
  • כל קובצי הקוד חייבים להיות ארוזים באפליקציית Chrome. זה כולל HTML, CSS, JS ו-Native מודולים של לקוח.
  • נכסים, כולל סמלי אפליקציות, צריכים להיות ארוזים גם באפליקציית 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 }
});

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

יצירה של תצוגת 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 הזה ישמש כסמל האפליקציה שלנו שהמשתמשים יראו בתפריט ההפעלה.

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

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

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

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

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

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

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

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

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

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

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

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

מזל טוב, יצרת אפליקציית Chrome חדשה!

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

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

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

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

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

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

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

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

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

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