एक साधारण ओपेरा एक्सटेंशन लिखना

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

हम कहां से शुरू करते हैं?

• एक्सटेंशन फ़ाइलों के लिए एक नई निर्देशिका बनाएँ
• इसमें, config.xml फ़ाइल बनाएँ

XML सामग्री:

<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="http://faiwer.ru" version="0.9a" defaultlocale="en"> <name xml:lang="en">HabrCommentSwitcher</name> <description xml:lang="en">Habrahabr. New comment switcher</description> <description xml:lang="ru">Habrahabr.   </description> <author href="faiwer.ru" email="faiwer@gmail.com">Faiwer</author> <icon src="icons/64x64.png"/> <icon src="icons/48x48.png"/> <icon src="icons/32x32.png"/> </widget> 

चूंकि यह लेख शैक्षिक है, इसलिए मैं प्रत्येक वस्तु का विस्तार से वर्णन नहीं करूंगा, दस्तावेज मेरे लिए बेहतर काम करेंगे। आइए हम सबसे महत्वपूर्ण बात पर ध्यान दें:

• <name> हमारे एक्सटेंशन का नाम </ name>। बहुत लंबा न करें
• <विवरण> संक्षिप्त विवरण </ वर्णन>। पर्याप्त और कुछ पंक्तियाँ
• <आइकन /> एक्सटेंशन पृष्ठ पर , रिपॉजिटरी साइट पर आइकन का उपयोग किया जाता है (यदि आपका एक्सटेंशन वहां स्वीकार किया जाता है), और एक बटन में जो इस एक्सटेंशन में नहीं होगा। एक अलग निर्देशिका में रखना उचित है ताकि गड़बड़ न हो

कई और विकल्प उपलब्ध हैं। लेकिन शुरुआत के लिए, इनमें से पर्याप्त है। मुझे लगता है कि आपने देखा है कि config.xml में आप एक ही बार में नाम और विवरण के लिए कई भाषा संस्करण निर्दिष्ट कर सकते हैं।

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

UserJS

शुरुआत में, आपको यह तय करना चाहिए कि भविष्य का विस्तार क्या करना चाहिए:

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

इस सब के लिए, पहली फाइल जो प्रत्येक हैब्रह्ब पेज के लिए निष्पादित की जाएगी, पर्याप्त है। यानी UserJS हमारे लिए एकदम सही है। लेकिन अगर क्रोम UserJS को अपने आप एक्सटेंशन में बदल सकता है, और फ़ायरफ़ॉक्स को इसके लिए Greasemonkey की आवश्यकता है, तो ओपेरा के मामले में हम इसे एक्सटेंशन के रूप में डिज़ाइन कर सकते हैं या इसे मैन्युअल रूप से इंस्टॉल कर सकते हैं (F12 - साइट के लिए सेटिंग्स - लिपियों)।

आइए शामिल निर्देशिका बनाएं, ओपेरा वहां "एम्बेडेड" स्क्रिप्ट की खोज करेगा। इसमें, फ़ाइल habr_comment_switcher.js बनाएँ (यहाँ आप कोई भी नाम चुन सकते हैं)। फ़ाइल के शीर्ष पर:

 // ==UserScript== // @include http://habrahabr.ru/* // ==/UserScript== 

ये केवल js टिप्पणियाँ नहीं हैं, यह UserJS के लिए एक विशेष मार्कअप है, जो हमारे मामले में ओपेरा को समझाता है कि इस एम्बेडेड फ़ाइल को केवल habrahabr.ru पर चलाया जाना चाहिए।

जावास्क्रिप्ट

इस फ़ाइल के अतिरिक्त, हम कुछ प्रकार की लाइब्रेरी जैसे jQuery या प्रोटोटाइप भी पेश कर सकते हैं। लेकिन मैं दृढ़ता से ऐसा करने की सलाह नहीं देता। इस तरह के पुस्तकालय बहुत महत्वपूर्ण हैं। वे न केवल प्रत्येक टैब के लिए, बल्कि प्रत्येक आइफ्रेम के लिए भी लोड किए जाएंगे, जिनमें से पेज पर कई हैं, इनमें से 5-10 एक्सटेंशन ब्रेक का कारण बन सकते हैं। यह देखते हुए कि हमारे कार्य बहुत मामूली हैं, हम बहुत कुछ नहीं खोते हैं।

UPD 2. धन्यवाद, घुटनों । यदि पृष्ठ पहले से ही लोकप्रिय पुस्तकालयों में से 1 का उपयोग करता है, तो हम इसका उपयोग कर सकते हैं। इसके बारे में यहाँ और पढ़ें। ओपेरा के मामले में, यह कुछ इस तरह दिखाई देगा:

 var $ = window.jQuery; 

कोड लिखना शुरू करते हैं। शुरुआत के लिए, सुविधा के लिए, हम सब कुछ anon.function में डाल देंगे। क्योंकि हमारा जावास्क्रिप्ट पर्यावरण साइट के जावास्क्रिप्ट पर्यावरण से अलग है, यह आवश्यक नहीं है, लेकिन मेरी राय में, यह लंबे समय से अच्छे स्वाद का नियम है:

 +function( w ) { }( window ); 

मैं आपके बारे में नहीं जानता, लेकिन मुझे एक विशिष्ट वस्तु के भीतर काम करने की आदत है, और इसलिए हम इसे परिभाषित करेंगे:

  var Engine = function(){ this._init(); } Engine.prototype = { _init: function() { } } 

अब आपको इसके निर्माण के लिए शर्तें तैयार करने की आवश्यकता है:

  if( w.location.href.indexOf( 'habrahabr.ru' ) > 0 ) { var engine = false; d.addEventListener( 'DOMContentLoaded', function() { setTimeout( function(){ engine = new Engine(); }, 1500 ); }, false ); } 

पृष्ठ पते की जाँच तार्किक तर्कों के कारण नहीं, बल्कि व्यामोह के कारण होती है। तथ्य यह है कि मैं नेटवर्क पर कई बार आया था कि ओपेरा कभी-कभी उपयोगकर्ताजेस के नियमों के साथ सामना नहीं करता है। पेज के पूरे DOM ट्री के निर्माण के बाद हमारी वस्तु को लॉन्च किया जाएगा + 1.5 सेकंड। 1.5 सेकंड क्यों? तथ्य यह है कि स्लाइडर तुरंत दिखाई नहीं देता है, इसलिए हम इसके लिए इंतजार करेंगे। इसे अधिक भव्य रूप से महसूस किया जा सकता है, लेकिन अभी तक यह कम हो जाएगा।

एक्सटेंशन का काम

अब ओपेरा सबसे उच्च तकनीक वाला ब्राउज़र नहीं है, लेकिन फिर भी इसकी क्षमताएं IE6,7,8 से बहुत आगे हैं। इसलिए, हम ऐसी चीजों का लाभ उठा सकते हैं जिनका उपयोग हम साधारण वेब-प्रोग्रामिंग में नहीं करेंगे। अपने काम को थोड़ा सरल करें:

  var d = w.document, $ = d.querySelector.bind( d ), $$ = d.querySelectorAll.bind( d ) 

QuerySelector और querySelectorAll पद्धतियाँ आपको CSS चयनकर्ताओं द्वारा DOM ऑब्जेक्ट खोजने की अनुमति देती हैं। आप शायद jQuery के साथ अपने अनुभव से इस दृष्टिकोण को जानते हैं। हमारे मामले में, फ़ंक्शन $ एक तत्व की तलाश करेगा जो अनुरोध को संतुष्ट करता है, और $ $ एक सूची है।

सूची में क्या है? हां, इससे कोई फर्क नहीं पड़ता, चलो पृष्ठ पर सीएसएस की आवश्यकता है:

 _cssInject: function() { var style = this._createElem( this.elem.style_inject ), text = ''; for( var i = 0, n = this.css.length; i < n; ++ i ) { text += this.css[ i ]; } style.innerHTML = text; d.head.appendChild( style ); } 

यहां हम एक नया <style /> DOM ऑब्जेक्ट बनाते हैं और आवश्यक सीएसएस कोड को सामग्री के रूप में सेट करते हैं। क्योंकि पृष्ठ हमारे लिए तैयार है। दस्तावेज़ उपलब्ध है, जहाँ हम अपना टैग लगाएंगे। अब _createElem फ़ंक्शन के बारे में:

  _createElem: function( data ) { var item = d.createElement( data.tagName ); if( data.attr ) { for( var rule in data.attr ) { item.setAttribute( rule, data.attr[ rule ] ); } } return item; }, 

आप अपनी पसंद के अनुसार सेटिंग्स को व्यवस्थित कर सकते हैं, जैसे:

 _initConst: function() { this._extend( this, { css: [ '.__hcsc_button { border-top: 1px solid white; line-height: 22px; height: 22px; ' + 'cursor: pointer; }', '.__hcsc_button:hover { color: white; }', '.info.__hcsc_active { outline: 2px solid #222; }', ], elem: { style_inject: { tagName: 'style', attr: { id: '__habr_comment_switcher_css' } } } } ); }, _extend: function( object, extend ) { for( var name in extend ) if( extend.hasOwnProperty( name ) ) { object[ name ] = extend[ name ]; } }, 

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

 _prepareSlider: function() { var slider = $( this.s.slider ); if( !slider ) { return; } this.up_button = this._createElem( this.elem.button ); this.up_button.innerHTML = '▲'; slider.appendChild( this.up_button ); this.down_button = this._createElem( this.elem.button ); this.down_button.innerHTML = '▼'; slider.appendChild( this.down_button ); }, 

तीर पाठ के साथ सेट किया जा सकता है। अब हमें इन बटन को पुनर्जीवित करने की आवश्यकता है:

 _observe: function() { this.up_button.addEventListener( 'click', this._slideClick.bind( this, -1 ), false ); this.down_button.addEventListener( 'click', this._slideClick.bind( this, +1 ), false ); }, 

और अंत में, लंबे समय से प्रतीक्षित पत्रक:

 _checkItems: function() { var items = $$( this.s.info_panel ); if( !this.items || !this.items.length || !items.length || ( this.items[ 0 ] !== items[ 0 ] ) ) { this.position = -1; this.items = items; } return this.items; }, _slideClick: function( diff ) { if( this.current ) { this.current.classList.remove( this.c.active ); } if( !this._checkItems().length ) { return; } this.position += diff; if( this.position < 0 ) { this.position = this.items.length - 1; } else if( this.position >= this.items.length ) { this.position = 0; } this.current = this.items[ this.position ]; this.current.scrollIntoView( true ); this.current.classList.add( this.c.active ); } 

उसका तर्क सरल है। हम सीएसएस चयनकर्ता पर सभी नई टिप्पणियों की तलाश कर रहे हैं, जो इसमें निर्दिष्ट हैं। S.info_panel (".comment.item> .info.is_new")। वह हमें नई टिप्पणियों के सभी शीर्षक ब्लॉक ढूंढता है। फिर, हम किस बटन पर क्लिक करते हैं, इस पर हम स्क्रॉल करते हुए पेज स्क्रॉल को वांछित टिप्पणी तक ले जाते हैं। इस घटना को अधिक दृश्यमान बनाने के लिए, हम इसमें एक वर्ग जोड़ते हैं, जिसके लिए CSS के साथ एक डार्क बॉर्डर (रूपरेखा) को परिभाषित किया गया था।

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

अलग से, मैं DOM ऑब्जेक्ट के वर्ग के साथ काम करने के कार्यों पर ध्यान देना चाहूंगा। पंक्ति वस्तु को मैन्युअल रूप से पार्स करने की कोई आवश्यकता नहीं है ।className, tk। निम्नलिखित विधियाँ उपलब्ध हैं:

 this.current.classList.add( 'my_class' ); this.current.classList.remove( 'my_class' ); 

"डीबग" के बारे में थोड़ा

शुरुआत करने के लिए, हमारे पास Dragonfly (ड्रैगनफ़ली) जैसे उपकरण हैं, जिन्हें ctrl + shift + i (या सही माउस बटन - "ऑब्जेक्ट का निरीक्षण करें") के माध्यम से कहा जाता है। इसमें, "लिपियों" टैब पर, हम ड्रॉप-डाउन सूची में अपने habr_comment_switcher.js पा सकते हैं। अब हमारे पास ब्रेकप्वाइंट और ट्रेसिंग उपलब्ध है (F8, F10, F11)। कंसोल भी हमारे लिए उपलब्ध है, लेकिन इसके लिए हमारी स्क्रिप्ट के समान ही js- एनवायरनमेंट में काम करने के लिए, हमें सबसे पहले स्क्रिप्ट की ड्रॉप-डाउन सूची में इसकी संख्या को देखना होगा।

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

अंतिम स्पर्श

सब कुछ काम करने लगता है, इसलिए यह विस्तार पैक करने का समय है। ऐसा करने के लिए, एक्सटेंशन फ़ोल्डर की सामग्री को ज़िप संग्रह में संपीड़ित करें, और फ़ाइल एक्सटेंशन को oex में बदलें। यही है, विस्तार तैयार है। आप इसका उपयोग कर सकते हैं। यदि ओपेरा शपथ लेता है कि एक्सटेंशन क्षतिग्रस्त है, तो जांचें - शायद आपने फ़ोल्डर की सामग्री को संकुचित नहीं किया है, लेकिन इसकी सामग्री। Config.xml और index.html फ़ाइलों की भी जाँच करें।

उपसंहार

हुर्रे! हमारा विस्तार तैयार है, अल्फा स्टेज में। इसमें सुधार किया जा सकता है, Chrome और Greasemonkey के लिए समर्थन जोड़ें (हालांकि मुझे यकीन नहीं है कि यह इस तरह से बंद नहीं होगा), सेटिंग्स पृष्ठ जोड़ें (उदाहरण के लिए, रंग सेट करने या CSS चयनकर्ताओं को बदलने के लिए)।

आप यहां समाप्त एक्सटेंशन देख सकते हैं। पहली बार मैं git का उपयोग करता हूं, अगर कुछ गलत है तो मुझे क्षमा करें।