एक एक्सटेंशन बनाएं और प्रकाशित करें

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



लेख में: विस्तार वास्तुकला, बेक्सफ पर हबरा मीटर (इसके बाद एचएम) लिखने की प्रक्रिया में दिलचस्प बिंदु, विस्तार का प्रकाशन।

आर्किटेक्चर

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

/ images/ //  ,   font.png icon-18.png icon-64.png includes/ //  . ,      vendors/ //    Bexf.js jquery-1.4.4.min.js jquery.flot-0.6.min.js css/ //  CSS style.css js/ //  JS options.js popup.js Widget.js config.xml //  . .   index.html //  . .   options.html //  .  popup.html //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मानक फ़ाइलें और फ़ोल्डर्स

शामिल / फ़ोल्डर में .js / .css फाइलें शामिल हैं जो ओपेरा के विशिष्ट पृष्ठों से जुड़ती हैं और एक्सटेंशन के साथ बातचीत कर सकती हैं। प्रत्येक स्क्रिप्ट Greasemonkey फॉर्मेट में एक यूजरस्क्रिप्ट है।

// ==UserScript==

// @name --

// @namespace --

// @description --

// @author --

// @include mediafire.com*

// @include http://*.mediafire.com/*

// ==/UserScript==



//





HM में कोई प्लगइन स्क्रिप्ट नहीं है।



config.xml - एक्सटेंशन सेटिंग। मुझे प्रारूप विवरण पर ध्यान नहीं दिया गया है। यहां पहले से ही सब कुछ अच्छी तरह से वर्णित है www.opera.com/docs/apis/extensions/configxmlresourceguide

index.html - सूचकांक फ़ाइल जो एक्सटेंशन को इनिशियलाइज़ करती है (नाम बदला जा सकता है)

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

वर्तनी का विस्तार

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

सूची

इस फ़ाइल में कोई दृश्य नहीं है, इसलिए यह शरीर में कुछ एम्बेड करने और CSS को शामिल करने के लिए कोई मतलब नहीं है। मेरे मामले में, स्क्रिप्ट में Bexf.js और Widget.js (मुख्य HM स्क्रिप्ट) शामिल होंगे। विजेट init विधि के माध्यम से विस्तार को इनिशियलाइज़ करता है।

  init: function () { var self = this; this.font = new global.Image(); this.font.src = "images/font.png"; this.icon = new global.Image(); this.icon.src = "images/icon-18.png"; this.icon.onload = function () { self.button = $.createButton(self._buttonInitOptions) .addToPanel(); self.requestUpdates(); self.initTimer(); }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

विधि आवश्यक संसाधनों को जोड़ती है: उनके बारे में आगे फॉन्ट (font.png) और बटन टेम्पलेट (आइकन -18.ng)। बटन को प्रारंभ करता है, तुरंत इसे अपडेट करता है, अपडेट टाइमर शुरू करता है।



परियोजना में, मुझे कर्म और रेटिंग को प्रदर्शित करने के लिए बटन पर तस्वीर को गतिशील रूप से बदलने की जरूरत है, इसके अलावा, चित्र को कैनवास पर बनाया जाना था। एक समस्या थी: चित्र अधिकतम 18x18 है और इसलिए कोई भी मानक फ़ॉन्ट पूरी तरह से अपठनीय होगा (सिद्धांत रूप में, अब यह भी वास्तव में चमक नहीं रहा है) - मैंने एक 3x5 बनाया: 0-9 स्प्राइट फ़ॉन्ट, वायुसेना और एक कॉमोड / डॉट ने फॉन्टडेमन्सेस में सभी पत्र मापदंडों को चित्रित किया है। हालाँकि, index.html में कोई दृश्य नहीं है, लेकिन इसका एक दस्तावेज़ है, इसलिए यह कैनवस के माध्यम से एक आइकन को गतिशील रूप से उत्पन्न करने और कैनवास.toDataURL () के माध्यम से अपना डेटा प्राप्त करने के लिए संभव हो गया है। नीचे प्रतिपादन के लिए जिम्मेदार 2 तरीके हैं:

  _drawText: function (ctx, x, y, text) { text = text.split(''); for (var i = 0, c = text.length, g; i < c; i+= 1) { g = this.fontDemensions[text[i]]; ctx.drawImage(this.font, gx, gy, gw, gh, x, y, gw, gh); x += gw; } }, drawIcon: function (karma, rating) { karma += ''; rating += ''; var canvas = document.createElement('canvas'); // Create an empty canvas element canvas.setAttribute('width', '18px'); canvas.setAttribute('height', '18px'); // Copy the image contents to the canvas var ctx = canvas.getContext("2d"), offset; ctx.drawImage(this.icon, 0, 0); // Draw karma offset = 8 - (2 * karma.length) + (karma.indexOf('.') >= 0 ? 2 : 0) + (karma.indexOf(',') >= 0 ? 2 : 0); this._drawText(ctx, offset, 2, karma); // Draw rating offset = 8 - (2 * rating.length) + (rating.indexOf('.') >= 0 ? 2 : 0) + (rating.indexOf(',') >= 0 ? 2 : 0); this._drawText(ctx, offset, 11, rating); return canvas.toDataURL(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

विकल्प विंडो बंद करने के बाद, बटन अपडेट करें (एमबी उपयोगकर्ता बदल गया है)

  $.disconnect(function () { Widget.requestUpdates.call(Widget); Widget.initTimer.call(Widget); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Widget.js में अधिक दिलचस्प कुछ भी नहीं है। वह सब कुछ जो हब-यूजर पेज (क्रॉस-डोमेन एक्सएचआर), महीने के लिए आंकड़ों का संग्रह, और अन्य उपयोगितावादी तरीकों का पार्सिंग है।

विकल्प

विकल्प.html - किसी भी सामग्री की एक नियमित HTML फ़ाइल, यह माना जाता है कि यह widget.preferences (Bexf.opt) - व्यक्तिगत एक्सटेंशन डेटा का प्रबंधन करेगा।

फ़ाइल में एक डिफ़ॉल्ट संरचना है (सभी फ़ील्ड चिह्नित हैं)। लेकिन इसका तर्क सरल है: आरंभीकरण के दौरान, यह मानों को प्रपत्र फ़ील्ड में लोड करता है, जब "सहेजें" बटन दबाया जाता है, तो यह विजेट.प्रदर्शनों को डेटा लौटाता है।

पॉप अप विंडो

popup.html - किसी भी सामग्री (लेकिन एक सीमित आकार की) की एक नियमित HTML फ़ाइल में कोई भी नाम हो सकता है, एक बटन पॉपअप को नियंत्रित करता है। पॉपअप की संख्या सीमित नहीं है। जब इसे खोला जाता है तो हर बार एक पॉपअप शुरू किया जाता है (यह सभी कोड निष्पादित करता है)। एचएम के मामले में, पॉपअप में पिछले 30 दिनों के लिए उपयोगकर्ता मापदंडों को बदलने का कार्यक्रम है। ग्राफ़ को jQuery के फ़्लोट का उपयोग करके कैनवास पर खींचा गया है (पहले संस्करण में Google चार्ट API खींचा गया था, मैं GC API पर जाने वाला एकमात्र नहीं हूं)। पॉपअप स्क्रिप्ट आँकड़े डेटा को पार्स करता है (क्योंकि widget.preferences एक DOMStorage ऑब्जेक्ट है, तो इसके मान ऑब्जेक्ट नहीं हो सकते हैं) Bexf.opt ('स्टेट') में संग्रहीत हैं और उन्हें एक प्रारूप में रीमेक करता है जो jQuery Flot समझता है। ज्यादा दिलचस्प कुछ नहीं।

परीक्षण

ओपेरा डेवलपर्स ने हमारे बारे में सोचा, इसलिए एक्सटेंशन का परीक्षण करना बहुत आसान है: हम config.xml को ब्राउज़र में फेंक देते हैं और एक्सटेंशन डिबग मोड में जुड़ा हुआ है, यह एक रेगुलर एक्सटेंशन की तरह ओपेरा एक्सटेंशन मैनेजर में रीलोड (कोड अपडेट करें) / अक्षम / हटा सकता है। जैसा कि लुगांस्क ने लिखा है , "ड्रैगनफ़्ल अभी उनके (एरर्स) के साथ काम करने में सक्षम नहीं है, लेकिन ओपेरा.पोस्ट ईयररूट विधि काम करती है और इसका परिणाम त्रुटि कंसोल (Ctrl + Shift + O) में देखा जा सकता है। ड्रैगनफ़िगर अभी भी एक्सटेंशन से opera.postError के साथ काम करने में सक्षम नहीं है।

प्रकाशन

1. आपको एक्सटेंशन का परीक्षण करने की आवश्यकता है

2. एक ओपेरा खाता बनाएं (यह सभी सेवाओं के लिए एक है) - my.opera.com/community/signup

3. एक शीर्षक, संक्षिप्त विवरण, विस्तृत विवरण के साथ आओ

4. कम से कम 1 स्क्रीनशॉट बनाएं

5. आइकनों 64x64 (आवश्यक) 18x18 (यदि बटन हैं) ड्रा

6. विस्तार के एक संस्करण के साथ आओ, उदाहरण के लिए 1.0

7. विस्तार को .oex - नामांकित .zip में पैक करें

एक बार सब कुछ तैयार होने के बाद, addons.opera.com/developer/extensions/loadload डाउनलोड विज़ार्ड के निर्देशों का पालन करते हुए, लॉग इन करें और एक्सटेंशन डाउनलोड करें

एक बार जब आप एक्सटेंशन डाउनलोड कर लेते हैं तो इसे मॉडरेट (1-2 दिन) किया जाएगा और उसके बाद यह डाउनलोड के लिए उपलब्ध होगा। अद्यतन एक्सटेंशन को भी मॉडरेट किया जा रहा है (1-2 दिन)। और एक राय है कि संस्करणों के बहुत लगातार परिवर्तनों के बारे में मध्यस्थ आपके विस्तार की प्राथमिकता को कम करते हैं।

Addons.opera.com/developer/guidelines को प्रकाशित करने के बारे में और जानें

आदर

सामान्य विस्तार विषय www.opera.com/addons/extensions/develop

प्रारूप config.xml www.opera.com/docs/apis/extensions/configxmlresourceguide

Dev.opera.com/articles/view/opera-extensions-developer-workflow विकास मोड

एक्सटेंशन API www.opera.com/docs/apis/extensions

बीएक्सएफ - एचएम habrahabr.ru/blogs/opera/111461 लिखने के लिए उपयोग किया जाने वाला ढांचा

Dev.opera.com/articles/view/hands-on-building-an-opera-exture पर विस्तार बनाने का एक और उदाहरण

ओपेरा के डॉक अनुवाद और सोनिकगैस हैबर के उदाहरण: मैसेजिंग , विंडोज , यूजरज , आपका पहला ओपेरा एक्सटेंशन , बटन, बैज और पॉप-अप्स



एचएम का आधिकारिक संस्करण (मॉडरेट) ओपेरा ऐडऑन के सभी एक्सटेंशनों के बीच पाया जा सकता है ।opera.com/addons/extensions/details/habra-meter

नवीनतम संस्करण, जो आर्किटेक्चर इस आलेख में प्रस्तुत किया गया है, उसे यहां डाउनलोड किया जा सकता है: ब्राउज़र- कस्टमेंट्स-framework.googlecode.com/files/habra-meter-1.1.1.oex (इसका नाम बदल दिया गया है। ज़िप)



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



PS एक हाबरा मीटर मत लगाइए - कर्म के निरंतर अवलोकन से मानसिक बीमारी होती है। यह मेरे Bexf ढांचे की अवधारणा विस्तार का प्रमाण है