Dart+Polymer as a webpage/app/extension not working outside of Dart Editor
Question
I wrote a Dart-Polymer app in Dart Editor (Win7Pro64). Everything works perfectly in Dartium and running as Javascript in Chrome, but I am unable to load a working version outside of the IDE.
When opening the html file (there's only one) in Chrome (36.0.1985.103 beta-m), the background image is there, but the rest of the UI is nonexistent or unstyled (paper elements seem to not be there). Dart/JavaScript also doesn't appear to be executing.
Loading it as an unpacked extension into Chrome (as an app or extension, see manifests below) results in almost exactly the same result. UI components were all there, but unstyled and without Dart/JavaScript functionality. However, the paper-ripple effect did work, so maybe it is just my scripts not running.
In case it matters, I tried not only the build/web/ folder, but the out/web/ and web/ folders too.
EDIT : app.html will open in Chrome successfully (from Windows). But, when loading as a Chrome app or exension, I get a whole slew of errors: http://pastebin.com/KRXnaTXi . Since they all seem CSP related, here is the first:
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
Okay on to the code:
pubspec.yaml
When loading as an extension, I used csp: true and made sure the built html file used the *.precompiled.js script.
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
Even though it's not needed to run the app from the editor (in a Dartium/Chrome tab), I have a manifest for loading it as an app.
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';"
}
If loading as an extension, the "app": section would be replaced by:
"browser_action": {
"default_icon": "images/icon16.png",
"default_popup": "app.html"
},
Another thing tested was the --deploy argument in 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...
});
});
}
3 answers
solution1
2 2014-07-18 11:43:43
I tried it and it looks fine in Dartium (36.0.1985.97 (282401)), Chrome (Version 36.0.1985.125) and Firefox (30.0) but not in Dartium as extension. I wonder why it even loads as extension from web I thought extensions are supposed to be loaded from app only (see https://github.com/dart-lang/chromedeveditor/tree/master/ide/app ).
It seems paper-elements/core-elements have known issues in Chrome Apps
solution2
2 ACCPTED 2014-07-21 07:30:35
To expand on Gunter's answer a little further, this is how I was able to use vulcanize in Windows; allowing successful loading as an extension or app.
- Download and install Node.js from http://nodejs.org/#download .
- Open a command prompt, and type
npm install -g vulcanizeto install the vulcanize executable to%AppData%\\npm\\node_modules\\vulcanize\\bin\\. (I believe the -g option can be omitted) Run the executable on the HTML file in
.\\build\\web\\using the--cspoption (see here for other command options).vulcanize --csp -o build\\web\\app.html build\\web\\app.html
solution3
1 2015-04-02 06:32:04
Use of NodeJS is not required - the same thing can be achieved by adding CSP options to the transformers in your pubspec.yaml file:
transformers:
- polymer:
csp: true
- $dart2js:
csp: true
Be sure to run Pub Build after any code changes, and use the files under build/web for your extension.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.