4

Chrome 拡張機能でマイクロ テンプレート エンジンを使用しようとしていUncaught Error: Code generation from strings disallowed for this context ますが、テンプレートの解析中に次のエラーが発生します。これを修正するのを手伝ってもらえますか?

マニフェスト.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);
    }
});
4

4 に答える 4

2

このテンプレート ライブラリは、通常の拡張機能ページでは使用できませんnew Function()。これは、マニフェスト バージョン 2 で作成された拡張機能に対する Chrome の新しいコンテンツ セキュリティ ポリシーで許可されていない文字列を使用しているためです。こちらを参照してください。

于 2012-08-15T21:09:37.237 に答える
0

のすべてのインスタンスを置き換えてみて、socket.io.jsが機能"new Function"するようにしました。"function(){}"

于 2012-10-24T22:15:42.097 に答える
0

popup.html で内部スクリプトを使用しないでください。コンテンツ セキュリティ ポリシーを参照してください。

于 2012-08-15T13:23:59.817 に答える
0

tmpl 関数を正しく使用していません。これを試してください。

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

また、テンプレートでは、アイテムが配列であると予想していますが、返されるjsonはオブジェクトです（manifest.json実際に要求されたjsonでない場合を除きます。その場合、返されたデータが必要になります）

UserNamemanifest.jsonには、テンプレートに記載されているものも含まれていません

次のことを試してみると、結果が得られます:

var s = tmpl('userlisttemplate',{
        items: [{
            "UserName": "test1"
        },{
            "UserName": "test2"
        },{
            "UserName": "test3"
        }]
});
$('body').append($(s));
于 2012-08-15T11:10:54.957 に答える