📱 🍶 👲🏼 ओपेरा के लिए एक्सटेंशन: मैसेजिंग 🧙🏼 👇🏻 ⁉️

प्रविष्टि

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

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

एक विस्तार का एक उदाहरण पृष्ठभूमि और एम्बेडेड स्क्रिप्ट के बीच डेटा के आदान-प्रदान को दर्शाता है
एक विस्तार का एक उदाहरण एक पृष्ठभूमि स्क्रिप्ट और एक पॉपअप के बीच डेटा के आदान-प्रदान को प्रदर्शित करता है
एक विस्तार का एक उदाहरण पॉप-अप विंडो और एक एम्बेडेड स्क्रिप्ट (पृष्ठभूमि स्क्रिप्ट से थोड़ी मदद के साथ) के बीच डेटा के आदान-प्रदान को प्रदर्शित करता है

पृष्ठभूमि और एम्बेडेड स्क्रिप्ट के बीच डेटा विनिमय

संदेश भेजने के लिए ओपेरा पोस्टमासेज () विधि का उपयोग करता है। यदि आप पृष्ठभूमि स्क्रिप्ट से एक एम्बेडेड स्क्रिप्ट में डेटा भेजना चाहते हैं, तो आपको पृष्ठभूमि स्क्रिप्ट में निम्नलिखित कोड लिखना होगा:

opera.extension.broadcastMessage("Hello there");

एक संदेश भेजने के बाद, इंजेक्शन वाली स्क्रिप्ट को इसे स्वीकार करना चाहिए, जिसे निम्नानुसार किया जा सकता है:

 var thecatch; opera.extension.onmessage = function(event) { thecatch = event.data; // event.data       "Hello there" } }

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

हम अपने पहले परीक्षण मामले के साथ इसे प्रदर्शित करते हैं।

बैकग्राउंड स्क्रिप्ट में एक लोड ईवेंट हुक होता है जो setupConnection फ़ंक्शन को कॉल करता है। आप त्रुटि कंसोल (उपकरण> उन्नत> त्रुटि कंसोल) में opera.postError विधि के आउटपुट का निरीक्षण कर सकते हैं।

 window.addEventListener("load", setupConnection, false); function setupConnection() { //    ,      opera.extension.onconnect = function(event) { //   ,     (     ) event.source.postMessage("something"); //    Error Console opera.postError("sent message to injected script"); } //   opera.extension.onmessage = function(event){ //   (   )  Error Console opera.postError("This is what I got from injected script: "+event.data); } }

निम्नलिखित कोड पर ध्यान दें:

 opera.extension.onconnect = function(event) { event.source.postMessage("something"); opera.postError("sent message to injected script"); }

ऑनकनेक्ट विधि को तब निष्पादित किया जाता है जब दस्तावेज़ में एम्बेडेड एक्सटेंशन स्क्रिप्ट को सक्रिय किया जाता है, इसे पृष्ठभूमि स्क्रिप्ट से जोड़ता है। यही है, जैसे ही इंजेक्शन की स्क्रिप्ट भरी हुई है, ऑनकनेक्ट विधि निष्पादित की जाती है।

बैकग्राउंड स्क्रिप्ट में ऑनकनेक्ट हैंडलर को इवेंट के माध्यम से इंजेक्ट की जा रही स्क्रिप्ट का लिंक वापस मिल जाता है। सोर्स ऑब्जेक्ट इस संदेश पोर्ट को एम्बेडेड स्क्रिप्ट के साथ सीधे संचार के लिए उपयोग किया जा सकता है, जैसा कि इवेंट "source.postMessage () पद्धति का उपयोग करके स्ट्रिंग" कुछ "भेजकर दिखाया गया है। जिस तरह से हो रहा है, उसे ट्रैक करने के लिए हम एरर कंसोल को एक छोटा नोटिफिकेशन भेजते हैं।

थोड़ी देर के लिए पृष्ठभूमि स्क्रिप्ट को छोड़ दें और हमारा ध्यान स्क्रिप्ट को लागू करने के लिए दें:

 opera.extension.onmessage = function(event){ //    . var message = event.data; opera.postError("Background script sent: " + message); //   . var reply = "Background script's message only had " + (message ? message.length : 0) + " characters."; event.source.postMessage(reply); };

जब संदेश एम्बेडेड संदेश प्राप्त करता है, तो ऑनसमेज विधि को कहा जाता है। हम संदेश की सामग्री को संदेश चर में संग्रहीत करते हैं। फिर हम त्रुटि कंसोल के लिए एक अधिसूचना भेजने के लिए opera.postError विधि का उपयोग करते हैं।

संदेश की प्राप्ति की पुष्टि करने के लिए, हम event.source ऑब्जेक्ट का उपयोग करके बैकग्राउंड स्क्रिप्ट के लिए एक प्रतिक्रिया भेजें। याद रखें: Event.source हमेशा संदेश के स्रोत को इंगित करता है।

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

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

 //   opera.extension.onmessage = function(event){ //   (   )  Error Console opera.postError("This is what I got from injected script: "+event.data); }

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

तो यह है कि विस्तार में क्या होता है:

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

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

चित्र 1 : एक्सटेंशन से त्रुटि कंसोल और सूचनाएं भेजी गईं।

हमने जांच की कि पृष्ठभूमि और एम्बेडेड स्क्रिप्ट कैसे संदेश प्राप्त और भेज सकते हैं। अब देखते हैं कि आप पॉप-अप विंडो के साथ ऐसा कैसे कर सकते हैं।

पॉपअप और बैकग्राउंड स्क्रिप्ट के बीच मैसेजिंग

हम इस अध्याय के लिए दूसरे एक्सटेंशन उदाहरण का उपयोग करेंगे। कृपया ध्यान दें कि इसमें कोई फ़ोल्डर और एक एम्बेडेड स्क्रिप्ट शामिल नहीं है - यह सिर्फ एक पृष्ठभूमि स्क्रिप्ट, HTML फाइलें, config.xml और एक आइकन है।

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

 opera.extension.onconnect = function(event){ event.source.postMessage("sending something"); opera.postError("sent message to popup"); }

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

अब पॉपअप पेज देखें:

 <script> window.addEventListener("load", function(){ opera.extension.onmessage = function(event){ event.source.postMessage("do whatever you want with this message"); opera.postError("sent from popup to background script"); } }, false); </script>

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

फिर से हम background.js पर जाते हैं और कोड देखते हैं:

 opera.extension.onmessage = function(event){ opera.postError("This is what I got from injected script: " + event.data); }

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

तो यह है कि विस्तार में क्या होता है:

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

सब कुछ ठीक उसी तरह से होता है जैसे पिछले उदाहरण में, एकमात्र अंतर यह है कि हमारे पास एक एम्बेडेड स्क्रिप्ट नहीं है, और हम एक पॉप-अप विंडो से संपर्क करते हैं।

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

चित्र 2 : एक्सटेंशन से त्रुटि कंसोल और सूचनाएं भेजी गईं।

पॉपअप और एम्बेडेड स्क्रिप्ट के बीच मैसेजिंग

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

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

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

सबसे पहले, हम वैश्विक वैरिएबल पोर्ट को परिभाषित करते हैं, जिसका उपयोग हम बाद में करेंगे। आइए ऑनकनेक्ट हैंडलर को देखें:

 opera.extension.onconnect = function( event ){ if( port ) event.source.postMessage( "Respond to the port", [port] ); }

बैकग्राउंड स्क्रिप्ट से कनेक्ट होने के समय, यह ond पोर्ट के प्रति प्रतिक्रिया ’संदेश भेजेगा। हम संदेश भेजने के लिए पोर्ट निर्दिष्ट करते हैं, लेकिन चूंकि पोर्ट वैरिएबल अभी तक मायने नहीं रखता है, संदेश उसी तरह भेजा जाएगा जैसा वह है।

अब आइए नजर डालते हैं स्क्रिप्ट पर अमल:

 var channel = new MessageChannel(); opera.extension.postMessage( "Respond to this immediately", [channel.port2] );

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

आइए पृष्ठभूमि की स्क्रिप्ट पर वापस जाएं:

 opera.extension.onmessage = function( event ) { if (event.ports) port = event.ports[0]; }

पृष्ठभूमि स्क्रिप्ट एम्बेडेड स्क्रिप्ट से एक संदेश प्राप्त करता है। अब दूसरे चैनल पोर्ट का लिंक ईवेंट के माध्यम से सुलभ है। [0] ऑब्जेक्ट और पोर्ट वैरिएबल में संग्रहीत है। अब बैकग्राउंड स्क्रिप्ट पॉप-अप विंडो कनेक्ट करने के लिए तैयार है। ऐसा होने पर, ऑनकनेक्ट विधि को फिर से बुलाया जाता है:

 opera.extension.onconnect = function( event ){ if( port ){ event.source.postMessage( "Respond to the port", [port] ); } }

अब, पोर्ट चर का मान खाली नहीं है। इसमें संदेश चैनल पोर्ट का लिंक शामिल है।

पॉपअप फ़ाइल पर एक नज़र डालें:

 opera.extension.onmessage = function( event ){ if( event.ports ){ opera.postError( "Responding to port" ); event.ports[0].postMessage( "Hi from popups side!" ); } }

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

 channel.port1.onmessage = function( event ){ opera.postError("Here is what i got in the injected script for port1: " + event.data); }

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

तो यह है कि विस्तार में क्या होता है:

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

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

संक्षेप में देना

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

एपीआई लिंक

पृष्ठभूमि स्क्रिप्ट संबंधित तरीके

स्क्रिप्ट लागू होने से संबंधित तरीके

पॉपअप तरीके

ओपेरा के लिए एक्सटेंशन: मैसेजिंग