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




भाग 2 , भाग 3 , भाग 4

वेब एक्सटेंशन के लिए विचार

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

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

बेशक, मैं सेवाओं (नियम और शर्तों) के प्रावधान पर समझौते का उल्लंघन नहीं करने जा रहा था, इसलिए नीचे जो वर्णित किया गया है वह मेरी कल्पना का शुद्ध अनुमान है और कार्यान्वयन के लिए अनुशंसित नहीं है।

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

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

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

सभी पीड़ा के बाद, मुझे ब्राउज़र में कार्यों को स्वचालित करने के लिए "मेरी बाइक का आविष्कार" करने का विचार था। मेरे वेब एक्सटेंशन के लिए अनिवार्य आवश्यकताओं के बीच, मैंने प्रकाश डाला:

1. मोबाइल सहित अधिकतम वेब ब्राउज़र में काम करें।
2. ब्राउज़रों के लिए मानक स्क्रिप्टिंग भाषा का उपयोग करना जावास्क्रिप्ट है।
3. स्क्रिप्ट में अपनी खुद की डेटा फ़ाइलों का उपयोग करना।
4. स्क्रिप्ट से प्राप्त डेटा को फ़ाइल में सहेजने की क्षमता।
5. लिपियों को सार्वजनिक या निजी होना चाहिए। यदि स्क्रिप्ट सार्वजनिक है, तो सुरक्षा टीम को ऐसी स्क्रिप्ट की जांच करने की आवश्यकता है।

इस सूची से आगे, मैंने प्रत्येक आइटम के लिए और अधिक विशिष्ट बातें नोट कीं।

1. क्रॉस-ब्राउज़र समाधान विकसित करने के प्रयासों को कम करने के लिए आपको वेब एक्सटेंशन लिखने के लिए एक रूपरेखा का उपयोग करने की आवश्यकता है।
2. जावास्क्रिप्ट सभी ब्राउज़रों द्वारा समर्थित है, लेकिन आपको वेब एक्सटेंशन के साथ बातचीत करने के लिए अपनी खुद की लाइब्रेरी लिखने की आवश्यकता है। इस लाइब्रेरी में डेटा को बचाने, डाउनलोड की गई फ़ाइलों से डेटा पुनर्प्राप्त करने आदि के लिए कार्य होने चाहिए।
3. स्क्रिप्ट चलाने के लिए इनपुट का उपयोग करना अक्सर आवश्यक होता है। उदाहरण के लिए, प्राधिकरण के लिए डेटा, एपीआई के लिए कुंजी, क्रॉल करने के लिए पृष्ठों की एक सूची, आदि ऐसे डेटा को सीधे वेब एक्सटेंशन पर अपलोड किया जाना चाहिए और क्लाउड में संग्रहीत किया जाना चाहिए।
4. स्क्रिप्ट से डेटा सहेजना स्वचालन के लिए सबसे आवश्यक कार्यों में से एक है। संग्रहीत डेटा को सीधे वेब एक्सटेंशन से सीएसवी पर अपलोड किया जाना चाहिए, या अपलोड करने के लिए डेटा की सीमा पार होने पर उपयोगकर्ता के मेल पर भेजा जाना चाहिए। उदाहरण के लिए, यदि समूह के सदस्यों को अपलोड करना 10,000 से अधिक है, तो वेब एक्सटेंशन से डाउनलोड करने में लंबा समय लग सकता है। सर्वर पर फ़ाइल जनरेट करके इससे बचना चाहिए।
5. आपके पास उन उपयोगकर्ताओं की स्क्रिप्ट की जांच करने के लिए सुरक्षा टीम के लिए एक प्रशासनिक वेब इंटरफ़ेस होना चाहिए जिसे उन्होंने सार्वजनिक रूप से चिह्नित किया है।

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

इसलिए, मैंने कार्यों की अधिकतम सीमा के लिए कस्टम स्क्रिप्ट चलाने के लिए एक एक्सटेंशन बनाकर "आग पकड़ी"।

वेब एक्सटेंशन फ्रेमवर्क चुनना

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

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

अपने पुराने विस्तार को लिखते समय, मैंने कंगो ढांचे का उपयोग किया। 2013 में, यह यथासंभव सुविधाजनक था। हालांकि इंटरनेट एक्सप्लोरर के समर्थन के बिना।

चूंकि मेरा विस्तार एक बुकमार्कलेट के रूप में काम कर सकता था, इसलिए मैंने इस तथ्य पर ध्यान नहीं दिया और इस ढांचे को चुना, जो कि इसके समय के लिए क्रॉस-ब्राउज़र विकास के लिए एकदम सही समाधान था।

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

2013 में ओपेरा ब्राउज़र के लिए एक्सटेंशन क्रोम के एक्सटेंशन के साथ संगत थे। सफ़ारी के लिए एक्सटेंशन अब केवल MacOs के लिए काम करते हैं, क्योंकि सफ़ारी ब्राउज़र के Windows प्लेटफ़ॉर्म के लिए समर्थन लंबे समय से बंद है।

Tor ब्राउज़र पुराने मोज़िला फ़ायरफ़ॉक्स इंजन पर चलता है और इसलिए xpi वेब एक्सटेंशन का समर्थन करता है, जिसे Mozilla Foundation ने वेब एक्सटेंशन तकनीक के पक्ष में छोड़ दिया है।

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

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

सभी वेब एक्सटेंशन में डेटा के साथ काम करने के लिए दो बिंदु होते हैं। Content.js फ़ाइल आपको DOM में हेरफेर करने की अनुमति देती है, जबकि background.html आपको पृष्ठभूमि डेटा और सर्वर इंटरैक्शन के साथ काम करने की अनुमति देता है। इन दो बिंदुओं के बीच संचार तंत्र के माध्यम से होता है।

इस प्रकार, सर्वर की ओर से डेटा के साथ DOM को संशोधित करने के लिए, हमें उन्हें background.html से प्राप्त करना होगा और उन्हें संदेश गुजरने वाले तंत्र के माध्यम से content.js में उपयोग करना होगा।

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

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

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