title: Render Mustache.js templates in a Chrome extension
body: <p>I want to inject some HTML into some websites with a Chrome extension, and it would be much nicer to use a template system like Mustache.js to do it.
  I can't figure out how to access the content of the template file, though.
  An example of what I'm trying to do:</p>
  
  <p>content_script.js</p>
  
  <pre><code>var image = chrome.extension.getURL('logo.jpg');
  var tb = Mustache.to_html(
      chrome.extension.getURL('template.html'),
      {
          "imageURL": image,
          "num": 5
      }
  );
  $('body').prepend(tb);
  </code></pre>
  
  <p>template.html</p>
  
  <pre><code>&lt;div id="topbar"&gt;
      &lt;img src="{{imageURL}}"&gt;&lt;/img&gt;
      {{num}}
  &lt;/div&gt;
  </code></pre>
  
  <p>The image shows up just fine, as you'd expect.
  And therefore loading <code>template.html</code> just returns the following string:
  <code>chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html</code></p>
  
  <p>How do I get the content of my template file as a string?  </p>
  
  <h1>Thanks to Boris Smus for the solution</h1>
  
  <p>content_script.js</p>
  
  <pre><code>var req = new XMLHttpRequest();
  req.open("GET", chrome.extension.getURL('template.html'), true);
  req.onreadystatechange = function() {
      if (req.readyState == 4 &amp;&amp; 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);
  </code></pre>