% ब्राउज़र% के लिए 2GIS या हमने एक्सटेंशन कैसे किया

एक बार जब हमने खुद से एक सवाल पूछा: हम 2gis.ru के बाहर किसी उपयोगकर्ता को कंपनी चुनने में कैसे मदद कर सकते हैं? ब्राउज़र एक्सटेंशन के रूप में विचार के लिए एक कार्यान्वयन विकल्प लगभग तुरंत प्रस्तावित किया गया था, और अनुसंधान और नियोजन के चरणों के बाद, हमने ब्राउज़र के लिए 2GIS विकसित करना शुरू कर दिया।



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















अधिक सुविधा के लिए, उपयोगकर्ता की वर्तमान निर्देशांक को निर्धारित करने का निर्णय लिया गया था ताकि उसे ब्याज कंपनी की दूरी के बारे में विश्वसनीय जानकारी दिखाई दे और कंपनी के वर्तमान स्थान से दिशाओं की खोज के लिए एक त्वरित लिंक दिया जा सके। इसके बाद, निर्देशांक का निर्धारण अधिक महत्वपूर्ण हो गया, क्योंकि यह उस शहर को निर्धारित करने के लिए आवश्यक था जिसमें उपयोगकर्ता उसे सबसे उपयुक्त स्रोत से डेटा दिखाने के लिए स्थित है - 2GIS या Google।

पृष्ठभूमि और सामग्री स्क्रिप्ट

तकनीकी दृष्टिकोण से, औसत ब्राउज़र एक्सटेंशन एक या अधिक प्रविष्टि बिंदुओं के साथ अपेक्षाकृत सरल जावास्क्रिप्ट अनुप्रयोग है।



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



बैकग्राउंड स्क्रिप्ट को एप्लिकेशन स्तर पर सैंडबॉक्स (सैंडबॉक्सेड मूल्यांकन) में निष्पादित किया जाता है, और उनका डेटा रनिंग ब्राउज़र उदाहरण के लिए समान है। वे प्रति सत्र एक बार लॉन्च किए जाते हैं, या तो एक्सटेंशन इंस्टॉल करते समय, या इंस्टॉल किए गए एक्सटेंशन के साथ ब्राउज़र शुरू करते समय।



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



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

एक्सटेंशन बनाने की रूपरेखा। कांगो एक्सटेंशन

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

• कम प्रवेश सीमा;
• क्रॉस-प्लेटफॉर्म विधानसभा;
• उनकी टीम के हिस्से के रूप में रूसी डेवलपर :)।

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



ढांचे में शामिल हैं:

• स्थायी डेटा स्टोरेज kango.storage, जो केवल बैकग्राउंड स्क्रिप्ट से सुलभ है। दिलचस्प है, रिपॉजिटरी विभिन्न ब्राउज़रों पर थोड़ा अलग व्यवहार करता है। उदाहरण के लिए, फ़ायरफ़ॉक्स में, एक्सटेंशन को हटाए जाने और पुनर्स्थापित होने पर डेटा सहेजा जाता है, और वेबकिट ब्राउज़र में जब एक्सटेंशन हटा दिया जाता है तो इसे मिटा दिया जाता है;
• kango.browser ब्राउज़र को प्रबंधित करने के लिए एक इंटरफ़ेस, जिसमें से आप न केवल खिड़कियों और टैब की वर्तमान स्थिति प्राप्त कर सकते हैं, बल्कि उन्हें प्रबंधित भी कर सकते हैं;
• XMLHttpRequest के लिए एक रैपर जिसे kango.xhr कहा जाता है, फ़ायरफ़ॉक्स बैकग्राउंड स्क्रिप्ट में XMLHttpRequest को इंस्टेंट करने की समस्या को हल करता है;
• kango.console डीबगिंग इंटरफ़ेस, बैकग्राउंड सैंडबॉक्स में स्क्रिप्ट से डीबगिंग संदेश आउटपुट के लिए एक एकल लॉग विधि के साथ;
• पृष्ठभूमि और सामग्री स्क्रिप्ट के बीच संदेशों के आदान-प्रदान के लिए एक एकल इंटरफ़ेस। बैकग्राउंड स्क्रिप्ट मेथड्स kango.invokeAsync के माध्यम से उपलब्ध हैं, इसमें कंगोब्राउज़रटैब.इस्पैचमैटेज और केन्गो.एडडमैसेज लाइजनर विधियों के माध्यम से बैकग्राउंड से कंटेंट एरिया में मैसेज भेजने की भी व्यवस्था है। उपरोक्त विधियां अतुल्यकालिक रूप से डेटा प्राप्त करती हैं, इसलिए, इवेंट प्रोग्रामिंग को पूरी तरह से लागू करना होगा और संभावित दौड़ की स्थिति की निगरानी करना होगा।

इस्तेमाल किया डेटा और बाहरी सेवाओं

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











उपयोगकर्ता के वर्तमान स्थान को निर्धारित करने के साथ कई कठिन निर्णय जुड़े हैं, क्योंकि काफी कुछ संभावित स्थितियां थीं। उदाहरण के लिए, यदि उपयोगकर्ता लैपटॉप के ढक्कन को बंद कर देता है और शहर के दूसरे छोर के लिए छोड़ देता है, तो क्या होता है और फिर लैपटॉप को खोलता है? और अगर वह कनेक्शन के अल्पकालिक नुकसान के साथ सिर्फ दो वाई-फाई बिंदुओं के बीच चलता है? समस्या को हल करने पर सिर - बिल्ट-इन मेथड navigator.geolocation.watchPosition के माध्यम से काम नहीं किया। स्थिति-परिवर्तन की घटना बहुत कम बार हुई, जैसा कि हम चाहते हैं, इसके अलावा यह लैपटॉप के ढक्कन को बंद करने और खोलने के साथ स्थिति में काम नहीं करता है। नाविक.ऑनलाइन ध्वज बचाव के लिए आया था। उसे देखते हुए, हम इंटरनेट कनेक्शन की उपस्थिति के समय एक घटना को ट्रिगर कर सकते हैं। दुर्भाग्य से, ध्वज केवल वेबकिट ब्राउज़र में मज़बूती से काम करता है, लेकिन यह कुछ भी नहीं से बेहतर है।



यदि संगठन उपयोगकर्ता के समान शहर में, या 2GIS के किसी एक शहर में स्थित है, तो हम 2GIS से जानकारी दिखाएंगे, क्योंकि हम इसे अधिक विश्वसनीय और सत्यापित मानते हैं। उस क्षेत्र के निर्देशांक प्राप्त करने के लिए जिसके बारे में हमें जानकारी नहीं है, Google Places का उपयोग किया जाता है, लेकिन फ़िल्टर के उपयोग के साथ। जानकारी केवल तभी दिखाई जाती है जब खोज परिणामों में डोमेन उस डोमेन से मेल खाता है जिस पर पृष्ठ देखा जा रहा है। इसी तरह, हम फोन द्वारा खोज के साथ करते हैं। फर्क सिर्फ इतना है कि हम फोन को फ़िल्टर करते हैं, डोमेन द्वारा नहीं। यह उपयोगी है यदि आपके संगठन का फ़ोन होस्ट किया गया है, उदाहरण के लिए, तृतीय-पक्ष विज्ञापन साइट पर।



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

यह कैसे काम करता है

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



स्विचिंग टैब के अलावा, हमें उपयोगकर्ता द्वारा URL बदलने का भी जवाब देना चाहिए। ऐसा करने के लिए, हम onBeforeNavigate ईवेंट को हैंडल करते हैं, जिसे ब्राउज़र पेज लोड करने से पहले शुरू करता है। सफारी के साथ थोड़ी कठिनाई पैदा हुई - यह इस घटना को हर बार पता बार में नहीं बदलता है, केवल अगर पेज कैश में नहीं है या कैश समाप्त हो गया है। मुझे समझौता करना पड़ा - ऑनलोड घटना में एक हैंडलर जोड़ें, जिसे पेज लोड होने के बाद कहा जाता है।



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

वेब पेजों में फोन की पहचान

पृष्ठ के सामग्री क्षेत्र में, विस्तार एकमात्र कार्य करता है - संख्याओं और प्रतीकों के सामग्री अनुक्रमों से निकालना जिन्हें फोन माना जा सकता है। इससे आप इन फोन पर जानकारी प्राप्त कर सकते हैं और अपने स्मार्टफोन पर कॉल भेजकर कॉल कर सकते हैं।



अपने आप में फोन को पहचानने का कार्य विभिन्न प्रकार के प्रारूपों के कारण गैर-तुच्छ है, इसलिए हमें पूरी तरह से विश्वसनीय समाधान के बारे में कोई भ्रम नहीं था। उन स्वरूपों के उदाहरण जिन्हें हमें निपटना था: 34.76.35.05.39 - फ्रांस, +1 234 345 6789 - यूएसए, 67 2354 9548 - ब्राजील।



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









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



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









चौड़ाई में पेड़ के एक साधारण चलने-फिरने वाले निशान के दौरान, दस्तावेज़ के प्रत्येक पाठ DOM नोड की सामग्री में फोन खोजे जाते हैं। चरणों में, यह कुछ इस तरह दिखता है: पाठ में पाया गया टेलीफोन नंबर हाइलाइट किया जाता है → जब आप इसे बाहरी सेवाओं के लिए कर्सर के साथ मँडराते हैं, तो कंपनी की जानकारी फ़ोन नंबर द्वारा मांगी जाती है → प्राप्त डेटा पॉप-अप विंडो में प्रदर्शित किया जाता है → यदि कुछ भी समान नहीं मिला है, तो "कॉल" लिंक प्रदर्शित होता है।



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

और यदि डेटा अजाक्स द्वारा प्राप्त किया जाता है?

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



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

अंतर्राष्ट्रीयकरण। हम अंग्रेजी बोलते हैं

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

• वर्तमान स्थान की परिभाषा;
• स्थानीयकरण के आधार पर स्थानीयकरण सूचियों को लोड करना, या तो kango.io.getExtensionFileContents पर सीधे कॉल के माध्यम से, या एसिंक्रोनस के माध्यम से यदि मॉड्यूल सामग्री या अतिरिक्त स्क्रिप्ट में तुरंत तैयार किया गया था;
• सरल स्ट्रिंग प्रक्षेप के साथ स्थानीयकरण संदेश प्राप्त करने के लिए एक सरल इंटरफ़ेस प्रदान करना।

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

पैकेज विधानसभा

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



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

आगे क्या है

दुनिया अभी भी स्थिर नहीं है और ब्राउज़रों के लिए 2 जीआईएस भी बढ़ रहा है और विकसित हो रहा है, और यहां कुछ ऐसे हैं जो हम निकट भविष्य में करने जा रहे हैं:

• Iterative फोन मान्यता वृद्धि। हम अधिक परीक्षण मामलों को जोड़ते हैं, हम पार्सर को सही करते हैं - जीवन बेहतर और अधिक मजेदार हो जाता है;
• एक स्थिर तस्वीर के बजाय एक पॉप-अप विंडो में इंटरेक्टिव 2GIS मैप एम्बेड करना;
• कॉस्मेटिक परिवर्तन जो हमारे तत्वों को बहुत खराब डिज़ाइन की गई साइटों पर भी शानदार दिखने की अनुमति देते हैं;
• और निश्चित रूप से, विभिन्न सुधार और सुधार, प्रस्ताव जिनके लिए हम मेल extension@2gis.ru की प्रतीक्षा कर रहे हैं

आपका ध्यान देने के लिए धन्यवाद। ब्राउज़रों के लिए एक्सटेंशन बनाएं - यह न केवल मजेदार है, बल्कि उपयोगी भी है!