इस लेख में, मैंने प्रकाशनों की श्रृंखला जारी रखी है जिसमें मैं अपने अनुभव को ब्राउज़रों के लिए वेब एक्सटेंशन लिखने के बारे में बात करना चाहता हूं। मेरे पास पहले से ही एक वेब एक्सटेंशन बनाने का अनुभव था, जो लगभग 100,000 क्रोम उपयोगकर्ताओं द्वारा स्थापित किया गया था, जो स्वायत्तता से काम करता था, लेकिन लेखों की इस श्रृंखला में मैंने सर्वर साइड के साथ इसे कसकर एकीकृत करके वेब एक्सटेंशन के विकास की प्रक्रिया में देरी करने का फैसला किया।



भाग 1 , भाग 3 , भाग 4

सर्वर साइड के लिए एक फ्रेमवर्क चुनना

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

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

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

विभिन्न प्रोग्रामिंग भाषाओं में कई फ्रेमवर्क में लाइब्रेरी, मॉड्यूल और पैकेज हैं जो RESTful सर्वर एप्लिकेशन के तेजी से विकास के लिए हैं। लगभग 12 वर्षों से मैं विभिन्न PHP- आधारित फ्रेमवर्क के साथ काम कर रहा हूं, और पिछले 3 वर्षों से मैं Meteor.js के साथ भी काम कर रहा हूं। यह ढांचा नोड.जेएस के शीर्ष पर चलता है, इसलिए मैंने इसके उच्च प्रदर्शन (स्क्रिप्ट से प्राप्त डेटा की एक पंक्ति लिखने के लिए औसतन 112 मिलीसेकंड) और एप्लिकेशन के निर्माण के लिए तैयार पैकेजों का एक समृद्ध सेट होने के कारण इसे सर्वर भाग के लिए चुना।

रैस्टफुल लाइब्रेरी के रूप में, मैंने पैकेज github.com/kahmali/meteor-restivus को चुना, जिसे अन्य चीजों के साथ, पैच करने की आवश्यकता थी, क्योंकि यह हुक प्राधिकरण और अनंत पासवर्ड अनुमान की तकनीक के खिलाफ सुरक्षा के साथ सही ढंग से काम नहीं करता था।

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

प्रशासनिक क्षेत्र के लिए, मैंने एक्स्टेंसिबल और अत्यधिक विन्यास पैकेज github.com/yogiben/meteor-admin को चुना , जिसने मुझे सुरक्षा टीम की जरूरतों के लिए एक ही प्रकार के कई पृष्ठ बनाने के लिए समय कम करने की अनुमति दी।

वेब एक्सटेंशन के लिए एक इंटरफ़ेस डिजाइन करना

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

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

प्रक्रिया शुरू करने के लिए, आवश्यक पृष्ठों की एक सूची संकलित की गई थी। एक उपयोगकर्ता खाते के साथ काम करने के लिए पृष्ठों को इस सूची में वर्गीकृत किया गया था।

1. लॉगिन पेज
2. पंजीकरण पृष्ठ
3. पासवर्ड रीसेट पेज

इस बिंदु पर, एक बार लिंक रीसेट पासवर्ड समस्या थी। एक सामान्य एप्लिकेशन में, उपयोगकर्ता लिंक का अनुसरण कर सकता है, पासवर्ड रीसेट कर सकता है और फिर आवेदन दर्ज कर सकता है। एक वेब एक्सटेंशन navigator.registerProtocolHandler का उपयोग करके लिंक को "अवरोधन" कर सकता है और एक उपयोगकर्ता को वेब एक्सटेंशन में अधिकृत कर सकता है, लेकिन सभी ब्राउज़र इसका समर्थन नहीं करते हैं। इसलिए, लिंक द्वारा पासवर्ड को रीसेट करने का निर्णय लिया गया था, और फिर उपयोगकर्ता नए पासवर्ड का उपयोग करके वेब एक्सटेंशन में प्रवेश कर सकता है।

नीचे वेब एक्सटेंशन में एक नए उपयोगकर्ता को पंजीकृत करने के लिए एक फॉर्म है।


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

पंजीकरण के बाद, या प्राधिकरण के बाद, उपयोगकर्ता सीधे वेब एक्सटेंशन में अपना प्रोफ़ाइल संपादित कर सकता है। यह गुणात्मक रूप से वर्तमान समाधान में सुधार करता है, क्योंकि यह एक अलग वेबसाइट के साथ काम करने की आवश्यकता को समाप्त करता है। उपयोगकर्ता एक ही स्थान पर सभी क्रियाएं कर सकता है।


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


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


इसके अलावा, उपयोगकर्ता स्क्रिप्ट प्रचार का एक संकेत सेट कर सकता है, जो अन्य उपयोगकर्ताओं को वेब एक्सटेंशन समुदाय के अनुभव का उपयोग करने में सक्षम करेगा।

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

वेब एक्सटेंशन में फ़ाइलों को डाउनलोड करना फ़ाइल की सामग्री को बफर, एन्कोडिंग और आगे XHR चैनल के माध्यम से सर्वर पर भेजकर कार्यान्वित किया जाता है। POST सर्वर पर, अनुरोध संसाधित किया जाता है और फ़ाइल क्लाउड स्टोरेज पर भेजी जाती है। लिपियों में, उपयोगकर्ता GC.loadFile ('filename.ext') के माध्यम से डाउनलोड की गई फ़ाइलों को पढ़ सकते हैं ; , आंतरिक पुस्तकालय से एक फ़ंक्शन जिसके बारे में एक अलग लेख लिखा जाएगा।


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


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


अगले लेख में मैं "वेब एक्सटेंशन और सर्वर साइड की बातचीत को लागू करने में नुकसान" के बारे में बात करूंगा।