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

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

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

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

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

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

الخطوة 4: إنشاء الأيقونات

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

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

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

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

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

تحميل تطبيقك

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

تأكَّد من تحديد مربّع الاختيار وضع مطوّر البرامج.

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

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

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

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

يمكن أن تساعدك خيارات سطر الأوامر هذه إلى Chrome في التكرار التحسيني لما يلي:

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