Rendering di modelli Mustache.js in un'estensione di Chrome

Question

Desidero inserire del codice HTML in alcuni siti Web con un'estensione di Chrome e sarebbe molto più utile utilizzare un sistema di template come Mustache.js per farlo. Non riesco a capire come accedere al contenuto del file di modello, però. Un esempio di quello che sto cercando di fare:

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> 

L'immagine si presenta bene, come ci si aspetterebbe. E quindi caricare template.html solo restituisce la seguente stringa: chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

Come ottengo il contenuto del mio file di modello come una stringa?

Grazie a Boris PMI per la soluzione

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

Answer 1

chrome.extension.getURL(file) restituisce l'URL assoluto del file richiesto, non il suo contenuto. Dovresti fare un XHR sul modello per ottenere il suo contenuto.

In alternativa, memorizzare il contenuto del modello nel codice HTML stesso utilizzando qualcosa come <script id="templ" type="text/x-template">...</script> e quindi fare riferimento al contenuto del modello tramite document.getElementById('templ').