पृष्ठ तत्व (क्रोम एक्सटेंशन) में एचटीएमएल लोड हो रहा है

Question

मैं एक क्रोम एक्सटेंशन लिखने की कोशिश कर रहा हूं जिसमें कुछ वेबपृष्ठों के शीर्ष पर एक बार होगा। अगर मैं इस तरह मेरी सामग्री स्क्रिप्ट है:

$('body').prepend('<div id="topbar"><h1>test</h1></div>'); 

सब कुछ अच्छा लग रहा है, लेकिन क्या मैं अंत में चाहते हैं कुछ इस तरह है:

$('body').prepend('<div id="topbar"></div>'); 
$('#topbar').load('topbar.html'); 

जहां topbar.html है:

<h1>test</h1> 

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

chrome.extension.getURL("topbar.html") 

अब:

chrome-extension://<ID>/topbar.html 

आप चलाकर इस पथ प्राप्त कर सकते हैं: एक extenion फ़ोल्डर के अंदर एक फ़ाइल के

Answer 1

URL निम्न फ़ॉर्मेट है

$('#topbar').load(chrome.extension.getURL("topbar.html")); 

यह क्रॉस-मूल नीति के कारण आपको नहीं जाने देगा। पृष्ठभूमि पृष्ठ इस सीमा नहीं है, तो आप एक सामग्री स्क्रिप्ट के लिए परिणाम वहाँ HTML लोड करने की जरूरत है और पारित होगा:

content_script.js:

chrome.extension.sendRequest({cmd: "read_file"}, function(html){ 
    $("#topbar").html(html); 
}); 

background.html:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if(request.cmd == "read_file") { 
     $.ajax({ 
      url: chrome.extension.getURL("topbar.html"), 
      dataType: "html", 
      success: sendResponse 
     }); 
    } 
}) 

वास्तविक दुनिया में आप शायद केवल एक बार topbar.html पढ़ लेंगे और फिर इसका पुन: उपयोग करेंगे।

Answer 2

जबकि इसके बाद के संस्करण समाधान काम करता है, पर ध्यान देना एक बात है कि आप ईवेंट हैंडलर से सच वापस जाने के लिए इतना है कि संचार पोर्ट अभी भी उपलब्ध $ .ajax कॉल सफल होता है के बाद हो सकता है की जरूरत है।

अधिक जानकारी के लिए नीचे देखें। https://code.google.com/p/chromium/issues/detail?id=307034