javascript - सामग्री-स्क्रिप्ट से पृष्ठ-स्तर तक डेटा कैसे पास करें?




jquery google-chrome-extension (2)

मैं अपने सभी जेएस कोड को सामने वाले पृष्ठ में इंजेक्शन कर रहा हूं, लेकिन इसे UI और सामान के लिए चित्रों की आवश्यकता है, जो केवल क्रोम के साथ ही आयात किया जा सकता है। Extensions.getUrl और केवल सामग्री-स्क्रिप्ट से कहा जा सकता है, इसलिए मैंने पाया है कितने सलाह, सामग्री पृष्ठ पर डेटा कैसे पहुंचाएं, और इसके बारे में कुछ भी नहीं कि पास डेटा कैसे वापस पास किया जाए, क्या यह संभव है?

मेरा कोड अब इस तरह दिखता है:

मेरा जेएस कोड, जिसे अन्य कोड के साथ इंजेक्ट किया जाएगा:

var Content = {};
$(document).contentReady = function(content) {
    Content = content;
    $(document).ready(function () {/*cool stuff here, that require content*/});
}
var event = new CustomEvent('LoadContent');
window.dispatchEvent(event);

सामग्री स्क्रिप्ट:

document.querySelector('head').appendChild(jsCode);
window.addEventListener("LoadContent", function(evt) {
    var content =
    {
        data:   "url(" + chrome.extension.getURL('content.smth') + ")"
    };
    document.contentReady(content);
}, false);

और जाहिर है, मुझे document.contentReady is not a function मिलती document.contentReady is not a function कॉन्ट्रेंट document.contentReady is not a function लेकिन दस्तावेज़ में फ़ंक्शन को घोषित करने के बारे में केवल (!) सलाह दी जाती है कि कैसे googling के बारे में 2 घंटे के बाद सामग्री-स्क्रिप्ट से वापस डेटा को पास करें


आप एक नया स्क्रिप्ट टैग बनाकर पृष्ठ पर जेएस डेटा पास कर सकते हैं। उदाहरण के लिए:

function injectScript(code) {
    var body = document.getElementsByTagName('body')[0];
    var s = document.createElement('script');
    s.innerHTML = code;
    body.appendChild(s);
}
injectScript('var foo = 2;');

इसलिए आपके विशेष उदाहरण के लिए, आपको ऐसा करने में सक्षम होना चाहिए:

injectScript('document.contentReady({data: url(' + blahblah + '})');

सुंदर नहीं (जब आप सामग्री लिपियों को ओवरराइट करने के साथ काम कर रहे हैं तो क्या है)? लेकिन यह काम करता है


Content Scripts पृष्ठ पर सामान्य स्क्रिप्ट के साथ विंडो वस्तु को साझा नहीं करती। वे दोनों अलग-अलग संदर्भों पर काम करते हैं

आपके मामले में, आप एक ईवेंट श्रोता को विंडो पर दर्ज कर रहे हैं और अन्य संदर्भ (विंडो) पर ईवेंट के लिए सुन रहे हैं। इसलिए, आपके ईवेंट श्रोता को कभी भी फोन नहीं किया जाएगा।

हालांकि, एक वैकल्पिक दृष्टिकोण है जिसे मैं सामग्री स्क्रिप्ट के बीच संवाद करने के लिए देख सकता हूं और सामान्य स्क्रिप्ट MutationObserver का उपयोग कर रहा है।

विचार

  1. कुछ आईडी के साथ एक नोड को परिभाषित करें जिसके तहत आप एक ईवेंट से संबंधित उप-नोड बनाएंगे।
  2. अपनी स्क्रिप्ट में मस्टेशन ऑब्जर्वर को पंजीकृत करें
  3. सामग्री स्क्रिप्ट से डेटा के साथ data-* एपीआई जोड़ें।

कार्यान्वयन उदाहरण

सामग्री स्क्रिप्ट
var submitEvent = function(category, action, label) {
  var eventObserverPlaceholder = document.getElementById('events-observer-placeholder'),
    $eventEl = $('<span></span>').attr({
      'data-category': category,
      'data-action': action,
      'data-label': label
    });

  eventObserverPlaceholder.appendChild($eventEl.get(0));
};

उत्परिवर्तन निरीक्षक दर्ज करने के लिए सामान्य स्क्रिप्ट:

RQ.Methods.addObserverForEvents = function(targetNode) {
  var observer = new MutationObserver(RQ.Methods.handleMutationList);

  // Notify me when a new child is added
  var observerConfig = {
    attributes: false, 
    childList: true, 
    characterData: false 
  };

  observer.observe(targetNode, observerConfig);
  return observer;
};

RQ.mutationObserver = RQ.Methods.addObserverForEvents(document.getElementById('events-observer-placeholder'));

लिंक

  1. https://davidwalsh.name/mutationobserver-api
  2. https://developer.mozilla.org/en/docs/Web/API/MutationObserver

काम का उदाहरण:

मैंने Google Analytics को ईवेंट सबमिट करने के लिए अनुरोध से क्रोम एक्सटेंशन में समान दृष्टिकोण का उपयोग किया है

  1. सामग्री स्क्रिप्ट: https://github.com/requestly/chrome-extension/blob/master/src/Shared/utils.js#L26
  2. सामान्य स्क्रिप्ट: https://github.com/requestly/web/blob/gh-pages/js/scripts/tracker.js#L35






content-script