Cargando html en elemento de página (extensión de cromo)

Question

Estoy tratando de escribir una extensión de Chrome que tendrá una barra en la parte superior de ciertas páginas web. Si tengo mi guión contenido de la siguiente manera:

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

todo se ve bien, pero lo que en última instancia quiero es algo como esto:

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

donde topbar.html es:

<h1>test</h1> 

Cuando lo cambio a esto, sin embargo, la página web es golpeada. La mayoría del contenido desaparece, y acabo viendo algunos de los anuncios. Ni siquiera puedo ver el encabezado de 'prueba'. Lo revisé para asegurarme de que no haya otra identificación de 'barra superior' en la página. ¿Qué pasa?

Answer 1

URL de un archivo dentro de una carpeta extenion tiene el siguiente formato:

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

Usted puede obtener esta ruta ejecutando:

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

Ahora bien, si se intenta hacer:

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

no le permitió debido a la política de origen cruzado. páginas de fondo no tienen esta limitación, por lo que tendrían que cargar HTML allí y pasar a dar lugar a un script contenido:

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

En un mundo real, probablemente leería topbar.html solo una vez y luego lo volvería a utilizar.

Answer 2

Si bien la solución anterior funciona, una cosa a tener en cuenta es que debe regresar verdadero desde el controlador de eventos para que el puerto de comunicación aún esté disponible después de que la llamada $ .ajax tenga éxito.

vea a continuación para obtener más información. https://code.google.com/p/chromium/issues/detail?id=307034