إنشاء تطبيقك الأول

يرشدك هذا البرنامج التعليمي خلال عملية إنشاء أول تطبيق لـ Chrome. وقد تم تصميم تطبيقات Chrome بالطريقة نفسها التي عند الانتهاء، ستحتاج فقط إلى إنشاء ملف ZIP يضم الرمز ومواد العرض حتى تتمكن من publish تطبيقك.

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

  • يُطلع البيان Chrome على تطبيقك، وما هو، وكيفية تشغيله، والأذونات الإضافية التي يتطلبها.
  • يتم استخدام النص البرمجي للخلفية لإنشاء صفحة الحدث المسؤولة عن إدارة دورة حياة التطبيق.
  • يجب تضمين كل الرموز في حزمة تطبيق Chrome. ويشمل ذلك وحدات HTML وJS وCSS وNative Client.
  • ويجب تضمين جميع الرموز ومواد العرض الأخرى في الحزمة أيضًا.

الخطوة 1: إنشاء البيان

يجب أولاً إنشاء ملف manifest.json (تصف التنسيقات: ملفات البيان هذا البيان بالتفاصيل):

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

الخطوة 2: إنشاء نص برمجي للخلفية

بعد ذلك، أنشئ ملفًا جديدًا يسمى background.js بالمحتوى التالي:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

في نموذج الرمز البرمجي أعلاه، سيتم تنشيط onLaunched event (حدث onLaunched) عندما يشغِّل المستخدِم التطبيق. وبعد ذلك، يفتح على الفور نافذة للتطبيق ذات العرض والارتفاع المحدَّدين. قد يحتوي النص البرمجي في الخلفية على أدوات معالجة إضافية ونوافذ ورسائل مشاركة وبيانات الإطلاق، وجميعها تستخدمها صفحة الحدث لإدارة التطبيق.

الخطوة 3: إنشاء صفحة نافذة

إنشاء ملف window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

الخطوة 4: إنشاء الرموز

انسخ هذه الرموز إلى مجلد التطبيق:

الخطوة 5: إطلاق تطبيقك

تفعيل العلامات

لا تزال العديد من واجهات برمجة التطبيقات لتطبيقات Chrome في مرحلة تجريبية، لذا يجب تفعيل واجهات برمجة التطبيقات التجريبية حتى تتمكّن من تجربتها:

  • انتقِل إلى chrome://flags.
  • ابحث عن "واجهات برمجة التطبيقات للإضافات التجريبية"، ثم انقر على الرابط "تفعيل".
  • أعِد تشغيل متصفِّح Chrome.

تحميل تطبيقك

لتحميل تطبيقك، افتح صفحة إدارة التطبيقات والإضافات من خلال النقر على رمز إعدادات Chrome واختيار الأدوات > الإضافات.

تأكد من أنه تم وضع علامة في مربّع الاختيار وضع مطوّر البرامج.

انقر على الزر تحميل إضافة غير مضغوطة، وانتقل إلى مجلد التطبيق وانقر على OK (حسنًا).

فتح علامة تبويب جديدة وبدء التشغيل

بعد تحميل التطبيق، افتح صفحة "علامة تبويب جديدة" وانقر على رمز التطبيق الجديد.

أو يمكنك تحميل وتشغيل من سطر الأوامر

قد تساعدك خيارات سطر الأوامر هذه في Chrome في تكرار ما يلي:

  • تثبّت --load-and-launch-app=/path/to/app/ التطبيق الذي تم فك ضغطه من المسار المحدّد وتشغِّله. وإذا كان التطبيق قيد التشغيل، فستتم إعادة تحميله بالمحتوى الذي تم تحديثه.
  • يُطلق --app-id=ajjhbohkjpincjgiieeomimlgnll تطبيقًا تم تحميله من قبل إلى Chrome. فهو لا يعيد تشغيل أي تطبيق كان قيد التشغيل سابقًا، لكنه يُطلق التطبيق الجديد مع أي محتوى تم تحديثه.