JavaScript templates in Chrome plugins

Question

I am looking for a JavaScript Template Engine of some sorts that is supported in Chrome Extensions preferably without setting 'unsafe-eval'.

Now looking at other questions in here they suggest Pre-compiling templates before deployment, however that doesn't work for me as I wan't to allow the "user" to change the template on the fly (well through the plugin options)... This is also Why I would like a Template engine that doesn't require 'unsafe-eval' because the user ain't meant to be able to inject code. Merely to make very simple templates that uses properties from a JSON Object.

String replacement is almost enough... but only almost, some simple evaluations is also needed... "Like if x greater than y output a otherwise b"

I have been using doT.js for a while now which would be sufficiently simple, so something that borders to the semantics of that or is more simple.

Here is an example of how simple the would be in doT...

<div class="card">
    <header class="header {{= it.type }}">
        <div class="project_id">
            <div class="project">{{= it.project }}</div>
            <div class="id">{{= it.id }}</div>
        </div>
        <div class="title">
            <div class="nooverflow">{{= it.type }}: {{= it.summary }}</div>
        </div>
        <div class="sizeheader_size">
            <div class="sizeheader">RELATIVE SIZE</div>
            <div class="size">{{= it.estimate }}</div>
        </div>
    </header>
    <section class="description">
        <div class="nooverflow">{{= it.description }}</div>
    </section>
    <footer class="footer">
        <div class="hours">
            <span class="marked"></span>
            <span class="{{?? it.days > 1 }}marked{{??}}"></span>
            <span class="{{?? it.days > 2 }}marked{{??}}"></span>
            <span class="{{?? it.days > 3 }}marked{{??}}"></span>
            <span class="{{?? it.days > 4 }}marked{{??}}"></span>
            <span class="{{?? it.days > 5 }}marked{{??}}"></span>
            <span class="{{?? it.days > 6 }}marked{{??}}"></span>
            <span class="{{?? it.days > 7 }}marked{{??}}"></span>
            <span class="{{?? it.days > 8 }}marked{{??}}"></span>
            <span class="{{?? it.days > 9 }}marked{{??}}"></span>
        </div>
        <div class="priorityheader_priority">
            <div class="priorityheader">PRIORITY</div>
            <div class="priority">{{= it.priority }}</div>
        </div>
    </footer>
</div>

So as you can see, it isn't the most complex conditionals...

Answer 1

You can render your templates in a sandbox page which contains your templates and your template engine. This is done by sending your data in a message to this sandbox page. After rendering a template the sandbox will send another message back containing the rendered template html which can further be used in a content script or popup.

This article describes the process in more detail. You should also be familiar with messaging in Chrome extensions.