ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) · पाठ

घटकों के बीच दोतरफ़ा संदेश-प्रेषण

एक्सटेंशन के विभिन्न भागों में अनुरोध-उत्तर संवाद के लिए संदेश-प्रेषण का उपयोग करके अधिक जटिल दोतरफ़ा संचार में निपुण बनिए।

पाठ 2, कुल 4 में से11 चरण

घटकों के बीच दोतरफ़ा संदेश-प्रेषण, CoddyKit पर ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

दोतरफ़ा संदेश भेजने का परिचय

स्वागत है! इस lesson में आप दोतरफ़ा messaging में दक्ष होंगे, जो आपके browser extension के अलग-अलग हिस्सों को प्रभावी ढंग से communicate करने का एक शक्तिशाली तरीका है।

एकतरफ़ा संदेशों के विपरीत, दोतरफ़ा messaging में sender केवल request भेजता ही नहीं, बल्कि receiver से एक specific response वापस भी प्राप्त कर सकता है।

Request-Response Model

दोतरफ़ा communication एक सरल request-response model का पालन करता है:

एक component, जैसे popup, एक संदेश यानी request भेजता है।
दूसरा component, जैसे background script, उसे प्राप्त करके process करता है।
इसके बाद receiving component एक संदेश यानी response वापस भेजता है।
मूल sender इस response को प्राप्त करके उसके अनुसार कार्रवाई करता है।

Callback के साथ request भेजना

Request भेजकर response की अपेक्षा करने के लिए आप chrome.runtime.sendMessage() के साथ एक optional callback function का उपयोग करते हैं। Response प्राप्त होने के बाद यह callback execute होगा।

इस example को popup या content script से चलाकर देखें:

/* popup.js or content-script.js */
console.log("Sending request to background...");

chrome.runtime.sendMessage({type: "fetchSettings", key: "theme"},
  function(response) {
    if (chrome.runtime.lastError) {
      console.error("Error sending message:", chrome.runtime.lastError.message);
      return;
    }
    if (response && response.status === "success") {
      console.log("Received setting:", response.value);
    } else {
      console.error("Failed to get setting:", response.error);
    }
  }
);

प्राप्त करना और उत्तर देना (Sync)

Receiving component, जो अक्सर आपका background service worker होता है, chrome.runtime.onMessage.addListener() का उपयोग करके संदेशों को सुनता है। इस listener को request, sender और एक खास sendResponse function मिलता है।

Synchronous response भेजने के लिए अपने डेटा के साथ केवल sendResponse() call करें। इसके बाद message channel बंद हो जाएगा।

/* service-worker.js (background script) */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Background received request:", request.type);

    if (request.type === "fetchSettings") {
      // Simulate fetching a setting synchronously
      const settings = {theme: "dark", notifications: true};
      const value = settings[request.key];

      if (value !== undefined) {
        sendResponse({status: "success", value: value});
      } else {
        sendResponse({status: "error", error: "Setting not found"});
      }
    }
    // No 'return true;' needed for synchronous response
  }
);

Async responses को संभालना

यदि आपका उत्तर किसी असिंक्रोनस प्रक्रिया पर निर्भर करता है, जैसे किसी API या स्थानीय संग्रहण से डेटा प्राप्त करना, तो क्या होगा? यदि आप किसी असिंक्रोनस कॉलबैक के अंदर sendResponse() को कॉल करते हैं, तो आपका उत्तर तैयार होने से पहले संदेश चैनल बंद हो सकता है।

इसे रोकने के लिए अपने onMessage.addListener कॉलबैक से true लौटाएँ। इससे Chrome चैनल को खुला रखता है और आपको बाद में sendResponse() कॉल करने की अनुमति मिलती है।

/* service-worker.js (background script) */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type === "fetchAsyncData") {
      console.log("Processing async request...");
      // Simulate an async data fetch
      setTimeout(() => {
        const data = {id: 'unique123', content: 'Fetched after delay'};
        sendResponse({status: "success", data: data});
      }, 500); // Wait 500ms

      return true; // IMPORTANT: Keeps the message channel open
    }
  }
);

पॉपअप से सामग्री स्क्रिप्ट तक

आप सक्रिय टैब में चल रही पॉपअप और सामग्री स्क्रिप्ट के बीच सीधे दो-तरफ़ा संचार भी स्थापित कर सकते हैं। इसके लिए पॉपअप टैब ID निर्दिष्ट करते हुए chrome.tabs.sendMessage() का उपयोग करता है।

इसके बाद सामग्री स्क्रिप्ट, बैकग्राउंड स्क्रिप्ट की तरह ही, chrome.runtime.onMessage.addListener() का उपयोग करती है।

/* popup.js */
console.log("Sending message to active tab...");

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  if (tabs.length > 0) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "getSelection"},
      function(response) {
        if (chrome.runtime.lastError) {
          console.error("Error from content script:", chrome.runtime.lastError.message);
          return;
        }
        if (response && response.selectedText) {
          console.log("Selected text:", response.selectedText);
        } else {
          console.log("No text selected.");
        }
      }
    );
  }
});

सामग्री स्क्रिप्ट का उत्तर

वेब पेज पर मौजूद सामग्री स्क्रिप्ट पॉपअप से संदेश कैसे प्राप्त करेगी और वर्तमान में चुना गया पाठ वापस कैसे भेजेगी, यह यहाँ बताया गया है।

याद रखें, सामग्री स्क्रिप्ट भी chrome.runtime.onMessage.addListener() का उपयोग करती है और sendResponse() का इस्तेमाल कर सकती है।

/* content.js */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Content script received action:", request.action);

    if (request.action === "getSelection") {
      const selectedText = window.getSelection().toString();
      sendResponse({selectedText: selectedText});
    }
    // For synchronous response, no 'return true;' is needed
  }
);

त्रुटि प्रबंधन के सुझाव

मज़बूत त्रुटि प्रबंधन अत्यंत महत्वपूर्ण है:

chrome.runtime.lastError की जाँच करें: sendMessage() के बाद इस गुण की हमेशा जाँच करें, ताकि डिस्कनेक्ट हुए पोर्ट जैसी त्रुटियों का पता चल सके (उदाहरण के लिए, जब प्राप्त करने वाली स्क्रिप्ट सक्रिय न हो)।
उत्तर में स्थिति शामिल करें: अपने उत्तर ऑब्जेक्ट में status फ़ील्ड रखें (जैसे, 'success', 'error') और विवरण के लिए वैकल्पिक message या error फ़ील्ड रखें।
undefined उत्तरों को संभालें: यदि प्राप्तकर्ता sendResponse() कॉल नहीं करता है, तो कॉलबैक को undefined उत्तर के साथ कॉल किया जा सकता है।

दो-तरफ़ा संचार की श्रेष्ठ प्रक्रियाएँ

दो-तरफ़ा संदेश-व्यवस्था को सुचारु और आसानी से बनाए रखने योग्य बनाने के लिए:

संदेश प्रकार स्पष्ट रूप से निर्धारित करें: उद्देश्य को आसानी से पहचानने के लिए अपने संदेश ऑब्जेक्ट में type या action फ़ील्ड का उपयोग करें (जैसे, {type: "getData"})।
संदेश सरल रखें: केवल आवश्यक, JSON में क्रमबद्ध किए जा सकने वाले डेटा को भेजें। जटिल ऑब्जेक्ट या DOM तत्वों से बचें।
श्रोता तर्क को केंद्रीकृत करें: यदि संभव हो, तो अपनी बैकग्राउंड स्क्रिप्ट में एक ही onMessage.addListener का उपयोग करें और उनके type के आधार पर अनुरोधों को उचित दिशा में भेजें।
संदेश अनुबंधों का दस्तावेज़ीकरण करें: स्पष्ट रूप से निर्धारित करें कि प्रत्येक संदेश प्रकार को क्या चाहिए और वह कौन-सा उत्तर लौटाता है।

अपनी समझ जाँचें

दो-तरफ़ा संदेश-व्यवस्था के अपने ज्ञान की जाँच करें!

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन और अगले चरण

आपने दो-तरफ़ा संदेश-व्यवस्था में दक्षता हासिल कर ली है!

आपने सीखा कि chrome.runtime.sendMessage() का उपयोग करके अनुरोध कैसे भेजे जाते हैं और कॉलबैक के माध्यम से उत्तर कैसे प्राप्त किए जाते हैं।
अब आप संदेशों का उत्तर देने के लिए sendResponse() के साथ chrome.runtime.onMessage.addListener() का उपयोग कर सकते हैं और समकालिक तथा असिंक्रोनस, दोनों स्थितियों को संभाल सकते हैं।
आपने यह भी देखा कि chrome.tabs.sendMessage() का उपयोग करके पॉपअप और सामग्री स्क्रिप्ट के बीच संचार कैसे सक्षम किया जाता है।

अब आप chrome.storage API का उपयोग करके डेटा को स्थायी रूप से सहेजना सीखेंगे, जो अक्सर संदेश-व्यवस्था के साथ मिलकर काम करता है!

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “घटकों के बीच दोतरफ़ा संदेश-प्रेषण” पाठ निःशुल्क है?

हाँ—“घटकों के बीच दोतरफ़ा संदेश-प्रेषण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“घटकों के बीच दोतरफ़ा संदेश-प्रेषण” में मैं क्या सीखूँगा?

एक्सटेंशन के विभिन्न भागों में अनुरोध-उत्तर संवाद के लिए संदेश-प्रेषण का उपयोग करके अधिक जटिल दोतरफ़ा संचार में निपुण बनिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“घटकों के बीच दोतरफ़ा संदेश-प्रेषण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पर वापस जाएँ