Cómo usar plantillas con Backbone.js para Chrome Extension en Manifest Version 2

Question

Estoy tratando de usar plantillas para mis vistas de red troncal. Lo intenté con underscore.template para ejecutarlo. El problema es que dado que manifest_version 2 de las extensiones de Chrome existen algunas restricciones de seguridad. Creo que la razón es porque los bloques en línea ya no están permitidos. En este pequeño ejemplo, cargo una plantilla e intento renderizarla. Entonces obtengo el error:

Error no detectado: generación de código de cadenas no permitidas para este contexto.

Lo probé también con Handlebars.js y una plantilla directamente en mi archivo html. Funciona en una ventana de navegador normal. Pero no es una extensión de Chrome.

Entonces, ¿cómo puedo usar plantillas con backbone.js en una extensión de cromo con manifest_version 2?

Con guión bajo (no funciona):

define [ 
    'jquery' 
    'backbone' 
    'lib/facade' 
    'text!templates/loginTemplate.js' 
], 
($, Backbone, facade, LoginTemplate) -> 
    'use strict' 
    class LoginView extends Backbone.View 
    tagName: 'div' 
    events: { 

    } 

    initialize: (options) -> 
     @el = options.el 

    render: -> 
     console.log 'LoginView: render()' 
     $(@el).html(_.template(LoginTemplate, {})) 

con un manillar (no funciona):

plantilla en index.html:

<!-- templates --> 
    <script id="loginTemplate" type="text/x-handlebars-template"> 
    <form class="form-horizontal"> 
     <fieldset> 
     <legend>Login</legend> 
     <div class="control-group"> 
      <label class="control-label" for="email">Email:</label> 
      <div class="controls"> 
      <input type="text" class="input-xlarge" id="email" name="email"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="password">Passwort:</label> 
      <div class="controls"> 
      <input type="password" class="input-xlarge" id="password" name="password"> 
      </div> 
     </div> 
     <div class="form-actions"> 
      <button type="submit" class="btn btn-primary">Login</button> 
     </div> 
     </fieldset> 
    </form> 
    </script> 

y en mi opinión:

define [ 
    'jquery' 
    'backbone' 
    'lib/facade' 
], 
($, Backbone, facade) -> 
    'use strict' 
    class LoginView extends Backbone.View 
    tagName: 'div'  
    events: { 

    } 

    initialize: (options) -> 
     @el = options.el 

    render: -> 
     console.log 'LoginView: render()', $("#loginTemplate") 
     $(@el).html(Handlebars.compile($("#loginTemplate").html())) 

Answer 1

Ambos Un las plantillas de derscore y Handlebars convierten cadenas a funciones de JavaScript; por ejemplo, Underscore does it like this:

source = "var __t,__p='',__j=Array.prototype.join," + 
    "print=function(){__p+=__j.call(arguments,'')};\n" + 
    source + "return __p;\n"; 

var render = new Function(settings.variable || 'obj', '_', source); 

por lo que construye algo de JavaScript y utiliza new Function para construir una función; Los manubrios probablemente hagan algo similar. Aparentemente, Chrome no quiere que hagas cosas así en una extensión.

Puede precompilar la plantilla y luego incrustar la función en su extensión como un simple código JavaScript. Para las plantillas Guión bajo, usted podría look at the source property:

The source property is available on the compiled template function for easy precompilation.

<script> 
    JST.project = <%= _.template(jstText).source %>; 
</script> 

Por lo que puede t = _.template(your_template) mientras que el envasado de su extensión y poner el texto t.source en su extensión como una función de JavaScript.

Puede hacer cosas similares con los manubrios (consulte handlebars_assets por ejemplo).

Ambos complican el proceso de creación y empaquetado, pero si Chrome no quiere que construyas funciones en una extensión, entonces no hay mucho que puedas hacer al respecto.