प्रविष्टि

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

परिणाम क्या होना चाहिए:

अपने कांगो पर्यावरण की तैयारी

कंगो के साथ शुरुआत करने के लिए, आपको कुछ चरणों का पालन करना होगा:

1. पायथन संस्करण 2.7 स्थापित करें ( http://www.python.org/download/ )
2. लिंक से डाउनलोड करें और किसी भी फ़ोल्डर में ढांचे के साथ संग्रह को अनज़िप करें।

एक नया प्रोजेक्ट बनाएं

डिस्क पर प्रोजेक्ट के लिए एक फ़ोल्डर बनाएँ और फ्रेमवर्क फ़ोल्डर से kango.py चलाएँ

d:\dev\kango\kango.py create 

प्रोजेक्ट नाम के अनुरोध पर, Gmail चेकर दर्ज करें।
अब आप अपने एक्सटेंशन का कोड लिखने के लिए आगे बढ़ सकते हैं।
भविष्य में, एक्सटेंशन का नाम और संस्करण फ़ाइल आम \ extension_info.json का उपयोग करके इंस्टॉल किया जा सकता है।

जीमेल चेकर लिखना

एक्सटेंशन समय-समय पर जीमेल पर अपठित संदेशों की संख्या की जाँच करेगा और ब्राउज़र में एक बटन पर इस नंबर को प्रदर्शित करेगा।

प्रोजेक्ट बनाने के बाद, src \ common फ़ोल्डर में जाएँ और देखें कि main.js फ़ाइल में स्रोत टेम्प्लेट हमारे लिए पहले ही बन चुका है।

विस्तार प्रारंभिक

हम यूआई मॉड्यूल की तत्परता घटना के लिए सदस्यता लेते हैं। आपको इसका उपयोग करने की आवश्यकता है क्योंकि हमारे एक्सटेंशन में दृश्य घटक होते हैं, अर्थात् ब्राउज़र में एक बटन।

 kango.ui.addEventListener(kango.ui.event.Ready, function() { return new MyExtension(); }); 

बिना पढ़े ईमेलों की संख्या प्राप्त करें

अपठित संदेशों की संख्या एटम 0.3 प्रारूप में https://mail.google.com/mail/feed/atom पर प्राप्त की जा सकती है (सही संचालन के लिए, उपयोगकर्ता को वर्तमान ब्राउज़र में जीमेल में लॉग इन करना होगा)।

AJAX अनुरोधों के लिए, kango.xhr.send विधि का उपयोग किया जाता है ।

 var details = { url: 'https://mail.google.com/mail/feed/atom', method: 'GET', async: true, contentType: 'xml' }; kango.xhr.send(details, function(data) { if(data.status == 200) { var doc = data.response; var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue; } }); 

बटन पर संदेशों की संख्या प्रदर्शित करें

बटन गुण kango.ui.browserButton ऑब्जेक्ट का उपयोग करके नियंत्रित किए जाते हैं।

 _setUnreadCount: function(count) { kango.ui.browserButton.setTooltipText('Unread count: ' + count); kango.ui.browserButton.setIcon('icons/icon16.png'); kango.ui.browserButton.setBadge((count != 0) ? {text: count} : null); } 

यह सब एक साथ रखना

एक टाइमर जोड़ें जो किसी दिए गए आवृत्ति के साथ नए संदेशों और त्रुटि से निपटने की संख्या की जांच करेगा, परिणामस्वरूप, आपको इस कोड जैसा कुछ मिलेगा:

 function GmailChecker() { var self = this; self.refresh(); kango.ui.browserButton.addEventListener(kango.ui.browserButton.event.Command, function() { self.refresh(); }); window.setInterval(function(){self.refresh()}, self._refreshTimeout); } GmailChecker.prototype = { _refreshTimeout: 60*1000*15, // 15 minutes _feedUrl: 'https://mail.google.com/mail/feed/atom', _setOffline: function() { kango.ui.browserButton.setTooltipText('Offline'); kango.ui.browserButton.setIcon('icons/icon16_gray.png'); kango.ui.browserButton.setBadge(null); }, _setUnreadCount: function(count) { kango.ui.browserButton.setTooltipText('Unread count: ' + count); kango.ui.browserButton.setIcon('icons/icon16.png'); kango.ui.browserButton.setBadge((count != 0) ? {text: count} : null); }, refresh: function() { var details = { url: this._feedUrl, method: 'GET', async: true, contentType: 'xml' }; var self = this; kango.xhr.send(details, function(data) { if(data.status == 200) { var doc = data.response; var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue; self._setUnreadCount(count); } else { // something went wrong self._setOffline(); } }); } }; kango.ui.addEventListener(kango.ui.event.Ready, function() { return new GmailChecker(); }); 

विस्तार के लिए कोड की कुल 50 लाइनें, जो सभी लोकप्रिय ब्राउज़रों के तहत काम करेंगी।

माउस

सामान्य / आइकन फ़ोल्डर में, आपको PNG आइकन को icon16.png, icon32.png, icon48.png, icon128.png के साथ क्रमशः 16x16, 32x32, 48x48, 128x128 पिक्सल के आकार के साथ-साथ icon16_gray.png आइकन के साथ निष्क्रिय स्थिति प्रदर्शित करने की आवश्यकता है। ।

प्रोजेक्ट असेंबली

प्रोजेक्ट बनाने के लिए, बिल्ड तर्क और प्रोजेक्ट फ़ोल्डर के पथ के साथ kango.py चलाएँ

 d:\dev\kango\kango.py build ./ 

Chrome एक्सटेंशन बनाने के लिए, आपको Windows के लिए Google Chrome, या Linux के लिए क्रोमियम स्थापित करना होगा।

आउटपुट gmailchecker_0.1.0.xpi और gmailchecker_0.1.0.crx होना चाहिए, जो कि तैयार की गई एक्सटेंशन फाइलें हैं। Chrome के लिए, एक gmailchecker.pem फ़ाइल भी जेनरेट की जाएगी ताकि बाद में एक्सटेंशन को अपडेट किया जा सके।

आगे के दृष्टिकोण

अधिकांश एपीआई बंद बीटा परीक्षण चरण में हैं और जल्द ही एक संस्करण सार्वजनिक पहुंच के लिए पृष्ठों की सामग्री (डोम तक पूर्ण पहुंच) और बटन पर क्लिक करके पॉप-अप HTML विंडो खोलने की क्षमता को संशोधित करने की संभावना के साथ उपलब्ध होगा।

संदर्भ

• जीमेल चेकर उदाहरण के लिए पूर्ण स्रोत
• Freymovrk ही
• फ्रेमवर्क प्रलेखन