KendoUI error on load in a Chrome extension

[Ron]

I wonder if anyone is aware of the fact that adding KendoUI to a html file used in a Chrome extension causes errors on load:

I am getting:

Uncaught Error: Invalid template:'<div class="k-group-indicator" data-#=da...
(line 344 in kendo.web.js) 

when inspecting my popup page  

If I load the same page directly in the browser (not via an extension) - it loads just fine.

Any chance that a simple extension can be built to track this issue. It's a shame not to use KendoUI when developing extensions.

The issue can be replicated by including kendo.web.js in a popup page - nothing more, no need for any more code. I am using the 515 release.

Ron.

[Nikolay Rusev]

Hello Ron,

I guess that you came across the issue related with template generation mechanism, which is integral part of every Kendo UI widget.

Due to performance consideration Kendo template are building string representation of the output which is later eval-ed/via new Function/. Unfortunately in Chrome extensions such behavior is not allowed by default. Similar approach is also used by other js template engines.

There is a bug report which lists other js frameworks that have same issue: http://code.google.com/p/chromium/issues/detail?id=107538#c35

Currently the only solution(which we were able to find so far) is to use the following manifest configuration.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 1,
  "description": "Chrome extension using Kendo UI",
  "browser_action": {
    "default_icon": "KendoIcon.png",
    "default_popup": "popup.html"
  },
  ...other config settings
  "content_security_policy": "default-src 'self' 'unsafe-inline' 'unsafe-eval' kendo.min.all.js"
}

Imported parts of the configuration:
 - "content_security_policy": "default-src 'self' 'unsafe-inline' 'unsafe-eval' kendo.min.all.js" - this allows evals (i.e new Function("function body")) generation for kendo.min.all.js file.
 - "manifest_version": 1 - the version of the manifest json must be 1, otherwise the above content security policy will not be accepted.

I hope this explains the current state of affairs.

Regards,
Nikolay Rusev
the Telerik team

[Ron]

Thanks.

Unfortunately, manifest version 1 is depreciated, and while Chrome will still load extensions with this version - it will stop doing so in future releases - which makes it hard to justify starting an extension with KendoUI 

Thanks for the note however.

Ron.

[Ron]

Just got the following from the Chrome team:


Manifest_Version 1: Manifest Version 1 has been deprecated since Chrome 18, and when Chrome 21 hits stable in mid-August the Chrome Web Store will no longer accept new items with manifest_version 1 


So - again, it would be nice if a future version of KendoUI will be able to work with Chrome extensions/packaged apps.

[Atanas Korchev]

Hi Ron, 

To our greatest regret until Google Chrome allows generating of JavaScript on the fly (via eval or new Function("code")) Kendo UI will not work in Google Chrome extensions.

The good news is that we have contacted the Google Chrome team and notified them that quite a lot of existing JavaScript libraries cannot work because of this security restriction. They are aware of this issue and hopefully they will find a solution.

 Just to demonstrate how many JavaScript libraries are affected I have compiled a list:

• Moustache – uses new Function https://github.com/janl/mustache.js/blob/master/mustache.js#L474
• Underscore – uses new Function https://github.com/documentcloud/underscore/blob/master/underscore.js#L1012
• JsRender – uses new Function https://github.com/BorisMoore/jsrender/blob/master/jsrender.js#L520
• jQuery templates – uses new Function https://github.com/jquery/jquery-tmpl/blob/master/jquery.tmpl.js#L317
• HoganJS – uses new Function https://github.com/twitter/hogan.js/blob/master/lib/compiler.js#L291
• doT – uses new Function https://github.com/olado/doT/blob/master/doT.js#L121
• Vash – uses new Function https://github.com/kirbysayshi/Vash/blob/master/src/vcompiler.js#L194
• Haml – uses new Function https://github.com/creationix/haml-js/blob/master/lib/haml.js#L633
• jQuery UI – uses eval: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L152
• KnockoutJS – uses new Function https://github.com/SteveSanderson/knockout/blob/master/src/utils.js#L194
• MochiKit – uses new Function: https://github.com/mochi/mochikit/blob/master/MochiKit/Selector.js#L221
• RequireJS – uses eval: https://github.com/jrburke/requirejs/blob/master/require.js#L1759
• Yahoo UI – uses eval: https://github.com/yui/yui3/blob/master/src/simpleyui/js/concat.js#L18248
• MooTools – uses eval: https://github.com/mootools/mootools-core/blob/master/Source/Utilities/Swiff.js#L110
• Prototype – uses eval: https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/string.js#L387

Regards,

Atanas Korchev
the Telerik team

[Burke]

Ron

Atanas asked me to follow up with you on this as I've had experience with this recently in working on a Chrome Extension.  As he explained Google does block (per their CSP) dynamic evaluation of code at runtime.  This is a bit of a problem as nearly all UI frameworks use some manner of eval or new Function.

However, there is a workaround.  You can host your application inside of a sandboxed page and then post message in and out to the extension wrapper.  This may sound a bit confusing at first, but it's really very simple.  I have put together a sample for you to download and have a look at.  You can fully use Kendo UI inside of a Chrome Extension if you do it this way.

https://github.com/burkeholland/packaged-app-bootstrap

Good luck, and let me know if there are any questions you have about this.

[Thomas]

Hi Burke,

thanks for sharing the example.

I tried to modify my extension in the described manner but couldn't get it run with manifest version 2.
As in the example I put my options page into the sandbox:

"sandbox": {
    "pages": [ "views/options/index.html" ]
  }

And put a wrapper page around it for communication. When I reload the page I get the following error:

"Denying load of chrome-extension://dmjjmikbdjkejoenagcmhlbohgbnppjj/views/options/index.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by web pages."

This is rather strange as I would not expect that it is required to share the page. For testing purposes I added the
required entry in the manifest:

"web_accessible_resources": [ "views/options/index.html" ]

Afterwards the options page loads as expected, but now I'm getting the exception in kendo.web.js in the following line:

return new Function(argumentName, functionBody);

Well, that was also the problem in the very beginning...

Might be a question for the Chrome team, but please let me know if you have an idea.

Thanks, Thomas

[Ron]

Burke,

Thanks for the answer. I did not have the time to look at it yet - but hopefully later this weekend I will be able to. I just wanted to thank you for taking the time to look at it and offer to help.

Ron.

[Audrey]

Hi,
In their recent activity, Kendo UI was invited to show-off in the exclusive Google Developer Sandbox.
They have new demos on how to build incredible applications for Chrome and Chrome for Android.

[Burke]

Ron

Were you able to load that sample unpacked extension?  The sandbox feature may still be in Chrome Canary only.  It should hit stable branch very soon.  Try it in Canary and make sure you enable experimental API's under chrome://flags.

Burke

[Thomas]

Thanks Burke, that was the solution, at least for me. I checked dev channel version 21.0.1180.15 and there my described problem was gone.

Thomas