如何在清单版本 2 中将模板与主干.js用于 Chrome 扩展程序

How to use Templates with Backbone.js for Chrome Extension in Manifest Version 2

本文关键字：js 程序 扩展 Chrome 用于 单版本 版本      更新时间：2023-09-26

im 试图为我的主干视图使用模板。我尝试使用underscore.template来让它运行。问题是，由于chrome扩展程序的manifest_version 2存在一些安全限制。我认为原因是因为不再允许内联块。在这个小示例中，我加载了一个模板并尝试呈现它。然后我得到错误：

未捕获错误：此上下文不允许从字符串生成代码。

我也尝试了Handlebars.js以及我的html文件中的模板。它在普通的浏览器窗口中工作。但它不是铬扩展名。

那么如何在带有 manifest_version 2 的 chrome 扩展程序中使用带有骨干.js模板呢？

带下划线（不起作用）：

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, {}))

带车把（不起作用）：

索引中的模板.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>

在我看来：

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

Underscore 和 Handlebars 模板都将字符串转换为 JavaScript 函数;例如，Underscore 是这样做的：

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

所以它构建了一些 JavaScript 并使用 new Function 来构建函数;车把可能会做类似的事情。显然，Chrome不希望您在扩展程序中做这样的事情。

您可以预编译模板，然后将函数作为简单的 JavaScript 嵌入到扩展中。对于下划线模板，您可以查看 source 属性：

source 属性在已编译的模板函数中可用，以便于预编译。

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

因此，您可以在打包扩展时t = _.template(your_template)，并将t.source文本作为 JavaScript 函数放入扩展中。

您可以使用车把做类似的事情（例如，请参阅handlebars_assets）。

它们都会使您的构建和打包过程复杂化，但如果 Chrome 不希望您在扩展中构建函数，那么您对此无能为力。

相关文章：