Using Polymer in a Dart Chrome App

问题

I am trying to build an app with Dart and Polymer. But polymer scripts seem to be using eval() in web_components/platform.js:32. Has anyone managed to do this? I tried to change CSP but that helped in first place.

Does anyone have a working example?

Regards and Thanks Robert

EDIT

manifest.json:

{
  "name": "Animatr app",
  "version": "1",

  "author": "Robert Hartung",

  "manifest_version": 2,

  "icons": {"128": "animatr_icon.png"},

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

  "content_security_policy": "script-src 'self' unsafe-inline;"
}

main.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animatr app</title>
    <link rel="stylesheet" href="animatr_chrome_app.css">
    <link rel="import" href="packages/polymer/polymer.html">
  </head>
  <body>

    <script src="packages/chrome/bootstrap.js" defer></script>
    <script src="my_chrome_app.dart" type="application/dart;component=1"></script>    
  </body>
</html>

ERROR:

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. (chrome-extension://ofkfcbfhgkoglbgldcdokficikimdjji/packages/web_components/platform.js:32)
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

pubspec.yaml:

name: animatr_app
description: A sample Chrome packaged application
dependencies:
  chrome: any
  polymer: any
transformers:
- chrome
- polymer:
    entry_points:
    - app/animatr_chrome_app.html
    csp: 'true'

The app does not recognize polymer elements correctly.

回答1:

You can take a look at https://github.com/dart-lang/spark/tree/master/ide for an example Dart Chrome-Packaged-App. They also make heavily use of Polymer.

Maybe this is related https://github.com/Polymer/polymer/issues/252

It seems this is the related Dart bug https://code.google.com/p/dart/issues/detail?id=17409

回答2:

I have been struggling with the same issue, trying to run the simple wizard generated polymer app (the one with the counter) as a chrome packaged app. I have finally managed to at least run the javascript built version of it, trying to understand the csp issues. For many reason, it sounds like it cannot run native as the packaged app is loaded from the file system and not through pub serve. Loading the unpackaged extension from web/build was not working neither as is. The solution was to load xxx.html_bootstrap.dart.precompiled.js instead of xxx.html_bootstrap.js from the generated html file What i did was:

remove the chrome transformer as the polymer transformer already replace the dart script reference by a javascript script reference
add csp: true in the polymer transformer option (although it did work without it)
to avoid having to change manually the generated html to load the precompiled.js version, I wrote a simple transformer.
I can then load in Chrome (does not have to be Dartium as it is javascript) the unpacked extension from web/build once I run pub build (release mode needed)

I now simply have this warning:

Deprecation: Automatic generation of output for Content Security
Policy is deprecated and will be removed with the next development
release. Use the --csp option to generate CSP restricted output.

which means likely I would have to find a new hack soon...

来源：https://stackoverflow.com/questions/23710329/using-polymer-in-a-dart-chrome-app

标签

dart

google-chrome-app

dart-polymer