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> 

画像は、うまく表示されます。 chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

私は文字列として私のテンプレート・ファイルの内容を取得するにはどうすればよい： そのためには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)は、要求されたファイルではなく、その内容の絶対URLを返します。代わりにその内容を取得するには、テンプレートでXHRを実行する必要があります。

また、<script id="templ" type="text/x-template">...</script>のような形式でテンプレートの内容をHTML自体に保存してから、テンプレートの内容をdocument.getElementById('templ')で参照してください。