KendoUI error on load in a Chrome extension

11 posts, 0 answers
  1. Ron
    Ron avatar
    148 posts
    Member since:
    Sep 2011

    Posted 19 Jun 2012 Link to this post

    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.
  2.
  3. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 22 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ron
    Ron avatar
    148 posts
    Member since:
    Sep 2011

    Posted 22 Jun 2012 Link to this post

    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.
  7. Ron
    Ron avatar
    148 posts
    Member since:
    Sep 2011

    Posted 03 Jul 2012 Link to this post

    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.
  8.
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 04 Jul 2012 Link to this post

    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:

    Regards,

    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 04 Jul 2012 Link to this post

    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.
  13. Thomas
    Thomas avatar
    2 posts
    Member since:
    Mar 2012

    Posted 05 Jul 2012 Link to this post

    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
  14.
  15. Ron
    Ron avatar
    148 posts
    Member since:
    Sep 2011

    Posted 05 Jul 2012 Link to this post

    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.
  17. Audrey
    Audrey avatar
    1 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2012 Link to this post

    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.
  19. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 06 Jul 2012 Link to this post

    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
  20.
  21. Thomas
    Thomas avatar
    2 posts
    Member since:
    Mar 2012

    Posted 06 Jul 2012 Link to this post

    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
Back to Top