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

एक्सटेंशन, एचटीएमएल, सीएसएस, JavaScript, इमेज, और वेब प्लैटफ़ॉर्म में इस्तेमाल की जाने वाली अन्य फ़ाइलों के ज़िप किए गए बंडल होते हैं. ये 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() को भी कॉल कर सकते हैं.

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

ब्राउज़र की विंडो में, पेज पर की जाने वाली कार्रवाई दिखाई गई है. इसमें एक पॉप-अप दिख रहा है

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

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

ब्राउज़र की विंडो में, पेज ऐक्शन और कॉन्टेंट स्क्रिप्ट दिख रही है

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

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

यह तरीका, यूआरएल को string के तौर पर सिंक्रोनस तरीके से दिखाता है. साथ ही, यह कोई अन्य एसिंक्रोनस काम नहीं करता.

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

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

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

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

डेटा सेव करना और गुप्त मोड

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

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

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

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

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

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