अपना पहला ऐप्लिकेशन बनाएं

इस ट्यूटोरियल में आपको अपना पहला Chrome ऐप्लिकेशन बनाने का तरीका बताया गया है. 'Chrome ऐप्लिकेशन' की बनावट, एक्सटेंशन की तरह ही होती है, ताकि मौजूदा डेवलपर मेनिफ़ेस्ट और पैकेजिंग के तरीकों को पहचान सकें. इसे पूरा करने के बाद, अपना ऐप्लिकेशन publish करने के लिए, आपको सिर्फ़ अपने कोड और ऐसेट की एक ZIP फ़ाइल बनानी होगी.

Chrome ऐप्लिकेशन में ये कॉम्पोनेंट होते हैं:

  • मेनिफ़ेस्ट से Chrome को यह पता चलता है कि आपका ऐप्लिकेशन क्या है, उसे लॉन्च कैसे करना है, और उसे किन अतिरिक्त अनुमतियों की ज़रूरत है.
  • बैकग्राउंड स्क्रिप्ट का इस्तेमाल इवेंट पेज बनाने के लिए किया जाता है. यह पेज, ऐप्लिकेशन की लाइफ़साइकल को मैनेज करने के लिए ज़िम्मेदार होता है.
  • Chrome ऐप्लिकेशन के पैकेज में सभी कोड शामिल होने ज़रूरी हैं. इसमें एचटीएमएल, JS, सीएसएस, और नेटिव क्लाइंट मॉड्यूल शामिल होते हैं.
  • पैकेज में सभी आइकॉन और अन्य एसेट भी शामिल होने चाहिए.

पहला चरण: मेनिफ़ेस्ट बनाना

सबसे पहले अपनी 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" }
}

दूसरा चरण: बैकग्राउंड स्क्रिप्ट बनाना

इसके बाद, यहां दिए गए कॉन्टेंट के साथ 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>

चौथा चरण: आइकॉन बनाना

इन आइकॉन को अपने ऐप्लिकेशन फ़ोल्डर में कॉपी करें:

पांचवां चरण: अपना ऐप्लिकेशन लॉन्च करें

फ़्लैग चालू करें

कई Chrome Apps API अब भी प्रयोगात्मक हैं, इसलिए आपको प्रयोग के तौर पर उपलब्ध API को सक्षम करना चाहिए, ताकि आप उन्हें आज़मा सकें:

  • chrome://flags पर जाएं.
  • "प्रयोग के तौर पर एक्सटेंशन एपीआई" ढूंढें और उसके "चालू करें" लिंक पर क्लिक करें.
  • Chrome को रीस्टार्ट करें.

अपना ऐप्लिकेशन लोड करें

अपना ऐप्लिकेशन लोड करने के लिए, Chrome सेटिंग आइकॉन पर क्लिक करके और टूल > एक्सटेंशन चुनकर ऐप्लिकेशन और एक्सटेंशन मैनेजमेंट पेज खोलें.

पक्का करें कि डेवलपर मोड चेकबॉक्स को चुना गया हो.

पैक नहीं किया गया एक्सटेंशन लोड करें बटन पर क्लिक करें. इसके बाद, अपने ऐप्लिकेशन के फ़ोल्डर पर जाएं और ठीक है पर क्लिक करें.

नया टैब खोलें और लॉन्च करें

अपना ऐप्लिकेशन लोड करने के बाद, नया टैब पेज खोलें और अपने नए ऐप्लिकेशन आइकॉन पर क्लिक करें.

इसके अलावा, कमांड लाइन से लोड और लॉन्च किया जा सकता है

Chrome में उपलब्ध इन कमांड लाइन के विकल्पों से, आपको ये काम करने में मदद मिल सकती है:

  • --load-and-launch-app=/path/to/app/, दिए गए पाथ से पैक नहीं किया गया ऐप्लिकेशन इंस्टॉल करता है और उसे लॉन्च करता है. अगर ऐप्लिकेशन पहले से चल रहा है, तो उसे अपडेट किए गए कॉन्टेंट के साथ फिर से लोड किया जाता है.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll, Chrome में पहले से लोड किए गए ऐप्लिकेशन को लॉन्च करता है. यह पहले से चल रहे किसी भी ऐप्लिकेशन को रीस्टार्ट नहीं करता है. हालांकि, यह नए ऐप्लिकेशन को अपडेट किए गए कॉन्टेंट के साथ लॉन्च करता है.