With the recent(ish) news about Google Chrome’s Web Store and myself being a huge Chrome fan. I decided to join Chromium App’s Group and Start digging my teeth in to whats capable. With that in mind I thought I would detail the process of setting up, enabling, building and installing both locally and through the Developer Dashboard your Flash application. With a view to talk briefly about possible solutions to enable your application to talk to Chrome’s Web Store Payments.

So what we’ll achieve by the end of this post should be:

- A development build of Chromium installed with apps enabled
- A project containing a Chrome extension deployment folder
- A project containing a Chrome Web Store ready deployment folder
- A flash application installed from a local unpacked extension file
- That same application then installed via the developer dashboard

Setting up a developer build of Chromium

Re-written due to an update on Google’s dev channel, meaning that this section has become a lot simpler

So after getting frankly, quite lost with how to get an already compiled version of Chromium I eventually found the dev channel’s “buildbot” which is exactly what we need to start. Regardless of platform the same applies, what your going to need to do is go to your “build snapshots” url below for mac / pc and download the latest build ( whatever is the highest number is the latest ) Its best that you grab the latest build even If im using a different one for this post ( 57790 ). After finding that directory your going to want to just download the .zip, unzip it and then throw that in your applications folder.

- Mac dev channel Chromium build snapshots
- PC dev channel Chromium build snapshots

Afterwards, running the applicaiton should bring up the latest build of Chromium with the Chrome Web Store enabled by default! Previous to this you would have to of run a command line ( or in my case, for this post explain how to create a mac / pc alias with the -enable apps argument added ) but thankfully Google have turned on the Chrome Web Store ( well at least for us developers )

Building a Flash Chrome web application

Reviewing the Documentation provided by Google on how to do this, I’m happy to see that they have made this as simple as possible. Building a Flash application to be made in to a Packaged app on Chrome’s Web Store is quite literally configuring a couple variables in the “manifest.json” and providing some images.

Google have provided the nitty gritty on what the “manifest.json” is and what all the variables are over on there Developer’s Guide but below I’ve provided two example project zips, ready to go for both creating an application and an extension.

- Example Application Project
- Example Extension Project

Whats the difference between an Extension and an Application?

A Chrome application has a slot on the users application dashboard and when opened up creates itself an untitled tab. With this it also has the ability to utilise Google’s Web Store Marketplace and Google’s Web Store Payments. Essentially, Applications are fully fledged products whereas Extensions are more utilities than anything else.

A Chrome extension by comparison lives next to the users Omnibox and creates a pop-up over the users current page. Extensions however have the ability to show notifications visually through its icon and also are more readily available to the user rather than Applications.

Installing your Chrome application

So, if you’ve gone ahead and downloaded the Example Application Project then setting up should be simply putting that folder as your “bin” / “deploy” folder and exporting your flash project to overwrite the “swf/main.swf”. I won’t be going over what the “manifest.json” settings are just yet but for now its all about getting that application working both locally and on the Developer Dashboard.

Once you’ve set up and are exporting your application over the “main.swf” we’re going to head over to your newly installed Chromium. There we’re going to open up the “extensions” tab and drop the “Developer mode” down to show options to “Pack extension…”

With the “extensions” open we’re going to choose to “Pack extension…” which creates two files. A “.crx” and a “.pem”, the “.crx” is basically a Chrome zip file, nothing fancy. The “.pem” file is the access file to do updates with your “.crx” file, a private key used when uploaded to the Chrome Web Store ( so keep hold of it! ).

Once you’ve done this you should see those two new files next to your deploy folder, to keep things tidy I tend to throw both the files in to the folder where they were exported from. To install your Application in to Chromium its now a case of “Load unpacked extension…” and select the “bin” / “deploy” folder. Here if everything is successful you’ll see your application has a unique ID and is showing in your extensions.

If all of the above has gone well you should be able to open up your newly installed Application from your Dashboard which is shown opening a new tab.

Installing via Google’s Developer Dashboard

Now that we’ve got a version of your application installed via the developer tools, its time to go and install it via the Developer Dashboard Google offers. Using the Developer Dashboard allows you to see your application within the context of how it looks on Google’s Web Store. Also it provides you with a few crucial bits of information such as the OAuth access token for thoose wanting to charge for their application. So if you want to go ahead and browse to the Developer Dashboard

After clicking the install application button it will ask you for a zip ( not the “.crx” file ) so if you go ahead, zip the example application’s “bin” / “deploy” folder up and then upload. You’ll then be presented with your application now in your Developer Dashboard, Clicking edit will then take you through to where you can upload your icon, add a few categories and upload some screenshots / embed some youtube videos of your application.

Its worth noting at this point that if your interested in charging for you app to have a look over Google’s Licensing API, its an OAuth system which allows you to offer users the ability to pay once, be a subscriber or offer a custom solution of in-app payments. Which im hoping to follow up on in a different post.

Now that you’ve got your application in the Dashboard you should be able to go ahead and install it as if you were a user, Worth point out that prior to this you will need to uninstall your already installed application to make this work. It would seem that the current version of Chromium ( 7.0.508.0 ) shows a 404 error when installing but hopefully you’ll trust me with the fact that it ‘was’ working and should again do soon.

The manifest.json and Permissions

So previously I glazed over the “manifest.json” which is the glue to your Application, its a pretty simple set of variables which the Example Application Project shows. However I’ll briefly go over the important bit, The Name, Description, Version and Icons should be pretty self explanatory except I would pay more attention to the Permissions.

Permissions are the first thing the user see’s when installing your Application and if you start asking for things you don’t need then your Application won’t get installed. So give the Permissions manifest a minimal approach. If your Application isn’t going to use “notifications” then don’t ask for it.

Going Forward

After writing this post Its stemmed on to actually turn in to a further two, more code focused ones. Google Chrome’s Web Applicaiton main draw over “hosted” web applications is that the permissions are dealt with upfront. Not only that Google have a Treasure trove of API’s and even some Experimental ones too. Offering web applications access to not only Notifications but Bookmarks, Clipboard Access, Omnibox Input, Tabs and Windows. All accessed through a couple lines of Javascript which is simple to ExternalInteface.to

If your mind isn’t bursting with ideas about what you could do with an Application that could open windows and tabs, bookmark pages and be searchable then you need to have a break from work ;). With this in mind I will be following this introduction post with an “Experimenting with Google Chrome’s Application API’s” and also for those who like to get paid an “Accessing Google Chrome’s Licensing API for Flash Game Development”.