Визуализация шаблонов Mustache.js в расширении Chrome - PullRequest
Новая
       7

Визуализация шаблонов Mustache.js в расширении Chrome

9 голосов
/ 04 ноября 2011

Я хочу внедрить некоторый HTML в некоторые веб-сайты с расширением Chrome, и было бы намного лучше использовать систему шаблонов, такую ​​как 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

Как получить содержимое файла шаблона в виде строки?

Спасибо Борису Смусу за решение

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);

1 Ответ

8 голосов
/ 04 ноября 2011

chrome.extension.getURL(file) возвращает абсолютный URL запрошенного файла, а не его содержимое. Вы должны сделать XHR для шаблона, чтобы получить его содержимое.

В качестве альтернативы, сохраните содержимое вашего шаблона в самом HTML-файле, используя что-то вроде <script id="templ" type="text/x-template">...</script>, а затем сделайте ссылку на содержимое шаблона с помощью document.getElementById('templ').

...