Getting an Enyo 1.0 App in Chrome Web Store

edited January 2012 in Packaging Apps
This is a quick guide to getting your Enyo app up and running in the Chrome Web Store.

So, you've likely been building your app in Chrome or Safari. Thankfully, the hard work is already done!

Now, there are only three main things you need to consider:

1.) If you use any device specific calls (such as Media Indexing, Cross App Launching, etc), this will not transition to Chrome App Store.
2.) If you use enyo.cookies, it will not work. Cookies require a browser param to work in your browser. Transition to localStorage, or my personal favorite: lawnChair. Both work great to store data in.
3.) If your app makes WebService calls, then you might have issues. See my later explanation to get rid of this browser param.

If you want to build it as a "hosted web app" as I have done, the rest is really simple. For reference, you should read up on this:
http://code.google.com/chrome/webstore/articles/apps_vs_extensions.html

1.) Upload the full package to your site. This includes the Enyo framework.
2.) Test in browser without the browser params. Mine: http://api.flashcardstogo.com/webapp/
3.) Build a manifest.json file. This is mine:
{
	"name": "FlashCards",
	"description": "The perfect Study Companion for mobile devices, now for your desktop.",
	"version": "2.6.8.8",
	"app": {
		"urls": [
			"http://api.flashcardstogo.com/", 
			"http://www.flashcardstogo.com/"
		],
		"launch": {
			"web_url": "http://api.flashcardstogo.com/webapp/"
		}
	},
	"icons": {
		"16": "icon-16.png",
		"48": "icon-48.png",
		"128": "icon-128.png"
	},
	"permissions": [
		"unlimitedStorage",
		"notifications",
		"clipboardRead",
		"clipboardWrite"
	]
}
4.) Get a 16px, 48px, and 128px app icon ready.
5.) Build a .zip file with the icons and manifest.json file.
6.) Login to the Chrome Web Store "Developer Dashboard" here: https://chrome.google.com/webstore/developer/dashboard
7.) Select "Add new item"
8.) You will need:
a.) At least 1 1280x800 or 640x400 screenshot (png) of your app.
b.) At least the Small tile - 440x280 Promotional Image.
c.) The package.zip file created in step 5.
9.) Fill out the form and submit.

It's that easy, just requires a little bit of work. Hopefully this jump starts you right away.


WORKING WITH WEBSERVICES IN HOSTED APP

Depending on how you publish your Chrome app, WebService (aka XHR (aka HTTP Calls)) can be tricky with the "Same Origin Policy". Basically, a browser page can only make an HTTP call to the same domain from which it is using. It prevents XSS attacks (cross domain scripting attacks). Good security, bad for a web app using a 3rd party service.

FlashCards for the moment calls http://api.flashcardstogo.com for it's APIs. It is also a webapp. Therefore, the app had to reside on the http://api.flashcardstogo.com domain (could not use http://www.flashcardstogo.com) so that it could make those calls. Instantly, my issue was solved 90%. In cases where I needed Quizlet, FlashCard Exchange, or a 3rd party URL, I simply used a passthrough in my api. The call goes to my server, uses and XMLHTTP request on the 3rd party server (no same origin policy restriction there), and spits it back to the app. It's tricky, but there are ways around it.

If you publish your Chrome Web Store as a "packaged app", then you can specify which domains get approved and thus work around the same origin policy.

Read more on the Same Origin Policy: http://en.wikipedia.org/wiki/Same_origin_policy

Comments

  • Awesome. I'm publishing on the Chrome Web Store next since I use the app on Chrome so often and this guide makes it look easy enough. Thanks!
  • If you want to see another example of how well Enyo works in the Chrome web store you can join our SecuStore beta testing program. Please only request membership if you are willing to actually test the app and provide feedback. Here is the link to the Google group:
    http://groups.google.com/group/secustore-beta-testers
  • I'm ready to start testing on my Chrome app as well. My app is TouchFeeds, a Google Reader client previously only available on the Touchpad. Here is the link to the Google group:
    http://groups.google.com/group/touchfeeds-beta-testers
  • I've got a question for you guys developing Chrome apps. Can you style scrollbars of Chrome apps? I've seen demos online that show the styles working on scrollbars for that page, but when I try the same in my app, the scrollbars do not change. If anyone knows what's up with this, I'd appreciate some tips.
  • My app is now available on the Chrome Web Store. You can find it here:

    https://chrome.google.com/webstore/detail/oojgapdpmhkddojfgfkcddcjhdijbfgj/details
  • Hi,
    Thanks for the instructions!
    I have a problem... when I view my app in Chrome, all I get is a blank white screen. The same happens whether I open index.html that's on my harddrive, on my hosting, or in a hosted web app. Any suggestions would be greatly appreciated!
  • @dacelbot - Are you calling any webOS APIs in your code? Have you tried viewing the console to see where your problem is at?
  • edited April 2012
    @Datajog Didn't think of looking at the console, thanks. Here's my error report:
     Uncaught ReferenceError: MultiPanel is not defined index.html:9
    Failed to load resource chrome-extension://nhdnggiaifgmneppkkndkiecemfokfmd/1.0/framework/enyo.js
    So presumably the problem is I'm not linking in my JS file to my HTML correctly? Although I am doing it the "right" way for a normal Enyo 1.0 app.
    Here's my html page:
    <!doctype html>
    
    
    	Shakespeare Passages
    	
    
    
    
    	new MultiPanel().renderInto(document.body);
    
    
    
    
    The JS file that my app is written in is called MultiPanel.
    Thanks for your help!
  • edited May 2012
    Yes and/or it can't resolve MultiPanel - which I assume is a Kind? Do you have it included in your depends.js file? Also check path to src for enyo.js.
Sign In or Register to comment.