الخطوة 1: إنشاء تطبيق Chrome وتشغيله

في هذه الخطوة، ستتعرف على:

  • الوحدات الأساسية لتطبيق Chrome، بما في ذلك ملف البيان والنصوص البرمجية للخلفية
  • كيفية تثبيت تطبيق Chrome وتشغيله وتصحيح الأخطاء فيه

الوقت المقدّر لإكمال هذه الخطوة: 10 دقائق.
لمعاينة ما ستُكمله في هذه الخطوة، انتقِل إلى أسفل هذه الصفحة ↓.

التعرّف على تطبيقات Chrome

يحتوي تطبيق Chrome على هذه المكوّنات:

  • يحدِّد البيان المعلومات الوصفية لتطبيقك. ويخبر البيان Chrome عن تطبيقك وكيفية تشغيله وأي أذونات إضافية مطلوبة.
  • صفحة الحدث، التي يُطلق عليها أيضًا النص البرمجي في الخلفية، هي المسؤولة عن إدارة عمر التطبيق الدورة. النص البرمجي للخلفية هو المكان الذي تسجِّل فيه المستمعين لأحداث تطبيق معينة مثل تشغيل وإغلاق نافذة التطبيق.
  • يجب حزم كل ملفات التعليمات البرمجية في تطبيق Chrome. يشمل ذلك HTML وCSS وJS والإعلانات المدمجة مع المحتوى وحدات العميل.
  • يجب أيضًا تجميع مواد العرض، بما في ذلك رموز التطبيقات، في تطبيق 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 الخاص بهذا الدرس التطبيقي حول الترميز

ستستخدم ملف PNG هذا كرمز للتطبيق الذي سيظهر للمستخدمين في قائمة التشغيل.

تأكَّد من أنّك أنشأت جميع ملفاتك.

يُفترض أن يكون لديك هذه الملفات الأربعة في مجلد المشروع الآن:

لقطة شاشة لمجلد الملفات

تثبيت أحد تطبيقات Chrome في وضع مطور البرامج

استخدِم وضع مطوّر البرامج لتحميل تطبيقك وإطلاقه بسرعة بدون الحاجة إلى إنهاء تطبيقك حزمة التوزيع.

  1. يمكنك الوصول إلى chrome://extensions من المربّع المتعدد الاستخدامات في Chrome.
  2. أزِل العلامة من مربّع الاختيار وضع مطوّر البرامج.

تفعيل وضع مطوّر البرامج

  1. انقر على تحميل إضافة غير مضغوطة.
  2. باستخدام مربّع حوار "أداة اختيار الملفات"، انتقِل إلى مجلد مشروع التطبيق واختَره لتحميل ملف التطبيق.

تحميل الإضافات غير المضغوطة

تشغيل تطبيق Hello World المكتمل

بعد تحميل مشروعك كإضافة غير مضغوطة في حزمة، انقر على Launch (إطلاق) بجانب تطبيقك المثبَّت. حاسمة يتم فتح نافذة مستقلة جديدة:

تطبيق Hello World المكتمل بعد الخطوة 1

لقد انتهيت الآن من إنشاء تطبيق Chrome جديد.

تصحيح الأخطاء في تطبيق Chrome باستخدام "أدوات مطوري البرامج في Chrome"

يمكنك استخدام أدوات مطوّري برامج Chrome لفحص تطبيقك وتصحيح أخطائه وتدقيقه واختباره، تمامًا كما على صفحة الويب العادية.

بعد إجراء تغييرات على الرمز وإعادة تحميل تطبيقك (النقر بزر الماوس الأيمن > إعادة تحميل التطبيق)، تحقَّق من وحدة التحكّم في أدوات مطوّري البرامج بحثًا عن أي أخطاء (النقر بزر الماوس الأيمن > فحص العنصر)

مربع حوار فحص العنصر

(سنغطي خيار فحص صفحة الخلفية في الخطوة 3 مع المنبّهات).

يمكن لوحدة تحكُّم JavaScript في "أدوات مطوري البرامج" الوصول إلى واجهات برمجة التطبيقات نفسها المتاحة في تطبيقك. يمكنك بسهولة اختبار طلب بيانات من واجهة برمجة التطبيقات قبل إضافتها إلى الرمز:

سجلّ وحدة تحكّم &quot;أدوات مطوّري البرامج&quot;

لمزيد من المعلومات

لمزيد من المعلومات التفصيلية حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، راجع:

هل أنت مستعد للانتقال إلى الخطوة التالية؟ الانتقال إلى الخطوة 2 - استيراد تطبيق ويب حالي »