आपका पहला ओपेरा एक्सटेंशन

प्रविष्टि



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



एक्सटेंशन को कॉन्फ़िगर करना।



सबसे पहले, आपको एक्सटेंशन कॉन्फ़िगरेशन फ़ाइल बनाने की आवश्यकता होती है जिसमें मेटाडेटा में एक्सटेंशन का वर्णन होता है। इसमें एक्सटेंशन के नाम, उसके लेखक और एक्सटेंशन मैनेजर के लिए आइकन के बारे में जानकारी है। ओपेरा के लिए एक्सटेंशन W3C विजेट्स प्रारूप का उपयोग करते हैं, जो आपको ओपेरा विजेट से परिचित हो सकता है।



कॉन्फ़िगरेशन फ़ाइल का कंकाल बनाएँ:

<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .

1. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
6. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
7. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
   
   
   
   

<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .

इसे config.xml के रूप में सहेजें।



एक एक्सटेंशन आइकन बनाना



निश्चित रूप से, आप कॉन्फ़िगरेशन फ़ाइल में आइकन के विवरण को देखते हैं। संकेतित आइकन का उपयोग एक्सटेंशन मैनेजर और ओपेरा के लिए एक्सटेंशन साइट पर किया जाता है। हम 64x64 पिक्सेल आइकन बनाने की सलाह देते हैं।



Hello.png आइकन फ़ाइल डाउनलोड करें और इसे एक्सटेंशन फ़ोल्डर में सहेजें।



ओपेरा पैनल में एक बटन जोड़ना



आपके द्वारा एक्सटेंशन को कॉन्फ़िगर करने के बाद, आप उसका कोड लिखना शुरू कर सकते हैं। पैनल में जोड़े जाने वाला एक बटन बनाएं। यह निम्नलिखित कोड का उपयोग करके किया जा सकता है:

1. <! doctype html >
2. < html lang = "en" >
3. < सिर >
4. < स्क्रिप्ट >
5. window.addEventListener ( "लोड" , फ़ंक्शन () {
6. var theButton;
7. var ToolbarUIItemProperties = {
8. शीर्षक: "हैलो वर्ल्ड" ,
9. आइकन: "हैलो-बटन.पीएनजी" ,
10. पॉपअप: {
11. href: "popup.html" ,
12. चौड़ाई: 110,
13. ऊंचाई: 30
14. }
15. }
16. TheButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);
17. opera.contexts.toolbar.addItem (theButton);
18. }, झूठी );
19. </ script >
20. </ head >
21. < शरीर >
22. </ शरीर >
23. </ html >

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

एक्सटेंशन फ़ोल्डर में इस फाइल को index.html के रूप में सेव करें।



ओपेरा के लिए किसी भी एक्सटेंशन के लिए index.html फ़ाइल की आवश्यकता होती है। यह एक html टेम्पलेट है जिसमें एक स्क्रिप्ट है जो UI तत्वों को बनाता है। इस दस्तावेज़ के मुख्य भाग का उपयोग नहीं किया गया है।



स्क्रिप्ट कई गुणों के साथ एक पैनल एलिमेंट (बटन) बनाएगी। एक तत्व 18x18 पिक्सल को मापने वाले आइकन के साथ बनाया गया है। बटन के साथ जुड़ी एक पॉपअप विंडो भी निर्दिष्ट आकार और इसके इंटरफेस के साथ फ़ाइल का संकेत है।



हेलो- button.png फ़ाइल डाउनलोड करें और इसे एक्सटेंशन फ़ोल्डर में सहेजें।



एक पॉपअप बनाएँ



आपने पहले ही एक बटन बनाया है और पॉप-अप विंडो के आकार को निर्दिष्ट किया है, इसलिए अब आपको केवल इसकी सामग्री बनाने की आवश्यकता है। यह निर्दिष्ट आयामों के साथ सिर्फ एक HTML दस्तावेज़ है। आप HTML, CSS, जावास्क्रिप्ट या किसी अन्य वेब तकनीक का उपयोग कर सकते हैं जो आप आमतौर पर वेब पृष्ठों पर उपयोग करते हैं। यह एक हैलो वर्ल्ड उदाहरण है, इसलिए इस पेज को बनाएं:

1. <! doctype html >
2. < html lang = "en" >
3. < सिर >
4. < शीर्षक > हैलो वर्ल्ड! </ शीर्षक >
5. < शैली >
6. एच १ {
7. फ़ॉन्ट: 14px हेल्वेटिका, एरियल, सैंस-सेरिफ़;
8. पाठ-संरेखित करें: केंद्र;
9. }
10. </ शैली >
11. </ head >
12. < शरीर >
13. < h1 > हैलो वर्ल्ड! </ h1 >
14. </ शरीर >
15. </ html >

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

एक्सटेंशन फ़ोल्डर में popup.html नाम से इस फाइल को सेव करें।



विस्तार की पैकिंग और स्थापना



आप लगभग एक्सटेंशन बनाकर काम कर रहे हैं। आपको बस इतना करना है कि सभी फाइलों को ज़िप आर्काइव में पैक करना है। उसके बाद, परिणामस्वरूप फ़ाइल का नाम बदलकर HelloExtension.oex करें (एक्सटेंशन को .zip से .oex में बदलना न भूलें) और आपका काम हो गया।



आप समाप्त HelloExtension एक्सटेंशन डाउनलोड कर सकते हैं।



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



बटन के विभिन्न गुणों और पॉप-अप विंडो की सामग्री के साथ प्रयोग करें जब तक आप प्रक्रिया के साथ सहज नहीं होते हैं।