Chrome extension: Uncaught Error: Code generation from strings disallowed for this context

问题

I am trying to use micro template engine in chrome extension and getting the following error : Uncaught Error: Code generation from strings disallowed for this context while parsing the template. Can you help me fixing this?

Manifest.json

manifest.json:
{
  "name": "YYYY",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.ico",
    "default_popup": "popup.html"
  }
}

popup.html:

<!doctype html>
<html ng-csp ng-app>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }
    </style>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="jquery.min.js"></script>
    <script src="popup.js"></script>


  </head>
  <body>
      <ul>
            <li></li>
      </ul>

        <script id="userlisttemplate" type="text/html">
           <% for(var i=0; i < items.length; i++) { var item = items[i]; %>               

                <li> 
                <%= item.UserName%>

                </li>                                                     

           <% } %>
        </script>
  </body>
</html>

popup.js:

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function () {
    var cache = {};

    this.tmpl = function tmpl(str, data) {
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn(data) : fn;
    };
})();


$.ajax({
    url: myurl,
    type: "GET",
    contentType: "application/json",
    success: function (response) {
        debugger;
        console.log(response);
        var data = response.data;
        var s = tmpl($('#userlisttemplate').html(), { items: data });
        $('body').append($(s));
    },
    error: function (jqXHR, textStatus, errorThrown) {
        $("#result").text(textStatus);
    }
});

回答1:

This templating library can't be used in a regular extension page because it uses new Function() with a string, which is now disallowed under Chrome's new Content Security Policy for extensions created with manifest version 2. see here

回答2:

You're using the tmpl function incorrect, try this:

var s = tmpl('userlisttemplate', { items: data });

Also in your template you're expecting items to be an array, but the json returned is an object (unless manifest.json is not the actual requested json, in which case I'll need the returned data)

manifest.json also does not include any UserName mentioned in the template

trying the following I do get results:

var s = tmpl('userlisttemplate',{
        items: [{
            "UserName": "test1"
        },{
            "UserName": "test2"
        },{
            "UserName": "test3"
        }]
});
$('body').append($(s));