Cesium in a Chrome Application

I’m interested in using Cesium within a packaged Chrome Application. I’ve hacked together a little test using the HelloWorld.html example and I can (sort of) see the globe. The earth is completely blue but otherwise I can see the stars and rotate around, so it’s at least doing something :slight_smile:

In the inspector I see 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.

Chrome isn’t happy running the evaluated code from knockout.js that is in Cesium from an app. Some Googling turned up this library https://github.com/brianmhunt/knockout-secure-binding that is supposed to be an extension to Knockout to allow it to run in a Content Security Policy where eval and new Function are disallowed.

I’m not quite sure how this library would integrate into Cesium, has anyone ever tried this or have any tips for getting Cesium running in a Chrome App?

Thanks!

Jason

I’m definitely interested in the possibilities of Cesium in a Chrome App, but haven’t had a chance to play with it myself. From the looks of it; it should be easy for you to drop this into Cesium yourself, though you’ll probably have to build it from source. Basically, take the code from the “AMD Loader” section of the secure binding readme from your link and drop it into Source/ThirdParty/knockout.js. Then build Cesium.

If it’s really the drop-in replacement they claim it is; everything should “just work”. If you haven’t built Cesium yourself before, it’s pretty easy; see our guide for details: https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide#build-the-code

Hi Jason,
I am facing the same issue, did you have any luck ?

I did. In fact we just released our application on the Chrome store a few weeks ago.

https://chrome.google.com/webstore/detail/earthviewer/emgifojgfignanpkhcigcbfjlfndkmkb

We aren’t making use of any of the Cesium UI components in our application, so I was able to setup a Viewer and disable all of the default UI components. For example:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

animation: false,

baseLayerPicker: false,

fullscreenButton: false,

geocoder: false,

homeButton: false,

infoBox: false,

sceneModePicker: false,

skyAtmosphere: false,

selectionIndicator: false,

timeline: false,

navigationHelpButton: false,

navigationInstructionsInitiallyVisible: false

});

Congratulations jason, happy to hear about your app.
So, how did you manage running cesium from chrome app ? I am trying to do so but I am getting an ‘unsafe eval’ error…
Thanks.

The unsafe eval is due to knockout.js which is only used for data binding the cesium GUI components. If you initialize the viewer with the options in my previous post it should work because it won’t initialize any of the GUI components.

Thanks, I will try it and let you know

Hi Jason,
Thank you very much, you suggestion did the trick,

but now I am facing anther related issue,

I get the error:

Refused to load the script ‘http://dev.virtualearth.net/REST/v1/Imagery/Metadata/Aerial?incl=ImageryPro…Typ-KjG9SJWiKSHY23U1KmK7yAmZa9lDmuF2osXWkcZ22VPsqmCt0TCt&jsonp=jsonp979295’ because it violates 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.

How did you handle this ?

If I recall correctly I got around that by adding this to my manifest.json:

“permissions”: [

“<all_urls>”,

]

I remember seeing that initially when looking at the Bing imagery but all of our data is local to the application so that ended up not being a big deal for us anyway.

Jason

unfortunately I have already tried :

“permissions”: [

“<all_urls>”,

]

and that did not help,

I hope it is possible connecting to an outside resource,

I will give it more tries,

Thank you for the help