مرحله 1: برنامه Chrome را ایجاد و اجرا کنید

در این مرحله یاد خواهید گرفت:

  • بلوک‌های اصلی یک برنامه Chrome، از جمله فایل مانیفست و اسکریپت‌های پس‌زمینه.
  • نحوه نصب، اجرا و اشکال زدایی یک برنامه Chrome.

زمان تخمینی برای تکمیل این مرحله: 10 دقیقه.
برای پیش نمایش آنچه در این مرحله تکمیل می کنید، به پایین این صفحه بروید ↓ .

با Chrome Apps آشنا شوید

یک برنامه 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 }
});

اسکریپت‌های پس‌زمینه ممکن است شامل شنونده‌ها، پنجره‌ها، پیام‌های پست و داده‌های راه‌اندازی اضافی باشند—که همه این‌ها توسط صفحه رویداد برای مدیریت برنامه استفاده می‌شوند.

یک نمای HTML ایجاد کنید

یک صفحه وب ساده برای نمایش پیام "Hello World" روی صفحه ایجاد کنید و آن را به عنوان index.html ذخیره کنید:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

درست مانند هر صفحه وب دیگری، در این فایل HTML می‌توانید جاوا اسکریپت، CSS یا دارایی‌های بسته‌بندی‌شده اضافی را اضافه کنید.

یک نماد برنامه اضافه کنید

راست کلیک کرده و این تصویر 128x128 را به عنوان _icon 128.png در پوشه پروژه خود ذخیره کنید:

نماد برنامه Chrome برای این کد لبه

شما از این PNG به عنوان نماد برنامه ما استفاده خواهید کرد که کاربران در منوی راه اندازی مشاهده خواهند کرد.

تأیید کنید که همه فایل های خود را ایجاد کرده اید

اکنون باید این 4 فایل را در پوشه پروژه خود داشته باشید:

اسکرین شات پوشه فایل

یک برنامه Chrome را در حالت برنامه‌نویس نصب کنید

از حالت توسعه دهنده برای بارگیری و راه اندازی سریع برنامه خود بدون نیاز به نهایی کردن برنامه خود به عنوان بسته توزیع استفاده کنید.

  1. از Chrome omnibox به chrome://extensions دسترسی پیدا کنید.
  2. کادر بررسی Developer mode را علامت بزنید.

حالت توسعه دهنده را فعال کنید

  1. روی Load unpacked extension کلیک کنید.
  2. با استفاده از گفتگوی انتخابگر فایل، به پوشه پروژه برنامه خود بروید و آن را برای بارگیری برنامه خود انتخاب کنید.

برنامه های افزودنی بسته بندی نشده را بارگیری کنید

برنامه Hello World تمام شده خود را راه اندازی کنید

پس از بارگیری پروژه خود به عنوان یک برنامه افزودنی بدون بسته بندی، روی Launch در کنار برنامه نصب شده خود کلیک کنید. یک پنجره مستقل جدید باید باز شود:

برنامه Hello World تمام شده بعد از مرحله 1

تبریک می‌گوییم، شما به تازگی یک برنامه Chrome جدید ایجاد کرده‌اید!

اشکال زدایی یک برنامه کروم با ابزارهای توسعه دهنده کروم

می‌توانید از ابزارهای برنامه‌نویس Chrome برای بازرسی، اشکال‌زدایی، ممیزی و آزمایش برنامه‌تان استفاده کنید، درست مانند یک صفحه وب معمولی.

پس از ایجاد تغییرات در کد و بارگیری مجدد برنامه ( راست کلیک > Reload App )، کنسول DevTools را برای وجود هرگونه خطا بررسی کنید ( راست کلیک کنید > Inspect Element ).

کادر محاوره ای عنصر را بازرسی کنید

(ما گزینه Inspect Background Page را در مرحله 3 با آلارم پوشش خواهیم داد.)

کنسول جاوا اسکریپت DevTools به همان APIهای موجود در برنامه شما دسترسی دارد. می توانید به راحتی یک تماس API را قبل از افزودن آن به کد خود آزمایش کنید:

گزارش کنسول DevTools

برای اطلاعات بیشتر

برای اطلاعات دقیق تر در مورد برخی از API های معرفی شده در این مرحله، به آدرس زیر مراجعه کنید:

برای ادامه به مرحله بعدی آماده هستید؟ به مرحله 2 بروید - یک برنامه وب موجود را وارد کنید »