我在飛鏢編輯器(Win7Pro64)中編寫了飛鏢聚合物應用程序。在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
/EDIT
好吧,將該代碼:
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';"
}
如果裝載作爲擴展,在 「應用程序」:部分將被替換爲:
"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...
});
});
}
「無法加載」或「無法正常工作」是指什麼。任何錯誤消息? –
我用錯誤信息的pastebin編輯了這個問題(似乎與csp有關)。如果您想親自嘗試https://github.com/jphilli85/grujin.git,請參閱回購協議。 –
錯誤的第一行有加載聚合物的CSP問題;該行:引用「'。 –