8
Quiero inyectar algo de HTML en algunos sitios web con una extensión de Chrome, y sería mucho mejor usar un sistema de plantillas como Mustache.js para hacerlo. Sin embargo, no puedo entender cómo acceder al contenido del archivo de la plantilla. Un ejemplo de lo que estoy tratando de hacer:Renderizar plantillas de Moustache.js en una extensión de Chrome
content_script.js
var image = chrome.extension.getURL('logo.jpg');
var tb = Mustache.to_html(
chrome.extension.getURL('template.html'),
{
"imageURL": image,
"num": 5
}
);
$('body').prepend(tb);
template.html
<div id="topbar">
<img src="{{imageURL}}"></img>
{{num}}
</div>
La imagen aparece muy bien, como era de esperar. Y por lo tanto la carga de template.html sólo devuelve la cadena siguiente: chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html
¿Cómo consigo el contenido de mi archivo de plantilla como una cadena?
Gracias a Boris Smus para la solución
content_script.js
var req = new XMLHttpRequest();
req.open("GET", chrome.extension.getURL('template.html'), true);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
var image = chrome.extension.getURL('logo.jpg');
console.log('Rendering Mustache.js template...');
var tb = Mustache.to_html(
req.responseText,
{
"imageURL": image,
"num": 5
}
);
$('body').prepend(tb);
}
};
req.send(null);