देखें कि क्या छिपा है या कितना अच्छा बनाया जा सकता है

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

समय-समय पर, मैंने इस विचार को याद किया, लेकिन Google पर एक त्वरित नज़र ने कुछ भी दिलचस्प नहीं दिया। हाल तक।

जब जनवरी में मैंने फिर से यह देखना चाहा कि क्या इस विषय पर कुछ दिलचस्प दिखाई दे रहा है, तो मुझे एलन कार्डिन द्वारा लिखित एक अद्भुत विज़ुअल ईवेंट 2 बुकमार्क मिला। बुकमार्क घड़ी की तरह काम करता था, लेकिन मरहम में छोटे-छोटे लेकिन अप्रिय होते हैं।

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

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

यह सब किस लिए है?

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

चेतावनी! बटन एक्सटेंशन लगाने के बाद लोड किए गए पृष्ठों पर ही काम करेगा!

बटन को सक्रिय करने के बाद, खुले HTML पृष्ठ को काला कर दिया जाएगा और उन सभी तत्वों पर, जो किसी भी घटना संचालकों को लटकाए गए हैं, रंगीन आयतों के साथ हाइलाइट किए जाएंगे:


किसी भी आयत में कर्सर को ले जाने पर आपको हैंडलर फ़ंक्शन का कोड, फ़ाइल का नाम और वह लाइन दिखाई देगी, जिसमें जारी किया गया था:


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

हम बुकमार्कलेट को अलग कर देते हैं

कहीं पर कुछ पोर्ट करने से पहले, यह पता लगाना अच्छा होगा कि कुछ अभी भी कैसे काम करता है। यह अंत करने के लिए, हम बुकमार्कलेट के कोड पर एक नज़र डालते हैं।

बुकमार्क में लिंक के साथ जोड़े गए वास्तविक कोड और स्टाइलशीट और सभी कार्यक्षमता के कार्यान्वयन के साथ कई अतिरिक्त फाइलें शामिल हैं। बुकमार्क कोड अत्यंत सरल है:

(function() { var url = 'http://example.com/VisualEvent/builds/VisualEvent_Loader.js'; if( typeof VisualEvent!='undefined' ) { if ( VisualEvent.instance !== null ) { VisualEvent.close(); } else { new VisualEvent(); } } else { var n=document.createElement('script'); n.setAttribute('language','JavaScript'); n.setAttribute('src',url+'?rand='+new Date().getTime()); document.body.appendChild(n); } })(); 

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

वास्तव में, यह स्क्रिप्ट VisualEvent मोड पर / बंद बटन की कार्यक्षमता को लागू करता है, और सभी तर्क अलग-अलग संग्रहीत होते हैं और पहले सक्रियण के दौरान लोड होते हैं । लेकिन, चूंकि हम एक विस्तार करना चाहते हैं, इसलिए हमें सभी विज़ुअलइवेंट कोड को इसमें एम्बेड करना होगा, जिससे तृतीय-पक्ष साइटों तक पहुंच पूरी तरह से समाप्त हो जाएगी और पहले सक्रियण के समय को कम कर देगा।

सभी बुकमार्क कोड तीन फ़ाइलों में वितरित किए गए हैं:

• VisualEvent_Loader.js
• VisualEvent.js
• VisualEvent-jQuery.js

VisualEvent_Loader.js को पहले लोड किया गया है। यह फिर से यह देखने के लिए जाँच करता है कि क्या VisualEvent को पहले लोड किया गया है और, यदि कोई है, तो डिबग मोड को सक्रिय या निष्क्रिय करता है। यदि VisualEvent पहले लोड नहीं हुआ है, तो यह देखने के लिए जांचता है कि पृष्ठ jQuery का उपयोग करता है या नहीं। यदि jQuery का उपयोग किया जाता है, तो VisualEvent.js फ़ाइल को बुकमार्कलेट के कोड के साथ ही लोड किया जाता है। यदि jQuery लोड नहीं है, तो VisualEvent-jQuery.js फ़ाइल लोड की जाती है, जिसमें VisualEvent कोड और jQuery लाइब्रेरी कोड दोनों होते हैं।

यह स्पष्ट है कि हमें एक्सटेंशन में VisualEvent सक्रियण विकल्पों को लागू करना होगा: jQuery के साथ और उसके बिना। इसके अलावा, हम कई फ़ाइलों में कोड को फैलाने में सक्षम नहीं होंगे ।

जेएस फाइलों के अलावा, बुकमार्क विजुअलइवेंट.कैंस फाइल से अपनी स्वयं की स्टाइलशीट का उपयोग करता है।

पैनल पर एक बटन बनाना

एक एक्सटेंशन विकसित करने का सबसे आसान तरीका टूलबार में एक बटन जोड़कर है। सबसे पहले, बटन पर क्लिक करके एक्सटेंशन को डीबग करना बहुत आसान है, और दूसरी बात, दृष्टि में एक बटन की मौजूदगी आंख को उत्तेजित करती है और उत्साह की लहर को जल्दी से कम नहीं होने देती है।

एक्सटेंशन की मूल संरचना कैसे बनाएं, config.xml विवरण फ़ाइल को कैसे भरें और टूलबार में एक बटन कैसे जोड़ा जाए, यह मुझे नहीं बताया गया है, यह सब आधिकारिक गाइड में है , और इसका वर्णन Habré पर किया गया था।

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

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

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

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

परिणामस्वरूप, बटन क्लिक प्रोसेसिंग फ़ंक्शन ने फॉर्म लिया:

 function buttonClicked() { var tab = opera.extension.tabs.getFocused(); if ( tab ) { opera.extension.broadcastMessage( JSON.stringify(opera.extension.tabs.getFocused().url)+ '|' + 'VisualEvent-1.0'); } }; 

जहां call opera.extension.broadcastMessage () सिर्फ प्रसारण संदेश भेजता है। और पृष्ठभूमि स्क्रिप्ट को यह तर्क मिला:

 opera.extension.onmessage = function(e) { var dataArray = e.data.split('|'); if ( window.top == window.self && e.data && JSON.parse(dataArray[0]) == window.decodeURI(window.location.href.replace(window.location.hash, '')) ) { if ( 'VisualEvent-1.0' == dataArray[1] ) { enableVisualEvent(); } } }; 

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

तंत्र कमियों के बिना नहीं है, इसलिए, यदि कोई व्यक्ति बटन और पृष्ठ के साथ बातचीत करने का एक सरल तरीका जानता है, तो मुझे टिप्पणियों में इसके बारे में पढ़ने में खुशी होगी।

हम पृष्ठ को संसाधित करने के लिए एक स्क्रिप्ट लिख रहे हैं

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

तथ्य यह है कि मुझे बैक-अप स्क्रिप्ट से एक ही एक्सटेंशन से संबंधित एक और जावास्क्रिप्ट फ़ाइल को कनेक्ट करने का कोई तरीका नहीं मिला, इसलिए मुझे प्रत्येक तीन स्रोत बुकमार्कलेट फ़ाइलों ( VisualEvent , VisualEvent_loader और jQuery ) को एक अलग फ़ंक्शन के रूप में कोड करना पड़ा और इसे इसमें शामिल करना पड़ा । सिंगल बैकग्राउंड स्क्रिप्ट।

जावास्क्रिप्ट को अपनाना

जैसा कि UserJS को एक्सटेंशन में बदलने पर मैनुअल में कहा गया है।

कभी-कभी UserJS विभिन्न कारणों से विस्तार का काम नहीं करता है। ( कभी-कभी UserJS विभिन्न कारणों से विस्तार मोड में काम नहीं करता है )

और यह सच है, कम से कम यह मेरे लिए काम नहीं था :)। लेकिन एक ही मैनुअल में इस अपमान से निपटने के तरीके पर व्यंजनों को भी शामिल किया गया है। मुख्य कारण यह है कि एक्सटेंशन अपने सैंडबॉक्स में काम करता है और विंडो ऑब्जेक्ट के स्पष्ट संकेत के माध्यम से केवल पृष्ठ के वैश्विक दायरे तक पहुंच है। यानी jQuery को " $ " या "j क्वेरी " के रूप में कॉल करने से काम नहीं चलेगा, इसके बजाय " विंडो। $ " या " window.jQuery " का उपयोग करें। और इस तरह के सुधार स्क्रिप्ट में उपयोग किए जाने वाले सभी वैश्विक चर के लिए किए जाने चाहिए।

सभी प्रतिस्थापन किए जाने के बाद, विस्तार ने पूरी तरह से काम किया। लेकिन स्टाइलशीट कनेक्ट नहीं हुई।

सीएसएस कनेक्ट करें

स्रोत कोड ने अपनी स्वयं की स्टाइलशीट का उपयोग किया और इसे बाहरी फ़ाइल से लोड किया। जैसा कि मैंने पहले ही कहा था, एक्सटेंशन डायरेक्टरी से पेज पर अतिरिक्त फाइल्स को कनेक्ट करना संभव नहीं था। वर्कअराउंड के रूप में, मैंने बैकग्राउंड स्क्रिप्ट में सभी CSS कोड को शामिल किया और, पहली बार इनिशियलाइज़ेशन में, मैंने <head> में <style> टैग बनाया, इसमें सभी CSS लिखी। -rule:

 function initCss() { var css = '< CSS->'; var n = document.createElement('style'); n.type = 'text/css'; var rules = document.createTextNode(css); if ( n.styleSheet ) { n.styleSheet.cssText = rules.nodeValue; } else { n.appendChild(rules); } document.getElementsByTagName('head')[0].appendChild(n); }; 

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

निष्कर्ष

जो भी पढ़े उसका धन्यवाद! :)

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

वैसे, क्रोम उपयोगकर्ता उसके लिए एक समान एक्सटेंशन पा सकते हैं।