पहला चरण: Chrome ऐप्लिकेशन बनाना और चलाना

इस चरण में आपको यह जानकारी मिलेगी:

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

यह चरण पूरा करने में लगने वाला अनुमानित समय: 10 मिनट.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इस चरण में जो कुछ भी पूरा किया जाएगा उसकी झलक देखने के लिए, इस पेज पर सबसे नीचे जाएं ↓.

Chrome ऐप्स से परिचित हों

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

  • मेनिफ़ेस्ट में आपके ऐप्लिकेशन की मेटा जानकारी होती है. मेनिफ़ेस्ट Chrome को आपके ऐप्लिकेशन, उसे कैसे लॉन्च करें, और इसके लिए ज़रूरी सभी अतिरिक्त अनुमतियां शामिल हैं.
  • इवेंट पेज को बैकग्राउंड स्क्रिप्ट भी कहा जाता है. यह ऐप्लिकेशन की लाइफ़ मैनेज करने के लिए ज़िम्मेदार होता है साइकल. बैकग्राउंड स्क्रिप्ट वह जगह है जहां आप खास ऐप्लिकेशन इवेंट के लिए लिसनर रजिस्टर करते हैं, जैसे कि ऐप्लिकेशन की विंडो लॉन्च और बंद करना.
  • सभी कोड फ़ाइलें Chrome ऐप्लिकेशन में पैकेज होनी चाहिए. इसमें एचटीएमएल, सीएसएस, 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(), बेसिक एचटीएमएल पेज (index.html) का सोर्स के तौर पर इस्तेमाल करना. अगले चरण में आपको एचटीएमएल व्यू बनाना होगा.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

पृष्ठभूमि स्क्रिप्ट में अतिरिक्त श्रोता, विंडो, पोस्ट संदेश, और लॉन्च डेटा—ये सभी शामिल हो सकते हैं जिनका इस्तेमाल इवेंट पेज, ऐप्लिकेशन को मैनेज करने के लिए करता है.

एचटीएमएल व्यू बनाना

"नमस्ते वर्ल्ड" दिखाने के लिए, एक सामान्य वेब पेज बनाएं और उसे इस रूप में सेव करें index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

किसी भी अन्य वेब पेज की तरह, इस HTML फ़ाइल में आप अतिरिक्त पैकेज्ड JavaScript, सीएसएस या ऐसेट.

ऐप्लिकेशन आइकॉन जोड़ें

इस 128x128 इमेज पर राइट क्लिक करें और इसे अपने प्रोजेक्ट फ़ोल्डर में _icon128.png के तौर पर सेव करें:

इस कोडलैब के लिए Chrome ऐप्लिकेशन का आइकॉन

आप इस PNG का उपयोग हमारे ऐप्लिकेशन के आइकन के रूप में करेंगे जिसे उपयोगकर्ता लॉन्च मेनू में देखेंगे.

पुष्टि करें कि आपने अपनी सभी फ़ाइलें बना ली हैं

अब आपके प्रोजेक्ट फ़ोल्डर में ये चार फ़ाइलें होनी चाहिए:

फ़ाइल फ़ोल्डर का स्क्रीनशॉट

Chrome ऐप्लिकेशन को डेवलपर मोड में इंस्टॉल करना

डेवलपर मोड का इस्तेमाल करके, अपने ऐप्लिकेशन को तुरंत लोड और लॉन्च करें. ऐसा करने के लिए, आपको अपने ऐप्लिकेशन को वितरण पैकेज शामिल है.

  1. Chrome की खोज वाली पट्टी से chrome://extensions ऐक्सेस करें.
  2. डेवलपर मोड चेक बॉक्स चुनें.

डेवलपर मोड चालू करें

  1. पैक किए गए एक्सटेंशन लोड करें पर क्लिक करें.
  2. फ़ाइल पिकर डायलॉग बॉक्स का इस्तेमाल करके, अपने ऐप्लिकेशन के प्रोजेक्ट फ़ोल्डर पर जाएं. इसके बाद, फ़ाइल पिकर को लोड करने के लिए है.

पैक नहीं किए गए एक्सटेंशन लोड करें

अपना पूरा हो चुका हैलो वर्ल्ड ऐप्लिकेशन लॉन्च करें

अपने प्रोजेक्ट को पैक नहीं किए गए एक्सटेंशन के तौर पर लोड करने के बाद, इंस्टॉल किए गए ऐप्लिकेशन के बगल में मौजूद, लॉन्च करें पर क्लिक करें. ऐप्लिकेशन नई स्टैंडअलोन विंडो खुलेगी:

पहले चरण के बाद तैयार किया गया Hello World ऐप्लिकेशन

बधाई, आपने अभी-अभी नया Chrome ऐप्लिकेशन बनाया है!

Chrome DevTools की मदद से Chrome ऐप्लिकेशन को डीबग करना

अपने ऐप्लिकेशन की जांच करने, उसे डीबग करने, ऑडिट करने, और टेस्ट करने के लिए, Chrome डेवलपर टूल का इस्तेमाल किया जा सकता है करते हैं.

अपने कोड में बदलाव करने और अपना ऐप्लिकेशन फिर से लोड करने के बाद (राइट-क्लिक करें > ऐप्लिकेशन फिर से लोड करें), किसी भी तरह की गड़बड़ी के लिए DevTools कंसोल (राइट क्लिक करें > एलिमेंट की जांच करें).

एलिमेंट की जांच करें डायलॉग बॉक्स

(हम तीसरे चरण में, अलार्म के साथ बैकग्राउंड पेज की जांच करें विकल्प के बारे में बताएंगे.)

DevTools JavaScript कंसोल के पास उन एपीआई का ऐक्सेस है जो आपके ऐप्लिकेशन के लिए उपलब्ध हैं. आप आसानी से अपने कोड में जोड़ने से पहले एक एपीआई कॉल की जांच करें:

DevTools कंसोल लॉग

अधिक जानकारी के लिए

इस चरण में शुरू किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें:

क्या आप अगले चरण पर जाने के लिए तैयार हैं? चरण 2 - मौजूदा वेब ऐप्लिकेशन इंपोर्ट करें » पर जाएं