Chromebooks and Desktop Apps Part 2

In this post, I'll go into more detail on an app I developed for Chrome OS (Chromebooks/Chromebox/Chromebase) and the Chrome Web Store. The game is called The 50 States and is an educational game that helps people learn where all of the states are located in the United States.

You can find the free version of the game here The 50 States Free. The paid version of the game can be found here The 50 States.

Here's a screen shot of the game:

The 50 States Screen Shot

Here I'll go through a quick overview of the gameplay below:

The game asking the player to find North Dakota:

Game Prompting Player to Find North Dakota

The player selecting the correct state which is highlighted in green:

Player Finding North Dakota Correctly

The game asking the player to find New Mexico:

Game Prompting Player to Find New Mexico

The player selecting the wrong state which is highlighted in red:

Player Finding New Mexico Incorrectly

Player being awarded a Purple Belt achievement:

Player Awarded a Purple Belt Achievement

So, let's get into some of the technical details.

A file required by Chrome is manifest.json. Here's the one for The 50 States:

Chrome Manifest File

You can find more information on this file here Chrome Manifest File Documentation.

The "app" field contains a field called "background" which defines the background script for the app. This script contains any long-running logic that manages tasks and state for your app. In our case, it will handle the startup of the app. Here's what it looks like:

Background Script

This is instructing the Chrome runtime to open the page app.html with a window size of 1024 x 768 and preventing the user from resizing it to anything smaller than 650 x 450.

Here's what app.html looks like:

App HTML Page

This is a pretty standard HTML 5 document. The only unusual thing is the single iframe defined in the document body. The purpose of this iframe is to sandbox any JavaScript that does not comply with the Chrome runtime's CSP (Content Security Policy). Anything defined in this iframe cannot access any of the Chrome APIs nor can it access resources on the Internet.

There any many third-party JavaScript frameworks and toolkits that do not comply with the CSP. You can use these libraries as long as you sandbox them using an iframe. However, there's a technique for accessing resources outside of the sandbox which I'll cover in my next post.

I hope you've found this useful. Until next time, keep cranking out that code !!!