在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>

正如您所料,图像显示得很好.因此loading 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以获取其内容.

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