Publishing to the Chrome Web Store

Favourite 64 favourites
Tutorial written by AshleyOriginally published on 17th, October 2011 - 13 revisions

What is the Chrome Web Store?

The Google Chrome Web Store hosts apps, extensions and themes for the Google Chrome web browser. You can publish your games and apps to the Chrome Web Store for extra exposure to users of Google Chrome. The Chrome Web Store is also where Chrome OS users get apps for their computer, which includes the Chromebook laptop. To find out more, check out their own description of the Web Store. This tutorial will show you how to get your games and apps on there!

To see what the end result is like, try the Space Blaster demo on the Web Store.

Before you start

Here's a list of things you'll need before you get going.

1. A Google account.
2. Your completed game or app!
3. $5 for the Web Store developer registration fee.
4. The Chrome web browser to try it out.
5. A 1280x800 sized banner for the app, and a 440x280 sized image for a promotional tile.
(6. Optionally, if you're making a Hosted App, you'll need your own server to host the app on. You'll also need to verify the site via Google Webmaster Tools.)

Let's get started!

Registering

Sign up a Google Account

First of all, if you don't have one already, sign yourself up a Google account. Otherwise, make sure you're signed in to your existing account.

Pay the developer's fee

Sign in to the Developer Dashboard for the Chrome Web Store. You'll need to pay a one-off $5 to register a developer account and publish apps to the Chrome Web Store. Hopefully that won't break the bank.

Exporting

Open up Construct 2 and open the project you want to publish. Make sure you have a description set for the project. You can set this in the project's properties. This is what will appear on the Web Store as the description for your app. While you're there, make sure your project has a good name set as well!

Setting the project properties
Click Export Project in the ribbon or File menu. In the dialog that follows, make sure you switch the Export for dropdown to Chrome Web Store.

Exporting for the Web Store.
Make any other changes you want to the other settings, then click Next. The following dialog appears allowing you to choose options for the Chrome Web Store.

Options for the Chrome Web Store.
First of all, notice the App can work offline checkbox. Most games will work OK offline since all the files have already been downloaded. However, if you for some reason require an internet connection for the game to work (e.g. you use the AJAX object a lot), untick the checkbox.

The two types of app

There are two types of app you can use on the Web Store, which you can choose with the Type dropdown list. These are:

Packaged app
- Hosted on the Web Store itself
- You may not be able to upload your project if it is too big
- The app will only work in Google Chrome (unless you upload it somewhere else)

Hosted app
- This runs on your own server like a normal HTML5 app. However, it can still be listed in the Web Store like this. You'll need to have verified your website via Google Webmaster Tools.
- There is no maximum size
- Users with other browsers can still visit the game URL and play the game.

Since a hosted app runs on your own server, you have to put in the URL to where it will be hosted under Web URL. Also, you need to upload two sets of files: your HTML5 game itself, and the files necessary for the Web Store. For convenience Construct 2 exports these to different directories. This means you need to specify a second directory for Save hosted app files to.

Note: although you can host games on Dropbox, we recommend you use your own host for Web Store hosted apps. Dropbox has a daily bandwidth limit that you will reach quickly if your game becomes popular.

Once you've decided which kind of app you're going to go for, click Export. Remember if you made a packaged app everything is in one folder, but if you made a hosted app you should have two folders of files.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

5
prinsukun 5,117 rep

thanks for the great tutorial, I'm waiting for the payment update for C2, hope it wont take too long =D

Monday, October 17, 2011 at 3:41:23 AM
6
MastaZavr 4,234 rep

Now I am going to buy C2 100% :)

Monday, October 17, 2011 at 5:40:50 AM
6
bowiz2 5,951 rep

Great tutorial, my mind is already storming with ideas for the web store, now all I need is 5 bucks... WHERE OH WHERE WILL I GET THEM??? ;)
Once again, thanks Scirra :)

Monday, October 17, 2011 at 8:58:01 AM
5
PixelRebirth 7,510 rep

Awesome! Was always interested in the Chrome store. Now we only need builtin support for their licensing API.

Monday, October 17, 2011 at 11:20:08 AM
5
Przemek32767 23.5k rep

Chrome Web Store publishing is one of the best Construct 2 features so far, and once you add payment support, it will be a blast.

Monday, October 17, 2011 at 1:04:15 PM
3
ludodesign 30.1k rep

I try do it alone so much, and all times I get error log. Now construct have automatically exporter. Thank you so much. I loved it. =)

Wednesday, October 19, 2011 at 12:35:13 PM
4
techdojo 2,456 rep

Whilst waiting for payment options - there's always the possibility of adding some adsense links to the main container page!

Wednesday, October 19, 2011 at 3:16:11 PM
3
gammabeam 13.3k rep

Wow, didn't see this tutorial! Can't wait to try it!

Wednesday, October 19, 2011 at 4:42:00 PM
2
Ashley 190.5k rep

Updated the tutorial with a new 'Payments' section.

Wednesday, October 26, 2011 at 6:15:03 PM
2
gammabeam 13.3k rep

I've done the whole process and the test version is running fine, but when I launch my app it opens a new browser window with the window size. My "Fullscreen in Browser" is set to NO.

What could be wrong?!

EDIT:
changed the .json "container" to "tab" and things are working correctly now. However, this is a bug as I didn't export it with the Fullscreen option.

Wednesday, November 02, 2011 at 4:34:28 PM
2
Ashley 190.5k rep

@gammabeam, can you show me a screenshot? If it opens a little frame window the size of your game's window, I think that's the intended behavior (not fullscreen = windowed).

Wednesday, November 02, 2011 at 4:40:54 PM
2
gammabeam 13.3k rep

@Ashley Sorry Ashley, I understood the other way around! It is indeed correct!

Anyway, the performance of my game is not very good on Chrome :-P

Wednesday, November 02, 2011 at 5:02:25 PM
2
Ashley 190.5k rep

@gammabeam even with Chrome 15's hardware acceleration?

Wednesday, November 02, 2011 at 5:10:21 PM
2
gammabeam 13.3k rep

@Ashley
Yeah... weird right? Runs perfectly on Firefox!

At first I thought it was because of the chrome store, but I tested the game locally and it's not running very well as well.

Want me to send you the exported version so you can have a look?

Wednesday, November 02, 2011 at 5:15:05 PM
2
Ashley 190.5k rep

@gammabeam, sure, send it over and I'll try it out. Let me know what kind of framerate you're getting and I'll compare.

Wednesday, November 02, 2011 at 5:31:13 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.