Renderowanie szablonów Mustache.js w rozszerzeniu do Chrome

Question

Chcę wstrzyknąć trochę kodu HTML do niektórych witryn z rozszerzeniem do przeglądarki Chrome i byłoby o wiele lepiej użyć systemu szablonów, takiego jak Mustache.js, aby to zrobić. Nie mogę jednak dowiedzieć się, jak uzyskać dostęp do zawartości pliku szablonu. Przykładem tego, co próbuję zrobić:

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> 

Obraz przedstawia się dobrze, jak można się spodziewać. A zatem ładuje template.html prostu zwraca następujący ciąg: chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

Jak mogę uzyskać zawartość mojego pliku szablonu jako ciąg?

Dzięki Boris SMUs do rozwiązania

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) zwraca bezwzględny adres URL żądanego pliku, a nie jego treści. Powinieneś zrobić XHR na szablonie, aby otrzymać jego zawartość.

Można również zapisać zawartość szablonu w samym kodzie HTML, używając czegoś podobnego do <script id="templ" type="text/x-template">...</script>, a następnie odnieść się do zawartości szablonu poprzez document.getElementById('templ').