在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')引用模板的內容。