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

इस चरण में आपको पता चलेगा कि:

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

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

Chrome Apps के बारे में जानें

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>

किसी दूसरे वेब पेज की तरह, इस एचटीएमएल फ़ाइल में, पैकेज की गई अतिरिक्त 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 - मौजूदा वेब ऐप्लिकेशन इंपोर्ट करें » पर जाएं