Skip to main content

Writing your First App on a Chromebook

Let's make an app.
On Chromebooks there are a variety of sources that you can get and run applications. The most obvious is through the web itself. Load a page, get stuff done. Another option is extensions, which give you additional capabilities and a persistent icon in every Chrome window for quick access to useful functions. Android apps are another option and add a lot of functions as well, but currently are restricted to a select set of Chromebook models. The last option is Chrome apps. Chrome apps allow for the flexibility of extensions and many of the capabilities of Android apps with out the hassle of trying to install multiple gigabytes of developer tools and libraries just to get started. To get started with Chrome app programming all you will need is already build into your Chromebook. In this article I am going to walk you through the steps of getting your first Chrome app up and running and demonstrate some of the unique features along the way.

Code Editor

For this article I am going to be using Chrome Dev Tools to do everything we will need to do. However, I do want to mention the editor that I use the most. That editor is Caret. Caret is a dead simple code editor that gets all of the basics right. I highly recommend you go give it a try. Click the web store button below to go get it.

 CROSH Window on the Chrome Web Store

Jump into Chrome Dev Tools

Create a snippet to get started.
The first thing we are going to do is open Chrome Dev Tools from a new tab by pressing CTRL+SHIFT+I. From there click on the Sources(1) tab then the Snippets(2) sub-tab, on the left panel. Then click on + New Snippet(3), name the snippet "file". Now right-click on the new snippet and select Save as...(4) from the context menu.
Create a project folder and save manifest.json.
This will open a file selector dialog. From here create a new folder by clicking the NEW FOLDER(1) button. Give the folder a name appropriate for the project, then open the folder. Name the file you are saving to manifest.json(2). Then click the SAVE(3) button.
Let's get our project folder added.
Back in Chrome Dev Tools select the Sources(1) sub-tab, then right-click anywhere in the blank space in the left panel and select Add folder to workspace(2). In the file selector select the project folder we created a second ago, and click the OPEN button.
Give permission to work with your local filesystem.
You will see this warning pop up above the Chrome Dev Tools panel. This is a great opportunity to point out just how seriously Google takes security on Chromebooks. Even in their own developer tools they expect the user to give permission to allow access to a limited portion of their local file system. You will see this seriousness about user security in other APIs I will be covering in the future.

Go ahead and click the ALLOW button, and you will see our project folder listed in the left panel under the sources tab. You can click the arrow next to the folder to expand it's contents, which should just be our manifest.json file.
Let's start editing.
Go ahead and select manifest.json and a new tab will appear for it over the middle panel. We can then click in the area below the tab to begin typing our first bits of code. So let's build a bare bones Chrome app manifest, like so:
  1. {
  2.   "name": "My App",
  3.   "version": "0.0.1",
  4.   "app": {
  5.     "background": {
  6.       "scripts": ["background.js"]
  7.     }
  8.   },
  9.   "manifest_version": 2
  10. }
Make sure to press CTRL+S to save, as Chrome Dev Tools doesn't auto-save. Now let's look at this. The name attribute is needed so Chrome can have a text name next to our app in the app list. The version attribute is needed by the Chrome Web Store to keep track of which version is available compared to what version a user has installed. the app attribute defines a few things, but in the context of this tutorial it is defining our app's starting point: background.js. That last attribute, manifest_version is to help distinguish the old manifest version from the new. It's old history check it out sometime if you like.

From here we will need to create the next step in how our app functions, and that means creating our background.js file. This is the file that allows our app to perform functions even if a window isn't visible to the user. This is useful for many purposes, but for now it will allow our app to open a window when a user clicks on the app icon.

Over on the left panel, right-click on the project folder in the list and select New file. Name the file background.js and fill it with this:
  1. => {
  3. });
This code performs two functions. Line 1 sets up a listener that fires when our app gets launched, typically from a user selecting it on the app list or launcher bar. Line 2 tells the app to create a window that uses the file main.html when the event is fired. This leads us into main.html.

Go ahead and create a new file named main.html like you did with background.js. Then fill it with the following:
  1. <h1>Hello World!</h1>
Simple enough, eh? This will give us just enough to run our app and make sure everything is working.

Testing the App

Go ahead and make sure everything is saved and close the Dev Tools panel. We will be opening it up again, but this time connected to our app.

Open a new tab and navigate to chrome://extensions.
Loading in our basic app.
Make sure Developer mode(1) is checked and click on Load unpacked extension.... This will open a file selector. Select your app's folder and click the OPEN button.
App is ready to be launched.
You should now see your app listed at the top of the extensions list. From here we can test launching it by clicking the blue Launch link under the name and version number.
In the app tray.
You can also find and launch it from your app tray. Once you have clicked on Launch or the app icon you should have a window open that looks like this:
Let's work on the app.
So now we can edit and debug directly in our app. To do this, right click anywhere inside the app window and select Inspect background page(1). This will bring up an instance of Dev Tools specifically for our background.js file. Right-click again in the app window and select Inspect(2). This will bring up an instance of Dev Tools to allow us to inspect our main.html file which was used to create the window.

I prefer to work from the Dev Tools for the background page, as it doesn't get reloaded each time we reload the app like the other instance will.

Right-click in the app window one more time, and select Reload app(3). This will cause your app to close and re-open. For now, this will be the process to update the app with any new changes you have made to the app's code since the last time it was launched.

So the first thing I want to demonstrate is some of the functions for how a window is created and displayed. Switch over to the Dev Tools instance for background.js, go to the Sources panel and open background.js.

Something you will notice about your app window is that if you move or resize it, close it, and re-open it that it will always revert back to the same size and position as when you first created the app. to fix this we need to give the window an ID that Chrome can use to keep track of that info each time it is requested to be opened.

So in background.js, replace the second line with these lines(don't forget to save!):
  1."main.html", {
  2.     id: "main"
  3.   });
Reload the app once before testing to make sure it is using the new code. Now if you move or resize your app window and reload the app, it will reappear in the place and size that it was the last time it was closed.

Now what if we want to restrict the size of our app window to a maximum or minimum size? There are options for that as well. Try the following:
  1."main.html", {
  2.     id: "main",
  3.     innerBounds: {
  4.       minWidth: 320,
  5.       minHeight: 240,
  6.       maxWidth: 640,
  7.       maxHeight: 480
  8.     }
  9.   });
If you test this you will see that we are now restricted to the min and max defined dimensions. You will also notice that Chrome has intelligently removed the Maximize button from the window border, as we would not want to allow a window that has an upper limit on size.
Before and after.
If we want to have a fixed size for our window we just need to set the min and max values to the same for width and height respectively.
  1.     innerBounds: {
  2.       minWidth: 640,
  3.       minHeight: 480,
  4.       maxWidth: 640,
  5.       maxHeight: 480
  6.     }
This will remove the dark bars that appear near the edge of the window when our cursor is near to indicate the ability to resize and also keep the cursor from changing.

This ability can be independently applied to the height and the width as well.

For a bit of fun to wrap this up, lets give our window some color. In background.js add the frame attribute to the options on our window creation call, like so:
  1."main.html", {
  2.     id: "main",
  3.     innerBounds: {
  4.       minWidth: 320,
  5.       minHeight: 240,
  6.       maxWidth: 320,
  7.       maxHeight: 240
  8.     },
  9.     frame: {
  10.       type: "chrome",
  11.       color: "#ffaa55",
  12.       inactiveColor: "#dd8833"
  13.     }
  14.   });
Sweet, sweet color.

This is a great way to give your app frame good connection to the color scheme that you choose for the rest of your app's UI.

There is a lot to go into about how Chrome apps function and the special capabilities they have. You can start delving into the docs for app windows and the app runtime to get an idea of what can be done. I'll be writing more about it in the future. Let me know what you would like to learn more about in relation to Chrome apps in the future byt leaving a comment below. And sign up for email updates at the bottom of the page to know the instant I have new content coming out.

Now go and have some fun!