Question

我在Dart编辑器（Win7Pro64）中编写了一个Dart-Polymer应用程序。一切都在Dartium中完美运行，并在Chrome中作为Javascript运行，但我无法在IDE之外加载工作版本。

在Chrome（36.0.1985.103 beta-m）中打开html文件（只有一个）时，背景图片就在那里，但UI的其余部分不存在或没有样式（纸质元素似乎不在那里）。 Dart / JavaScript似乎也没有执行。

将其作为解压扩展程序加载到Chrome中（作为应用程序或扩展程序，请参阅下面的清单）会产生几乎完全相同的结果。 UI组件都在那里，但没有样式，没有Dart / JavaScript功能。但是，纸张纹波效果确实有效，所以可能只是我的脚本没有运行。

如果重要，我不仅尝试了build/web/文件夹，还尝试了out/web/和web/文件夹。

编辑：app.html将在Chrome中成功打开（来自Windows）。但是，在加载Chrome应用或加载时，我会收到大量错误：http://pastebin.com/KRXnaTXi。由于它们似乎都与CSP相关，所以这是第一个：

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed 
source of script in the following Content Security Policy directive: "default-src 
'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 
'default-src' is used as a fallback.
 observe.js:988
(anonymous function) observe.js:988
(anonymous function) observe.js:992
(anonymous function) wrappers.js:374

/修改

好的代码：

pubspec.yaml

作为扩展程序加载时，我使用了csp: true并确保构建的html文件使用了*.precompiled.js脚本。

name: app
description: desc
dependencies:
    polymer: ">=0.12.0 <0.13.0"
    core_elements: ">=0.1.1 <0.2.0"
    paper_elements: ">=0.1.0+2 <0.2.0"
    crypto: ">=0.9.0"
    cipher: ">=0.7.0 <0.8.0"
    lawndart: ">=0.6.5 <0.7.0"
    chrome: ">=0.6.0 <0.7.0"    
transformers:
- chrome
- polymer:
    entry_points: 
    - web/app.html
    csp: false

即使不需要从编辑器运行应用程序（在Dartium / Chrome标签页中），我也有一个清单可以将其作为应用程序加载。

的manifest.json

{
  "manifest_version": 2,

  "name": "app",
  "description": "desc",
  "version": "0.1.0",

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },

  "icons": {
    "128": "images/icon128.png",
    "48": "images/icon48.png",
    "16": "images/icon16.png"
  },

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';" 
}

如果作为扩展程序加载，“app”：部分将替换为：

"browser_action": {
    "default_icon": "images/icon16.png",
    "default_popup": "app.html"    
},

测试的另一件事是--deploy中的build.dart参数。

import 'package:polymer/builder.dart';

main(args) {
  build(entryPoints: ['web/grujin.html'],
        options: parseOptions(args));
//        options: parseOptions(['--deploy']));
}

app.html

<!DOCTYPE html>
<html>
<head>
<!-- <script src='packages/web_components/platform.js'></script>
     not necessary anymore with Polymer >= 0.14.0 -->
<script src='packages/web_components/dart_support.js'></script>
<link rel='import' href='packages/paper_elements/paper_input.html'>
<!-- Other imports ... -->
<link rel='stylesheet' href='app.css' shim-shadowdom>
<script src='packages/browser/dart.js'></script>
</head>
<body fullbleed unresolved>
<paper-input id='passwd' label='password'></paper-input>
<!-- ... -->
<script>
  document.addEventListener('polymer-ready', function() {
    var navicon = document.getElementById('navicon');
    var drawerPanel = document.getElementById('drawerPanel');
    navicon.addEventListener('click', function() {
      drawerPanel.togglePanel();
    });
  });
</script>
<script type='application/dart' src='app.dart'></script>
</body>
</html>

app.dart

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'package:core_elements/core_input.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:paper_elements/paper_checkbox.dart';
import 'package:paper_elements/paper_button.dart';
import 'package:paper_elements/paper_fab.dart';
import 'package:paper_elements/paper_slider.dart';
import 'package:lawndart/lawndart.dart';

export 'package:polymer/init.dart';

void main() {      
  initPolymer().run(() {
    // code here works most of the time
    Polymer.onReady.then((_) {     
      // some things must wait until onReady callback is called
      // for an example look at the discussion linked below

      PaperInput passwd = querySelector('#passwd');              
      InputElement input = passwd.shadowRoot.olderShadowRoot.querySelector('input');
      input.type = 'password';
      // initialize polymer elements, etc...
    });
  });
}

Answer 1

我尝试了它，它在Dartium（36.0.1985.97（282401）），Chrome（版本36.0.1985.125）和Firefox（30.0）中看起来很好，但在Dartium中没有作为扩展。我想知道为什么它甚至从web作为扩展加载我认为扩展应该仅从app加载（参见https://github.com/dart-lang/chromedeveditor/tree/master/ide/app）。

似乎纸质元素/核心元素在Chrome应用中存在已知问题

Answer 2

为了进一步扩展Gunter的答案，这就是我在Windows中使用硫化的方法;允许成功加载为扩展程序或应用程序。

从http://nodejs.org/#download下载并安装Node.js.
打开命令提示符，然后键入npm install -g vulcanize以将硫化可执行文件安装到%AppData%\npm\node_modules\vulcanize\bin\。（我相信可以省略-g选项）
使用.\build\web\选项在--csp中的HTML文件上运行可执行文件（有关其他命令选项，请参阅here）。

vulcanize --csp -o build\web\app.html build\web\app.html

Answer 3

不需要使用NodeJS - 通过向pubspec.yaml文件中的变换器添加CSP选项可以实现同样的目的：

transformers:
  - polymer:
      csp: true
  - $dart2js:
      csp: true

请务必在更改代码后运行Pub Build，并使用build/web下的文件作为您的扩展程序。

Dart + Polymer作为网页/应用/扩展程序，无法在Dart编辑器外工作

3 个答案: