आर्किटेक्चर की खास जानकारी

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

एक्सटेंशन में कई तरह की सुविधाएं होती हैं. वे वेब कॉन्टेंट में बदलाव कर सकते हैं, जिसे उपयोगकर्ता देखते हैं और उस पर इंटरैक्ट कर सकते हैं. इसके अलावा, ये ब्राउज़र के काम करने के तरीके में बदलाव भी कर सकते हैं.

Chrome ब्राउज़र को आपके हिसाब से बनाया गया ब्राउज़र बनाने के लिए, एक्सटेंशन का इस्तेमाल करें.

एक्सटेंशन फ़ाइलें

एक्सटेंशन, अलग-अलग तरह की फ़ाइलों और डायरेक्ट्री की संख्या के हिसाब से अलग-अलग होते हैं. हालांकि, उन सभी में एक [मेनिफ़ेस्ट][docs-manifest] होना ज़रूरी है. कुछ बुनियादी, लेकिन उपयोगी एक्सटेंशन में सिर्फ़ मेनिफ़ेस्ट और उसका टूलबार आइकॉन शामिल हो सकता है.

manifest.json टाइटल वाली मेनिफ़ेस्ट फ़ाइल, ब्राउज़र को एक्सटेंशन के बारे में जानकारी देती है, जैसे कि सबसे ज़रूरी फ़ाइलें और एक्सटेंशन की इस्तेमाल की जा सकने वाली क्षमताएं.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

एक्सटेंशन में एक ऐसा आइकॉन होना चाहिए जो ब्राउज़र के टूलबार में मौजूद हो. टूलबार आइकॉन की मदद से, इन्हें आसानी से ऐक्सेस किया जा सकता है और उपयोगकर्ताओं को पता चलता है कि कौनसे एक्सटेंशन इंस्टॉल किए गए हैं. ज़्यादातर उपयोगकर्ता, इस आइकॉन पर क्लिक करके पॉप-अप का इस्तेमाल करने वाले एक्सटेंशन से इंटरैक्ट करेंगे.

यह Google Mail Checker एक्सटेंशन, ब्राउज़र ऐक्शन का इस्तेमाल करता है:

Google Mail Checker एक्सटेंशन का स्क्रीनशॉट

यह Mappy एक्सटेंशन, पेज पर कार्रवाई और कॉन्टेंट स्क्रिप्ट का इस्तेमाल करता है:

Mappy एक्सटेंशन का स्क्रीनशॉट

फ़ाइलों के बारे में बताया गया है

किसी सामान्य एचटीएमएल पेज की फ़ाइलों की तरह ही मिलते-जुलते यूआरएल का इस्तेमाल करके एक्सटेंशन की फ़ाइलों का रेफ़रंस दिया जा सकता है.

<img src="images/my_image.png">

इसके अलावा, हर फ़ाइल को एक पूरे यूआरएल का इस्तेमाल करके भी ऐक्सेस किया जा सकता है.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

संपूर्ण यूआरएल में, EXTENSION_ID एक यूनीक आइडेंटिफ़ायर होता है, जिसे एक्सटेंशन सिस्टम हर एक्सटेंशन के लिए जनरेट करता है. लोड किए गए सभी एक्सटेंशन के आईडी, chrome://extensions पर जाकर देखे जा सकते हैं. PATH_TO_FILE, एक्सटेंशन के सबसे ऊपर दिए गए फ़ोल्डर में फ़ाइल की जगह है; यह मिलते-जुलते यूआरएल से मेल खाता है.

पैक नहीं किए गए एक्सटेंशन पर काम करने के दौरान, एक्सटेंशन आईडी बदल सकता है. खास तौर पर, अगर एक्सटेंशन को किसी दूसरी डायरेक्ट्री से लोड किया गया हो, तो पैक नहीं किए गए एक्सटेंशन का आईडी बदल जाएगा. एक्सटेंशन को पैकेज करने पर आईडी फिर से बदल जाएगा. अगर एक्सटेंशन का कोड किसी ऐब्सलूट यूआरएल पर निर्भर करता है, तो वह chrome.runtime.getURL() तरीके का इस्तेमाल करके, डेवलपमेंट के दौरान आईडी को हार्डकोड करने से बच सकता है.

आर्किटेक्चर

किसी एक्सटेंशन का आर्किटेक्चर उसके फ़ंक्शन पर निर्भर करेगा, लेकिन कई मज़बूत एक्सटेंशन में कई कॉम्पोनेंट शामिल होंगे:

बैकग्राउंड स्क्रिप्ट

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

यूज़र इंटरफ़ेस (यूआई) एलिमेंट

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

पॉप-अप जैसे एक्सटेंशन यूज़र इंटरफ़ेस (यूआई) पेजों में JavaScript लॉजिक वाले सामान्य एचटीएमएल पेज हो सकते हैं. एक्सटेंशन में मौजूद अतिरिक्त एचटीएमएल फ़ाइलें दिखाने के लिए एक्सटेंशन, tabs.create या window.open() को भी कॉल कर सकते हैं.

पेज के लिए खास कार्रवाई और पॉप-अप का इस्तेमाल करने वाला एक्सटेंशन, डिक्लेरेटिव कॉन्टेंट एपीआई का इस्तेमाल कर सकता है. इसकी मदद से, उपयोगकर्ताओं के लिए पॉप-अप उपलब्ध होने पर, बैकग्राउंड स्क्रिप्ट में नियम सेट किए जा सकते हैं. शर्तें पूरी होने पर, बैकग्राउंड स्क्रिप्ट पॉप-अप से संपर्क करती है, ताकि उपयोगकर्ता इसके आइकॉन पर क्लिक कर सकें.

ब्राउज़र विंडो में पेज ऐक्शन दिखाया गया है, जो पॉप-अप दिखा रहा है

कॉन्टेंट स्क्रिप्ट

वेब पेजों पर पढ़ने या लिखने वाले एक्सटेंशन, कॉन्टेंट स्क्रिप्ट का इस्तेमाल करते हैं. कॉन्टेंट स्क्रिप्ट में ऐसा JavaScript शामिल होता है जो ब्राउज़र में लोड किए गए पेज के संदर्भ में काम करता है. कॉन्टेंट स्क्रिप्ट, उन वेब पेजों के DOM को पढ़ती और उनमें बदलाव करती हैं जिन पर ब्राउज़र जाता है.

पेज कार्रवाई और कॉन्टेंट स्क्रिप्ट वाली ब्राउज़र विंडो

कॉन्टेंट स्क्रिप्ट, मैसेज का लेन-देन करके और storage API का इस्तेमाल करके वैल्यू को स्टोर करके, अपने पैरंट एक्सटेंशन से इंटरैक्ट कर सकती हैं.

कॉन्टेंट स्क्रिप्ट और पैरंट एक्सटेंशन के बीच कम्यूनिकेशन का पाथ दिखाता है

विकल्प पेज

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

Chrome API का इस्तेमाल करना

वेब पेजों वाले एपीआई का ऐक्सेस होने के साथ-साथ, एक्सटेंशन एक्सटेंशन के लिए खास तौर पर बने एपीआई का भी इस्तेमाल कर सकते हैं, जो ब्राउज़र के साथ बेहतर इंटिग्रेशन बनाते हैं. एक्सटेंशन और वेबपेज दोनों, यूआरएल खोलने के लिए स्टैंडर्ड window.open() तरीके को ऐक्सेस कर सकते हैं. हालांकि, एक्सटेंशन यह तय कर सकते हैं कि उस यूआरएल को किस विंडो में दिखाया जाए. इसके लिए, Chrome API tabs.create तरीका इस्तेमाल करें.

एसिंक्रोनस बनाम सिंक्रोनस विधियां

Chrome API के ज़्यादातर तरीके एसिंक्रोनस होते हैं: वे कार्रवाई पूरी होने का इंतज़ार किए बिना तुरंत वापस लौट जाते हैं. अगर किसी एक्सटेंशन को एसिंक्रोनस ऑपरेशन का नतीजा जानना ज़रूरी हो, तो वह तरीके में एक कॉलबैक फ़ंक्शन पास कर सकता है. कॉलबैक को बाद में एक्ज़ीक्यूट किया जाता है, शायद बहुत बाद में, तरीका वापस आने के बाद.

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

अगर tabs.query तरीका सिंक्रोनस था, तो यह कुछ इस तरह की दिख सकती है.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

यह तरीका काम नहीं करेगा, क्योंकि query() एसिंक्रोनस है. यह काम पूरा होने का इंतज़ार किए बिना वापस आ जाता है और कोई वैल्यू नहीं देता. कॉलबैक पैरामीटर के सिग्नेचर में उपलब्ध होने पर, तरीका एसिंक्रोनस होता है.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

किसी टैब के बारे में सही क्वेरी करने और उसके यूआरएल को अपडेट करने के लिए, एक्सटेंशन को कॉलबैक पैरामीटर का इस्तेमाल करना होगा.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

ऊपर दिए गए कोड में, लाइनें नीचे दिए गए क्रम में लागू की जाती हैं: 1, 4, 2. query() के लिए तय किए गए कॉलबैक फ़ंक्शन को कॉल किया जाता है और उसके बाद लाइन 2 को एक्ज़ीक्यूट किया जाता है. हालांकि, ऐसा सिर्फ़ तब होता है, जब चुने गए मौजूदा टैब के बारे में जानकारी उपलब्ध होती है. ऐसा query() के प्रॉडक्ट लौटाने के बाद होता है. update(), एसिंक्रोनस है. हालांकि, कोड में कॉलबैक पैरामीटर का इस्तेमाल नहीं किया जाता. इसकी वजह यह है कि एक्सटेंशन, अपडेट के नतीजों के साथ कुछ भी नहीं करता है.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

यह तरीका सिंक करने की सुविधा से, यूआरएल को string के रूप में दिखाता है. इसके बाद, यह एसिंक्रोनस काम नहीं करती.

ज़्यादा जानकारी

ज़्यादा जानकारी के लिए, Chrome API के रेफ़रंस दस्तावेज़ देखें और यह वीडियो देखें.

पेजों के बीच कम्यूनिकेशन

एक एक्सटेंशन में अलग-अलग कॉम्पोनेंट को अक्सर एक-दूसरे के साथ कम्यूनिकेट करने की ज़रूरत होती है. अलग-अलग एचटीएमएल पेज getViews() और getBackgroundPage() जैसे chrome.extension तरीकों का इस्तेमाल करके एक-दूसरे को ढूंढ सकते हैं. जब किसी पेज पर अन्य एक्सटेंशन पेजों का रेफ़रंस होता है, तो सबसे पहले वाला पेज दूसरे पेजों पर फ़ंक्शन शुरू कर सकता है और अपने डीओएम में हेर-फेर कर सकता है. इसके अलावा, एक्सटेंशन के सभी कॉम्पोनेंट, storage API का इस्तेमाल करके स्टोर की गई वैल्यू को ऐक्सेस कर सकते हैं और मैसेज पास करने की मदद से कम्यूनिकेट कर सकते हैं.

डेटा बचाना और गुप्त मोड

एक्सटेंशन, storage API और HTML5 वेब स्टोरेज एपीआई का इस्तेमाल करके या सर्वर से अनुरोध भेजकर डेटा सेव कर सकते हैं. जब एक्सटेंशन को कुछ सेव करने की ज़रूरत हो, तो पहले देख लें कि क्या यह गुप्त विंडो से है. डिफ़ॉल्ट रूप से, एक्सटेंशन गुप्त विंडो में नहीं चलते.

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

कोई विंडो गुप्त मोड में है या नहीं, यह पता लगाने के लिए tabs.Tab या windows.Window ऑब्जेक्ट की incognito प्रॉपर्टी देखें.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

अगले चरण पर जाएं

खास जानकारी को पढ़ने और शुरुआत करना ट्यूटोरियल को पूरा करने के बाद, डेवलपर को अपने एक्सटेंशन लिखने के लिए तैयार हो जाना चाहिए! नीचे दिए गए संसाधनों की मदद से कस्टम Chrome की दुनिया के बारे में बेहतर तरीके से जानें.