在Chrome扩展中渲染Mustache.js模板

Question

我想用Chrome扩展插件将某些HTML注入某些网站，并且使用像Mustache.js这样的模板系统可以更好地完成此操作。 但我无法弄清楚如何访问模板文件的内容。 的什么，我试图做一个例子：

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> 

的图像显示出来就好了，正如你所期望。 也因此加载template.html刚刚返回以下字符串： chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

我如何得到我的模板文件的内容作为一个字符串？

感谢鲍里斯的SMU为解决

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)返回所请求的文件的绝对地址，而不是其内容。您应该在模板上执行XHR以获取其内容。

或者，使用类似<script id="templ" type="text/x-template">...</script>的内容将模板的内容存储在HTML本身中，然后通过document.getElementById('templ')引用模板的内容。