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

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

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

एक्सटेंशन को Chrome ब्राउज़र को सबसे ज़्यादा पसंद के मुताबिक बनाया जाने वाला ब्राउज़र बनाने का ज़रिया मानें.

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

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

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 एक्सटेंशन, ब्राउज़र की कार्रवाई का इस्तेमाल करता है:

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

फ़ाइलों के बारे में जानकारी देना

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

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

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

chrome-extension://EXTENSION_ID/PATH_TO_FILE

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

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

आर्किटेक्चर

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

• मेनिफ़ेस्ट
• बैकग्राउंड स्क्रिप्ट
• यूज़र इंटरफ़ेस (यूआई) के एलिमेंट
• कॉन्टेंट स्क्रिप्ट
• विकल्पों का पेज

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

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

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

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

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

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

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

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

कॉन्टेंट स्क्रिप्ट, मैसेज को शेयर करके, अपने पैरंट एक्सटेंशन के साथ इंटरैक्ट कर सकती हैं और storage एपीआई का इस्तेमाल करके वैल्यू सेव करने की सुविधा मिलती है.

विकल्प पेज

जिस तरह एक्सटेंशन उपयोगकर्ताओं को 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 के रेफ़रंस दस्तावेज़ देखें और इन्हें देखें वीडियो.

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

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

डेटा सेव किया जा रहा है और गुप्त मोड का इस्तेमाल किया जा रहा है

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

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

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

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

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

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

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