पॉपअप से background.js के साथ कैसे बातचीत करें?

Question

क्या popup.html (या popup.js) और पृष्ठभूमि स्क्रिप्ट के बीच जानकारी पास करने का कोई तरीका है?

मैं एक उपयोगकर्ता के खाते से जानकारी प्रदर्शित करने या उन्हें में लॉग इन करने की अनुमति देते हैं, लेकिन background.js प्रमाणीकरण और अन्य तर्क को संभालने के लिए पॉपअप चाहते हैं। मेरे पास manifest.js को घोषणापत्र में घोषित किया गया है, लेकिन ऐसा कोई संकेत नहीं है कि इसका उपयोग किया जा रहा है।

संपादित करें: मैं इस सब गलत के बारे में जा रहा हूँ और वहाँ यह करने के लिए एक बेहतर तरीका है, वह भी बहुत अच्छा होगा।

Answer 1

उपयोग chrome.extension API।

आप अनुरोध आगे पीछे या और भी बेहतर भेज निरंतर संचार के लिए एक बंदरगाह का उपयोग कर सकते हैं।

उदाहरण मैं पॉपअप और पृष्ठभूमि पेज कि कनेक्ट जब पॉपअप को खोल दिया जाता है जो दो तरह से संचार पैदा करेगा दे।

बस है कि दोनों पृष्ठभूमि पृष्ठ और पॉपअप पेज में शामिल है एक socket.js फ़ाइल बनाएँ। फिर प्रत्येक पर तुम सिर्फ घोषणा कर सकते हैं:

new Socket(); 

यहाँ socket.js के कार्यान्वयन है:

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
}; 

सुनिश्चित करें कि आप सामान्य विधि आपके लिए संदेश श्रोता काम में कॉल करने के बनाओ। मुझे ऊपर दिए गए प्रारूप को पसंद है - यह बहुत मजबूत है। संदेशों को आगे और पीछे भेजने के लिए बस सॉकेट से उन्हें पोस्ट:

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
}); 

तो अगर इस पॉपअप पेज से मार डाला गया तो पृष्ठभूमि पृष्ठ कहेंगे:

window.myNamespace.myLiteral.myMethod(argOne, argTwo); 

मुझे इस के लिए एक बहुत अच्छा है पुन: प्रयोज्य जावास्क्रिप्ट ऑब्जेक्ट। तुम भी विशिष्ट प्रोटोटाइप कार्यों में जोड़ सकते हैं यदि आप चाहते हैं - इस तरह से अपनी भी भेजने के लिए आसान संदेश:

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
}; 

अब बस आपको कहना है:

socket.sendOneTwo(); 

Answer 2

ध्यान दें कि पृष्ठभूमि पृष्ठ और पॉपअप एक ही प्रक्रिया (एक्सटेंशन प्रक्रिया) में रहते हैं, इसलिए एक पृष्ठ दूसरे की डोम विंडो प्राप्त कर सकता है और फिर फ़ंक्शंस कॉल कर सकता है या सीधे चर सेट कर सकता है। उदाहरण के लिए, पॉपअप chrome.extension.getBackgroundPage कॉल कर सकते हैं पृष्ठभूमि संशोधित करने के लिए:

chrome.extension.getBackgroundPage().variable = 42; 

और पृष्ठभूमि पेज chrome.extension.getViews फोन पॉपअप प्राप्त करने के लिए कर सकते हैं: पारंपरिक डोम का उपयोग करके

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42; 

साझा चर सेट करने के लिए एक और तरीका है एपीआई, चूंकि प्रत्येक एक्सटेंशन को नकली उत्पत्ति मिलती है (जैसे "eakjnniffhfegdpfehmnpcmjiameincp")। तो जब आप localStorage, document.cookie, या पृष्ठभूमि पर इंडेक्सड डीबी संशोधित करते हैं, तो इसे पॉपअप में वापस पढ़ा जा सकता है।

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

Answer 3

सिर्फ डिबगिंग प्रयोजनों के लिए मैं इस सुंदर पॉपअप जे एस में काम लगता है:

console = chrome.extension.getBackgroundPage().console