Sayfa elemanına html yükleniyor (krom uzantısı)

Question

Belirli web sayfalarının üst kısmında bir çubuk olacak bir Chrome uzantısı yazmaya çalışıyorum. Bu gibi benim içerik komut dosyası varsa:

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

her şey iyi görünüyor, ama ne sonuçta istediğiniz böyle bir şey olur: topbar.html

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

geçerli:

<h1>test</h1> 

Bunu değiştirdiğimde, web sayfası bloke edilir. İçeriğin çoğu kayboluyor ve sonuçta bazı reklamları görüyorum. 'Test' başlığını bile göremiyorum. Sayfada başka bir "topbar" kimliği olmadığından emin olmak için kontrol ettik. Sorun nedir? Tek yapmanız denerseniz

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

Şimdi:: Sen çalıştırarak bu yolu alabilirsiniz

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

: Bir extenion klasörünün içindeki bir dosyanın

Answer 1

URL'si şu biçimde olur

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

, çapraz kaynaklı politikadan dolayı size izin vermez. Arkaplan sayfaları bu sınırlama yoktur, bu yüzden bir içerik komut dosyasına neden orada HTML yüklemek gerekir ve geçerdi:

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 
     }); 
    } 
}) 

Gerçek bir dünyada, topbar.html'yi yalnızca bir kez okuyacak ve sonra yeniden kullanacaksınız.

Answer 2

Yukarıdaki çözüm işe yarıyorsa da dikkat etmeniz gereken bir şey, olay işleyicisinden true geri dönmeniz gerektiğidir, böylece iletişim bağlantı noktası $ .ajax çağrısı başarılı olduktan sonra kullanılabilir olur. Daha fazla bilgi için aşağıya bakın. https://code.google.com/p/chromium/issues/detail?id=307034