2014-07-17 69 views
3

我在飛鏢編輯器(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... 
    }); 
    }); 
} 
+0

「無法加載」或「無法正常工作」是指什麼。任何錯誤消息? –

+0

我用錯誤信息的pastebin編輯了這個問題(似乎與csp有關)。如果您想親自嘗試https://github.com/jphilli85/grujin.git,請參閱回購協議。 –

+0

錯誤的第一行有加載聚合物的CSP問題;該行:引用「'。 –

回答

2

要在甘特的回答有點進一步擴大,我這是怎麼了能夠在Windows中使用硫化;允許作爲擴展程序或應用程序成功加載。

  1. http://nodejs.org/#download下載並安裝Node.js。
  2. 打開命令提示符,然後鍵入npm install -g vulcanize將vulcanize可執行文件安裝到%AppData%\npm\node_modules\vulcanize\bin\。 (我相信-g選項可以省略)
  3. 使用--csp選項在.\build\web\的HTML文件上運行可執行文件(有關其他命令選項,請參閱here)。

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

2

我嘗試過了,它在Dartium(36.0.1985.97(282401))看起來不錯,鍍鉻(版本36.0.1985.125)和Firefox(30.0),但不作爲擴展名在Dartium中。我不知道爲什麼它甚至加載爲web的擴展名,我認爲擴展名只能從app加載(請參閱https://github.com/dart-lang/chromedeveditor/tree/master/ide/app)。

似乎紙單元/核心元素已經在Chrome應用已知問題

+0

項目中沒有應用程序/目錄。我通常使用Chrome的擴展界面從build/web /目錄加載app/extension。你鏈接的問題看起來完全是我的問題,我會嘗試這個「硫化」的事情。 –

+0

硫化後仍有兩個內聯腳本。一個在內部,另一個在''內。這是兩個元素的圖像:http://oi60.tinypic.com/v5v12a.jpg。我試圖做[alt註冊](http://www.polymer-project.org/docs/polymer/polymer.html#altregistration),但該腳本仍然顯示在Chrome開發工具中。我應該離線下載這些元素並修改它們還是有更好的方法? –

+0

這些元素的版本應儘快發佈。也許這已經修復了。在此期間,您可以嘗試使用GitHub repo [email protected]:dart-lang/core-elements.git中的元素。 –

1

的NodeJS的使用並不需要 - 同樣的事情可以通過在pubspec.yaml文件中添加CSP選項的變壓器來實現:

務必後運行Pub Build任何代碼更改,並使用build/web下的文件作爲擴展名。