स्पीड डायल के लिए एक्सटेंशन बनाना

प्रविष्टि

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

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

नोट: इस उदाहरण को आज़माने के लिए, आपको ओपेरा 11.50 की आवश्यकता है और स्पीड डायल के लिए एक एक्सटेंशन उदाहरण: स्पीड डायल के लिए हमारी घड़ी डाउनलोड करें ।

मूल बातें

ओपेरा के लिए सामान्य एक्सटेंशन के साथ संगतता बनाए रखने के लिए, स्पीड डायल के एक्सटेंशन एक ही प्रारूप और संरचना का उपयोग करते हैं, लेकिन कुछ अतिरिक्त के साथ। दूसरे शब्दों में, config.xml फ़ाइल कोड के लिए निम्न मामूली परिवर्धन मौजूदा ओपेरा एक्सटेंशन को स्पीड डायल के विस्तार में बदल सकते हैं:

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

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

हम config.xml फ़ाइल में स्पीड डायल के लिए एक्सटेंशन का वर्णन करते हैं

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


चित्र 1 : ओपेरा ब्राउज़र के स्पीड डायल में स्थापित एक्सटेंशन "क्लॉक"।

जबकि नियमित स्पीड डायल सेल एक वेब पेज का स्क्रीनशॉट प्रदर्शित करते हैं, स्पीड डायल एक्सटेंशन एक्सटेंशन के प्रारंभ (या पृष्ठभूमि) पृष्ठ को प्रदर्शित करता है - यह डिफ़ॉल्ट इंडेक्स । Html फ़ाइल है। इसे सक्षम करने के लिए, हमें पहले <विजेट> config.xml फ़ाइल के टैग के लिए न्यूनतम मूल्य के साथ व्यूमाकोड विशेषता को जोड़ना होगा:

<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" viewmodes="minimized"> 

यह विशेषता ब्राउज़र को पृष्ठभूमि विस्तार पृष्ठ को कम से कम तरीके से प्रदर्शित करने के लिए कहती है। 100% ज़ूम पर स्पीड डायल सेल का आकार 256x160 पिक्सेल है। इसके अलावा, हमें आवश्यक विशेषता और एक परम तत्व के साथ एक विशेषता तत्व जोड़ना चाहिए:

 <feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature> 

फ़ीचर तत्व की आवश्यक विशेषता एक्सटेंशन को चलाने के लिए स्पीड डायल की आवश्यकता को इंगित करती है। उदाहरण के लिए, ऐसे अन्य ब्राउज़र हो सकते हैं जो ओपेरा के एक्सटेंशन के साथ संगत हैं, लेकिन स्पीड डायल का समर्थन नहीं करते हैं। यदि आपके एक्सटेंशन को ऐसी परिस्थितियों में काम करना चाहिए, तो गलत का उपयोग करें। यदि आपका एक्सटेंशन स्पीड डायल के बिना काम नहीं करता है, तो सही का चयन करें।

परम तत्व की आवश्यकता है और उस पृष्ठ पर इंगित करता है जिसे आपको स्पीड डायल में आइकन पर क्लिक करना चाहिए।

यहां एक्सटेंशन के लिए पूरा config.xml फ़ाइल कोड दिया गया है:

 <?xml version="1.0" encoding="utf-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" defaultlocale="en" viewmodes="minimized"> <name short="Simple Clock">Clock Speed Dial Extension</name> <description>This is an example Speed Dial extension showing a simple clock.</description> <author href="http://people.opera.com/danield/">Daniel Davis</author> <icon src="images/icon_64.png"/> <!-- Icon source: http://www.openclipart.org/detail/17552 --> <feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature> </widget> 

एक्सटेंशन में सामग्री जोड़ें

हमारे लिए अगला कदम स्पीड डायल विंडो में प्रदर्शित करने के लिए कुछ दिलचस्प बनाना होगा। यह एक बैकग्राउंड एक्सटेंशन पेज है, इसलिए हमें config.xml फ़ाइल के समान ही index.html फ़ाइल बनाने की आवश्यकता है। उदाहरण के लिए, हम जावास्क्रिप्ट में एक साधारण डिजिटल घड़ी बनाएंगे जो दूसरे को समय प्रदर्शित करती है। सबसे पहले, एक खाली आउटपुट एलिमेंट के साथ बेस इंडेक्स। Html फ़ाइल बनाएँ:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Clock Speed Dial Extension</title> </head> <body> <output></output> <script src="scripts/background.js"></script> </body> </html> 

अगला, हम index.html में संदर्भ के लिए बैकग्राउंड.जेएस फ़ाइल के साथ एक स्क्रिप्ट डायरेक्टरी बनाते हैं। जेएस फ़ाइल इस तरह दिखती है:

 window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false); 

प्लग करने योग्य सीएसएस ( style.css ) भी सरल है, लेकिन इसमें एक मुश्किल चाल है:

 * { margin: 0; padding: 0; } html { height: 100%; } /* Use display:table and display:table-cell so that we can use vertical-align:middle */ body { background: #444; color: #fff; display: table; height: 100%; width: 100%; } output { display: table-cell; font-family: monospace; font-size: 10em; text-align: center; text-shadow: 0 0.1em 0.1em #000; vertical-align: middle; } /* Styles here are only applied in a "minimized" state */ @media screen and (view-mode: minimized) { output { font-size: 1.8em; } } 

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

विस्तार पूरा करना

हमेशा की तरह, हमारे काम को एक एक्सटेंशन के रूप में पैक करने के लिए, आपको रूट डायरेक्टरी में सभी फाइलों को ज़िप करने की जरूरत है (लेकिन खुद डायरेक्टरी नहीं) और ज़िप से ऑक्स के लिए आर्काइव एक्सटेंशन को बदल दें । यदि आपने पहले से ऐसा नहीं किया है, तो विस्तार घड़ी डाउनलोड करें_SD_extension.oex और प्रयास करें।

स्पीडडायलकोटेक्स्ट एपीआई

इंस्टॉलेशन के बाद, स्पीड अपने स्पीड डायल सेल को SpeedDialContext API के माध्यम से गतिशील रूप से नियंत्रित कर सकती है। यह एक बहुत ही सरल एपीआई है जिसमें दो लेखन गुण हैं: शीर्षक और यूआरएल । वे इस तरह के उदाहरण के लिए opera.contexts.speeddial ऑब्जेक्ट के माध्यम से पृष्ठभूमि स्क्रिप्ट में उपलब्ध हैं:

 if (opera.contexts.speeddial) { var sd = opera.contexts.speeddial; sd.title = "My title"; sd.url = "mypage.html"; } 

हम इस अवसर का उपयोग अपने विस्तार में सुधार करने के लिए कर सकते हैं, उदाहरण के लिए, दिन के समय के आधार पर एक अनुकूल संदेश प्रदर्शित करने के लिए। संपादित करने के लिए आवश्यक एकमात्र फ़ाइल background.js है :

 window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs, tmp_hours, timeofday; var messages = { "morning": "Good morning!", "afternoon": "Good afternoon!", "evening": "Good evening!", "night": "Shouldn't you be in bed?" }; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); // Make the Speed Dial title display time-related message if (hours !== tmp_hours) { if (hours > 15) { timeofday = 'evening'; } else if (hours > 11) { timeofday = 'afternoon'; } else if (hours > 3) { timeofday = 'morning'; } else { timeofday = 'night'; } if (opera.contexts.speeddial) { opera.contexts.speeddial.title = messages[timeofday]; } tmp_hours = hours; } }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false); 

यह पहले उदाहरण से एक ही फ़ाइल है, लेकिन कुछ अतिरिक्त के साथ। अर्थात्:

• संदेश ऑब्जेक्ट में दिन के अलग-अलग समय के लिए संदेश होते हैं;
• समय बदलने पर कोड निष्पादित करने वाली बार-बार जांच;
• वह पंक्ति जो संदेश डायल से संबंधित संदेश को स्पीड डायल हेडर में प्रदर्शित करती है।

एक्सटेंशन यहां डाउनलोड किया जा सकता है: friendly_clock_SD_extension.oex । स्थापना के बाद, यह इस तरह दिखेगा:


चित्र 2 : ओपेरा ब्राउज़र के स्पीड डायल में स्थापित दोस्ताना एक्सटेंशन "क्लॉक"।

निष्कर्ष

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

संदर्भ

ओपेरा के लिए एक्सटेंशन एपीआई: स्पीड डायल गाइड