الخطوة 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 }
});

قد تحتوي النصوص البرمجية في الخلفية على أدوات معالجة إضافية ونوافذ ورسائل نشر وبيانات إطلاق، وكلها تستخدمها صفحة الحدث لإدارة التطبيق.

إنشاء عرض 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 لفحص تطبيقك وتصحيح أخطائه وتدقيقه واختباره تمامًا مثلما تفعل على صفحة ويب عادية.

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

مربع الحوار &quot;فحص العنصر&quot;

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

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

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

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

للحصول على معلومات أكثر تفصيلاً حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، يُرجى الرجوع إلى:

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