Search code examples
javascriptextjsgoogle-chrome-extensionsencha-touch

Any way to pack Sencha Touch app as Google Chrome packaged app?

I have a Sencha Touch app. Now there is a need to distribute it as Google Chrome app. I wrapped a ST production build as Google Chrome extension and got several error messages in console:

  1. index.html has inline script (ST microloader injects it), but inline scripts are not allowed in Google Chrome apps. This seems can be fixed by moving the script in a separate file. Is there a better workaround?
  2. window.localStorage is not available, I'm forced to use chrome.storage but the app actively uses localStorage. localStorage is sync, chrome.storage is async. Do I need to write own ST adapter to use chrome.storage or is there better way doing this? Existing libraries?
  3. EvalError: 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' blob: filesystem: chrome-extension-resource:". I was unable to find the exact source of this issue...
  4. I guess I will get more other issues, when these ones will be fixed and the app can proceed next...

The main question is can Sencha Touch (not ExtJS) be used for Google Chrome apps or it's definitely wrong and not supposed to? Do I need to stop here if Sencha Touch is just bad solution for Google Chrome apps?

Solution

    1. a separate js file is the best solution otherwise you'll have to sandbox the entire page:

      You can’t use inline scripting in your Chrome App pages. [...] Chrome extensions will let you relax the default Content Security Policy; Chrome Apps won’t.

    2. you can make it even better than localStorage by making a prefs wrapper this way:

      • load the settings from chrome.storage at the app start into an internal object
      • watch for subsequent dynamic changes in chrome.storage.onChanged event listener that will update the internal object and broadcast a settingChanged event to your app.
      • in prefs.set method put the value both into the internal object and chrome.storage.
    3. there must be eval in some of the js libs you use. The best solution is too refactor the code to get rid of eval, otherwise sandbox the page, see Using eval in Chrome Extensions. Safely.

    I haven't used Sencha Touch so I can't say if it's easy to modify it or is it worth the effort.
    Try asking on their support forum too.