在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

如何将模板文件的内容作为字符串获取？

感谢Boris Smus的解决方案

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