Polymer in a Chrome Packaged Apps

[Hoa V. Dinh]

Hi polymer dev,

I'm trying to run Polymer in a Chrome Packaged Apps in Chrome Canary.

1. I checkout the following:

https://github.com/dinhviethoa/polymer-simple

polymer-simple/polymer/ folder contains the minified version of platform and polymer.

2. In chrome://flags, I enabled the following options:

> Enable experimental Web Platform features. Mac, Windows, Linux, Chrome OS, Android

Enable experimental Web Platform features that are in development. #enable-experimental-web-platform-features

> Enable apps-devtool app. Mac, Windows, Linux, Chrome OS

An app to develop apps / extensions. #enable-apps-devtool-app

3. Restart Chrome

4. In chrome://extensions, I checked enabled "Developer Mode".

5. In a new tab page, from the application list, I run "Apps Developer Tools".

6. I used "Load Unpacked" and chose the folder polymer-simple/

7. In the list of application, I used the "launch" option for "polymer simple".

-> I don't see the polymer UI rendering.

8. Back in "Apps Developer Tools" window, polymer simple > Inspect views > simple.html.

It opens the web inspector. I clicked on "Console".

The following logs shown:

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.

 tap.js:76

(anonymous function) tap.js:76

Uncaught TypeError: Cannot redefine property: shadowRoot deprecated.js:12

Uncaught ReferenceError: Polymer is not defined build.js:1

Could you help me investigate what's going on?

Especially, "shadowRoot redefined" and "Polymer not defined" looks strange.

Thanks!

-- 

Hoa V. Dinh

[Eric Bidelman]

The "shadowRoot redefined" error usually comes from loading platform.min.js and polymer.min.js. You should only need polymer.min.js. 

There's also an old chrome app example here that uses polymer.sandbox.js:

https://github.com/Polymer/polymer-chrome-app

Folks, what's the status of polymer-chrome-app? 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Daniel Freedman]

Polymer-chrome-app is an up to date, but still uses the sandboxed build of polymer.

[Eric Bidelman]

The repo is missing chrome-app.html. It's referenced in https://github.com/Polymer/polymer-chrome-app/blob/master/index.html

[Hoa V. Dinh]

Could you describe how I can use it?

I tried to use chrome-app-seed, which should be a chrome sample app using polymer-chrome-app and when I run it.

1/ Nothing shows in the window of the application

2/ When I open the console, I can see the following logs:

Uncaught Error: Polymer.register is deprecated in declaration of my-app. Please see http://www.polymer-project.org/getting-started.html deprecated.js:12

-- 

Hoa V. Dinh

[Daniel Freedman]

Actually, he should be using https://github.com/Polymer/chrome-app-seed, which contains chrome-app.html, and uses polymer-chrome-app as a submodule.

[Daniel Freedman]

Oops, that's a bug! I'll fix it now.

[Daniel Freedman]

Ok, chrome-app-seed should be updated now. Also, our (now departed) intern Priyank made a good example (sandboxed) chrome packaged app here: https://github.com/Polymer/labs/tree/master/priyanks/calendar-chrome-app.

[Eric Bidelman]

Ah yes, chrome-app-seed. It's kinda of confusing there are two repos. 

Thanks Daniel!

[Hoa V. Dinh]

I tried to remove platform.min.js.

It improved a little bit the situation:

Now I get the following errors:

<<

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.

 deprecated.js:12

(anonymous function) deprecated.js:12

Uncaught InvalidCharacterError: Failed to call 'register' on 'Document' for type 'polymer-element': : 'polymer-element' is not a valid name. deprecated.js:12

Uncaught TypeError: Property 'Polymer' of object [object Object] is not a function 

>>

I took a look at polymer-chrome-app, I'm a little bit concerned that it has to use an iframe in order to use polymer.

Do you know what's the reason for that?

Using <iframe> might introduce additional restriction in the app.

-- 

Hoa V. Dinh

[Hoa V. Dinh]

I also tried to use: calendar-nosandbox-app, which architecture is more similar to a chrome packaged app.

It shown the same issues as my sample application:

<<

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.

 polymer.min.js:2215

Uncaught InvalidCharacterError: Failed to call 'register' on 'Document' for type 'polymer-element': : 'polymer-element' is not a valid name. polymer.min.js:6787

Uncaught TypeError: Property 'Polymer' of object [object Object] is not a function imports.js:19

>>

-- 

Hoa V. Dinh

[Daniel Freedman]

Ah, this looks like https://code.google.com/p/chromium/issues/detail?id=273126. In Canary, document.register is heavily restricted in the packaged apps environment. The CL to fix this: http://src.chromium.org/viewvc/blink?view=revision&revision=156336, should land in tomorrow's Canary.

In the meantime, the sandbox <iframe> loader version is the only way to get a packaged app running on Canary.

calendar-nosandbox-app works ok on M28, but has a few styling issues because it uses the unprefixed flexbox syntax.

[Hoa V. Dinh]

Cool! I'll try it tomorrow then.

Currently, I'm using Chrome dev and Canary >= 30.

-- 

Hoa V. Dinh

[Hoa V. Dinh]

Hi,

I'm now using the following version of Chrome:

Google Chrome	31.0.1606.2 (Official Build 218471) canary
OS	Mac OS X
Blink	537.36 (@156363)

It should include the fix you mentioned.

And I still got the following logs in the console:

<<

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.

 deprecated.js:12

Uncaught InvalidCharacterError: Failed to call 'register' on 'Document' for type 'polymer-element': : 'polymer-element' is not a valid name. deprecated.js:12

Uncaught TypeError: Property 'Polymer' of object [object Object] is not a function build.js:29

>>

Let me know if there's something I'm missing here.

Thanks!

-- 

Hoa V. Dinh

[Scott Miles]

(Apologies to Hoa, I sent this same message directly to him by mistake.)

The 'eval' warning is the binding code testing if eval is available for optimizations, it's harmless.

The 'InvalidCharacterError' is blocking Polymer in Chrome Apps right now, see this bug that Daniel referenced earlier:

https://code.google.com/p/chromium/issues/detail?id=273126

The 'TypeError' is fallout from the previous error.

[Dominic Cooney]

On Thu, Aug 22, 2013 at 3:05 AM, Scott Miles <sjm...@google.com> wrote:

(Apologies to Hoa, I sent this same message directly to him by mistake.)

The 'eval' warning is the binding code testing if eval is available for optimizations, it's harmless.

The 'InvalidCharacterError' is blocking Polymer in Chrome Apps right now, see this bug that Daniel referenced earlier:

https://code.google.com/p/chromium/issues/detail?id=273126

FYI this should be fixed in the next Canary.

--

[jyan...@gmail.com]

chrome-app-seed is no longer found under https://github.com/Polymer.  Is there a new starter for Chrome App with Polymer?

Jun

[Scott Miles]

chrome-app-seed is deprecated now because the 'vulcanize' tool can usually produce CSP-safe application code directly without special libraries.

I believe there are some examples somewhere, I will make a note that we need to clean something up for demonstration. There is a very basic non-vulcanizer example here: https://github.com/Polymer/labs/tree/master/sjmiles/AppTracks.

Also, there is work happening to better document Vulcanizer.

[Martin Kleinschrodt]

What's the status on this? I've tried using vulcanize with the --csp flag but I still get the 'unsafe-eval' 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.

[Scott Miles]

We have to know more about what you did to provide any support.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5474a3ea-2e87-4e51-bc32-de854b8e9f9d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Hoa V. Dinh]

Hi,

For Chrome Apps, I would usually apply a change to the following function in observe.js (https://github.com/Polymer/observe-js/blob/master/src/observe.js):

Since eval is not supported in the Chrome platform and checking document.securityPolicy.allowsEval doesn’t help in Chrome Apps platform, I’m checking the presence of  chrome.app.runtime.

 function detectEval() {
    // don't test for eval if document has CSP securityPolicy object and we can see that
    // eval is not supported. This avoids an error message in console even when the exception
    // is caught
    if (global.document &&
        'securityPolicy' in global.document &&
        !global.document.securityPolicy.allowsEval) {
      return false;
    }

       // Here’s the relevant change.
       if (chrome.app.runtime) { // could probably be improved and be: chrome && chrome.app && chrome.app.runtime
         return false;
       }


    try {
      var f = new Function('', 'return true;');
      return f();
    } catch (ex) {
      return false;
    }
  }

-- 

Hoa V. Dinh

[John Messerly]

@Hoa, that's a nice workaround! Could it be submitted as a pull request to observe-js repository?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/D06341B87CD9459D94FF5B8F68FF60E6%40google.com.

[Hoa V. Dinh]

I’m doing it.

-- 

Hoa V. Dinh

[Martin Kleinschrodt]

@Hoa: Yeah that seems to do the trick. I was using a similar patch but wasn’t sure if it was the right way to go. By the way, the same adjustment has to be made in the ShadowDOM polyfill: https://github.com/Polymer/ShadowDOM/blob/master/src/wrappers.js#L14-L26

[Hoa V. Dinh]

Here’s the two pull requests to improve that:

https://github.com/Polymer/ShadowDOM/pull/414

https://github.com/Polymer/observe-js/pull/48

-- 

Hoa V. Dinh

[code4cha...@gmail.com]

? for the group... i have been playing with the current update to the chrome dev editor.  they added polymer to the chrome js app projects and I'm struggling on getting an event sent up.. is there a special way of doing this?  i can get a click event to work, just not the 'enter' pressed on a core-input tag.

js

var searchGroup = document.querySelector('#searchGroup');

searchGroup.searchClicked = function() {

  var text = searchGroup.value;

  

  console.log(text);

}

searchGroup.inputed = function() {

  console.log('inputed..');

}

html

<template id="searchGroup" is="auto-binding">

  <core-icon-button icon="search" id="btnSearch" on-click="{{searchClicked}}"></core-icon-button>

  <core-input willvalidate placeholder="Search" id="core_input" change="{{inputed}}" value="{{value}}"></core-input>

</template>

any thoughts?