如何在Chrome应用程序中使用Polymer构建侧导航的示例？

我正在构建一个Chrome应用程序。我想使用。我喜欢它们在左侧导航栏中显示的侧导航：一个项目的左侧导航栏，可以更改主窗口中的内容

我在Chrome应用程序的限制下努力让它正常工作。应用程序面临严格的内容安全策略（CSP），该策略禁止使用eval、内联脚本和

window.history

操作

在过去的几个小时里，我取得了一些进展，但遇到了很多问题。从他们的演示代码开始，我可以让应用程序呈现侧导航栏，但不能呈现内容卡。我正在使用

suverize

和

crisper

，但仍然无法使其正常工作。如果不是404（为什么导入文件时会加载文件？），那就是一个可疑的“拒绝将字符串作为Javascript求值”警告，它似乎与看似无害的行

var noop=Function（）相关联

有人知道这种架构的一些基本的、对Chrome应用程序友好的例子吗？这看起来很基本，但事实证明很困难。
好吧，第二天的奋斗取得了一些小小的成功。我现在可以在Chrome应用程序中显示他们的。有几件事必须改变

首先，Chrome应用程序上没有
window.history
API系列。因此，
遍历HTML导入语句以尝试减少网络负载。提取所有内联脚本，并将它们转换为带有
src
属性的单个
标记，允许它在Chrome应用程序中执行。下一行将现有的
index.html
替换为一个适用于Chrome应用程序的保险箱。（注意替换，因此请确保先复制原始的
index.html
。）


硫化--内联脚本--内联css index.html | crisper--html index.html--js index.js

现在我们有了一个
index.html
，没有任何内联脚本可以作为Chrome应用程序呈现。截至2016年7月30日，仍存在两个问题。首先，Polymer试图注册一名服务人员。打开
index.js
并删除
serviceWorker.register
调用。其次，在
index.js
中找到
\u boundEffect
的定义。出于某种原因，Chrome应用程序认为
var noop=Function（）需要
eval
，但它不执行它。将此行替换为
var noop=（）=>{}
。这基本上是一样的，但出于某种原因，Chrome应用程序允许这样做

完成所有这些之后，在你的Chrome应用程序中加载
index.html
，演示程序就可以运行了

Huzzah.
试试谷歌搜索，这是一个很好的例子。这有助于我澄清我的问题，我承认这是一个模糊的问题。不幸的是，我对聚合物的理解不够，无法确切地知道我在挣扎什么——我的挣扎是模糊的。我已经找到了这个例子，我知道在Chrome应用程序中至少可以使用一些聚合物元素。然而，这不是一个解决方案，原因有二。首先，这是一种长期被遗弃的聚合物。其次，从我对该框架的理解来看，我不能将
纸质标签
nav系统换成左侧导航条。我正在寻找一个Chrome应用程序安全的左导航架构。@Mr_Perfect您需要使用它还是您认为它会增强响应？
<!-- <app-location route="{{route}}"></app-location> -->
<app-route
    route="{{page}}"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<app-drawer-layout fullbleed>

  <!-- Drawer content -->
  <app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="{{page}}" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" >View One</a>
      <a name="view2" >View Two</a>
      <a name="view3" >View Three</a>
      <a name="new-view" href="/new-view">New View</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>My App</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="{{page}}" attr-for-selected="name">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-new-view name="new-view"></my-new-view>
    </iron-pages>

  </app-header-layout>

</app-drawer-layout>

<link rel="import" href="my-view1.html">
<link rel="import" href="my-view2.html">
<link rel="import" href="my-view3.html">
<link rel="import" href="my-new-view.html">