सप्ताहांत में क्रोम एक्सटेंशन

समस्या

हमेशा की तरह देर रात, बस में चढ़ते हुए, मैंने फोन निकाला और "हब्र ..." टाइप करते हुए उसने काट लिया। मैंने जोर से सोचा: "क्या आप इसे पहले नहीं कह सकते थे?", मुझे थोड़ा पछतावा हुआ कि फोन शायद ही कभी चीख़ता है जबकि वे सत्ता से बाहर चल रहे हैं। और फिर ...

तब मैंने और मेरे दोस्त ने एक आदमी की तरह इस मुद्दे पर संपर्क करने का फैसला किया। उन्होंने Android के लिए एक कार्यक्रम लिखा, और मैंने क्रोम का विस्तार किया। उत्तरार्द्ध पर चर्चा की जाएगी।

कार्य

तो, यह विचार: एक एंड्रॉइड एप्लिकेशन बैटरी की स्थिति की निगरानी करता है और समय-समय पर चार्ज स्तर के सर्वर को सूचित करता है। और वह इसे किसी भी तरह से चालाकी से करता है ताकि आरोप से पीड़ित न हो। क्रोम एक्सटेंशन एक विशेष रूप से नामित जगह में अपने आइकन को उजागर करता है, आइकन एंड्रॉइड बैटरी की बैटरी दिखाता है और हर तरह से ध्यान आकर्षित करता है यदि यह लगभग पूरी तरह से छुट्टी दे दी गई है। और इसलिए कि सब कुछ बहुत सरल नहीं था, एक सप्ताह के अंत में विचार को महसूस करना आवश्यक था। अन्यथा, मूल्य / प्रयास का संतुलन मुक्त अनुप्रयोग के दायरे से बाहर हो गया।

इस प्रकार, कार्य के दृष्टिकोण का चुनाव दस-अंगुल की छपाई की गति से भी अधिक महत्वपूर्ण हो गया।

कारण के लिए।

निर्णय

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

क्रियान्वयन

मैंने विज़ुअल स्टूडियो 2013 में एक नया प्रोजेक्ट बनाकर शुरू किया, सादगी के लिए मैंने ASP.NET खाली आवेदन को चुना। मैंने देखा कि यहाँ पिता एक अधिक उपयुक्त टेम्पलेट का उपयोग करते हैं - टाइपस्क्रिप्ट के साथ HTML अनुप्रयोग - मेरे पास यह उपलब्ध नहीं है, इसलिए मुझे टाइपस्क्रिप्ट संकलन-ऑन-सेव सेटिंग के साथ पसीना बहाना पड़ा

मैंने परियोजना को न्यूनतम पुस्तकालयों और उनकी टाइपस्क्रिप्ट घोषणाओं के साथ पंप किया। मेरे दोस्त बोरिस यैंकोव ने टाइपस्क्रिप्ट घोषणाओं के एक भव्य सेट के साथ बहुत मदद की , हालांकि कुछ को चलते-फिरते समाप्त करना पड़ा।

MVC के आगे के घटक:

एम: मैंने दो मॉडल बनाए, एक पूरी सूची के लिए, एक अलग एंड्रॉइड डिवाइस के लिए (पॉपअप व्यूमॉडल और डिवाइसस्टैटस्यूव्यूमॉडल)। वास्तव में, वे ViewModel हैं, लेकिन इसके बाद बस मॉडल
V: अच्छे की तुलना में अधिक परेशानी को तोड़ने के लिए 2 पर प्रस्तुति, केवल popup.html बनाया
C: ठीक है, जिसे यह कहा जाता था - नियंत्रक

डिवाइसस्टैटस ने भी किया - यह विस्तार और सर्वर के बीच भेजा गया संरचना है, और नियंत्रक और मॉडल के बीच एक ही समय में।

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

बस जोड़तोड़ की एक जोड़ी है, और यह तस्वीर है:



अब यह सब अर्थ के साथ, कक्षाओं के साथ भरा जाना था। Chrome अपने एक्सटेंशन की संभावनाओं को सीमित करता है और हर जगह परिश्रमपूर्वक दौड़ता है, इसलिए नियंत्रक तुरंत पृष्ठभूमि पृष्ठ पर चला गया, क्योंकि यह वह है जो सर्वर से बात करता है, और यह केवल पृष्ठभूमि से संभव है। यह मैनिफ़ेस्ट में इसी प्रविष्टि है। Json:

"background": { "scripts": ["lib/jquery-1.7.2.min.js", "src/DeviceStatus.js", "src/Controller.js"] } 

शंकु के एक जोड़े के बाद, यह स्पष्ट हो गया कि फाइलों को एक दूसरे पर निर्भरता के क्रम में सूचीबद्ध किया जाना चाहिए (ajax अनुरोधों की सादगी और छोटी चीज़ों के लिए यहां jQuery की आवश्यकता है)।

ग्राहक का हिस्सा, जैसा कि उम्मीद थी, स्पार्टन निकला। यह केवल तब दिखाई देता है जब आप आइकन पर क्लिक करते हैं और इसमें कई कार्य नहीं होते हैं: एक उपकरण जोड़ें और चार्ज थ्रेशोल्ड सेट करें।

कुछ इस तरह:


आरंभ करने के लिए, आपको Chrome को यह बताना होगा कि उसे क्या और कब खोलना है।

  "browser_action": { "default_icon": "images/icon.png", "default_popup": "views/popup.html" }, 

प्रस्तुति कोड (popup.html) अत्यंत सरल है - कुछ HTML और नॉकआउट मॉडल बाइंडिंग गुण। मैंने उबाऊ विवरणों को छोड़ दिया, उन्हें एक जीवित उदाहरण पर देखा जा सकता है। यहां एक बात महत्वपूर्ण है - सिर्फ इसलिए कि क्रोम नॉकआउट के साथ काम नहीं करता है, इसे घोषणापत्र के माध्यम से अनुमति देने की आवश्यकता है:

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 

नॉक-आउट के लिए इस असुरक्षित-eval की भी आवश्यकता है। यहाँ विवरण ।



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

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

अब यह पहले से ही इस तरह दिखता था:


यह मेरा प्राथमिक यूआई सिखाने का समय है कि डेटा कैसे प्राप्त करें। Chrome ने पृष्ठभूमि पृष्ठ के तरीकों को सीधे कॉल करने में असमर्थता के रूप में एक और रेक लगाया (मेरे पास वहां नियंत्रक है)। सभी संचार संगत Chrome API और केवल एसिंक्रोनस रूप से होते हैं।

कॉल कुछ इस तरह दिखते हैं:

  chrome.extension.sendMessage({ method: "GetAllDevices" }, (allDevices: DeviceStatus[]) => { if (!allDevices || allDevices.length == 0) { console.info("Received empty device list"); return; } ... }); 

और पृष्ठभूमि पृष्ठ पर, एक छोटी बाइक नियंत्रक के तरीकों का उपयोग करके इन संदेशों को स्कैटर करती है:

 var server = new Controller(); chrome.extension.onMessage.addListener( function (request: any, sender: any, sendResponse: (result: any) => void ) { return server[request.method].call(server, request.data, sendResponse); }); 

कई कॉल नहीं आए:

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

नियंत्रक की जिम्मेदारियां थोड़ी व्यापक हैं:

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

स्वाभाविक रूप से, पहली बार कुछ भी काम नहीं किया और मुझे कोड को डीबग करना पड़ा। इसके अलावा, दोनों पृष्ठभूमि पृष्ठ पर और ग्राहक भाग में। क्लाइंट भाग के साथ सब कुछ सरल है - एक्सटेंशन बटन पर राइट-क्लिक करें और "पॉपअप का निरीक्षण करें", यहां आप डिबगर और DOM देख सकते हैं, और क्या बहुत महत्वपूर्ण - टाइपस्क्रिप्ट ने मुझे * .map फ़ाइलों का एक गुच्छा दिया, और क्रोम उठाया, और क्रोम कंसोल में। मैं टाइपस्क्रिप्ट डिबगिंग कर रहा था, जावास्क्रिप्ट नहीं। मुझे वास्तव में यह पसंद आया, सिवाय एक चीज के - टाइपस्क्रिप्ट समझदारी से _this वैरिएबल बनाता है और इसमें एक लिंक लिखता है। यह हमें नुकसान के बिना वस्तुओं के ढांचे के भीतर काम करने की अनुमति देता है, लेकिन डिबगर को यह पता नहीं था और अक्सर जब मैं चर के मूल्यों को देखने की कोशिश करता था तो सभी प्रकार की बकवास देता था। कुछ शंकु के बाद, मुझे एहसास हुआ कि डिबगिंग के दौरान, वास्तविक मूल्य को देखने के लिए इस सब को _this में बदलना चाहिए, फिर सब कुछ जगह में गिर गया।

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

सहेजना और पढ़ना स्थिति काफी सरल हो गई, क्रोम ने एक एपीआई प्रदान किया, और यहां तक ​​कि दावा है कि अगर यह कॉन्फ़िगर किया गया है, तो यह अलग क्रोम के बीच शेष डेटा के साथ सिंक्रनाइज़ करेगा। मैंने सिंक्रनाइज़ेशन की जांच नहीं की। और यह इस तरह दिखता है:

  private ReadState(callback: () => void): void { this.devices = []; chrome.storage.sync.get(["aid", "ds"], (storedValues: any) => { if (storedValues.aid != null && storedValues.aid != "") this.deviceId = storedValues.aid; var devicesJson = storedValues.ds; this.devices = JSON.parse(devicesJson); callback(); }); } private WriteState(): void { chrome.storage.sync.set({ "aid": this.deviceId, "ds": JSON.stringify(this.devices) }); } 

सर्वर से स्थिति का अनुरोध करना पूरी तरह से सामान्य अजाक्स है:

  private RequestStatus(data: any, successCallback: (status: DeviceStatus) => void , errorCallback: (error: string) => void ): void { $.ajax({ url: "https://localhost/cbs/" + data.deviceId, type: "GET", success: successCallback, error: (xhr, error) => { console.error(error); errorCallback(error); } }); } 

रास्ते में सबसे परिष्कृत रेक में से एक देखने के लिए मॉडल के बंधन को डीबग करते समय मिला। नॉकआउट एक इवेंट हैंडलर को पंजीकृत नहीं करना चाहता था, लेकिन इसके बजाय, सही जगह पर, इसे बुलाया। एक अन्य क्रोम एक्सटेंशन, नॉकआउट संदर्भ डीबगर, ने समस्या को पहचानने में मदद की।

और मुझे सूचनाओं के साथ पसीना बहाना पड़ा। Chrome सूचनाओं के लिए एक एपीआई प्रदान करता है, लेकिन एक महत्वपूर्ण सीमा के साथ - यह केवल 5 सेकंड के लिए स्क्रीन पर बंद हो जाता है, जिसके बाद लगभग कुछ भी नहीं बचा है, सिस्टम ट्रे में बस एक छोटी सी घंटी। और यह विन्यास योग्य नहीं है। कई असफल प्रयासों के बाद, वेबकिट सूचनाओं के माध्यम से समस्या का समाधान किया गया।

  var n = webkitNotifications.createNotification(opt.iconUrl, opt.title, opt.message); n.onclose = () => { ... }; n.show(); 

और फिर क्रोम इस तरह से बैटरी की याद दिलाने लगा:


शीर्ष पर आइकन के साथ, सब कुछ भी सरल है, क्रोम ने फिर से एपीआई प्रदान किया, और आइकन, टूलटिप और टेक्स्ट के साथ सरल जोड़तोड़ की मदद से, सब कुछ घड़ी की तरह काम किया:

  if (updateIcon) { chrome.browserAction.setIcon({ path: path }); chrome.browserAction.setTitle({ title: title }); chrome.browserAction.setBadgeText({ text: "!" }); } 

उसके बाद, यह केवल एक्सटेंशन के साथ एंड्रॉइड एप्लिकेशन से कोड प्रारूप से शादी करने के लिए बना रहा। पुनरावृत्ति से बचने के लिए 12-वर्ण कोड का चयन किया।

रविवार की आधी रात तक, पहला संस्करण तैयार था।

फिर बन्स और कीटनाशकों के साथ 3 और छोटे अपडेट थे, इसलिए यह कहना पूरी तरह से उचित नहीं होगा कि केवल सप्ताहांत और कुछ नहीं खर्च किया गया था, लेकिन मुख्य कार्य समय पर पूरा हो गया था।

अपडेट:
अगर किसी को iOS के लिए क्लाइंट लिखने में दिलचस्पी है, तो मुझे बताएं