CODEWITHSUNDEEP
dartdart-polymerdart-editor
Jacob Phillips
Jacob Phillips

Reputation: 9254

Dart+Polymer as a webpage/app/extension not working outside of Dart Editor

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...
    });
  });
}

Upvotes: 3

Views: 677

Answers (3)

Benjineer
Benjineer

Reputation: 1680

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.

Upvotes: 1

Jacob Phillips
Jacob Phillips

Reputation: 9254

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.

  1. Download and install Node.js from http://nodejs.org/#download.
  2. Open a command prompt, and type npm install -g vulcanize to install the vulcanize executable to %AppData%\npm\node_modules\vulcanize\bin\. (I believe the -g option can be omitted)

  3. Run the executable on the HTML file in .\build\web\ using the --csp option (see here for other command options).

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

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

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

Upvotes: 2

Related Questions