admin管理员组

文章数量:1323714

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:

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>

The image shows up just fine, as you'd expect. And therefore loading template.html just returns the following string: chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

How do I get the content of my template file as a string?

Thanks to Boris Smus for the solution

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

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:

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>

The image shows up just fine, as you'd expect. And therefore loading template.html just returns the following string: chrome-extension://badmldhplgbmcbkolbmkhbamjaanjejj/template.html

How do I get the content of my template file as a string?

Thanks to Boris Smus for the solution

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

• javascript
• google-chrome-extension
• mustache

Share Improve this question Follow edited Nov 3, 2011 at 21:52 daharon asked Nov 3, 2011 at 21:26 daharondaharon 2,01022 gold badges1818 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

chrome.extension.getURL(file) returns the absolute URL of the requested file, not its contents. You should do an XHR on the template to get its contents instead.

Alternatively, store the contents of your template in your HTML itself using something like <script id="templ" type="text/x-template">...</script>, and then reference the contents of the template via document.getElementById('templ').

本文标签： javascriptRender Mustachejs templates in a Chrome extensionStack Overflow