Creating your first chrome app on a Chromebook

Doing development on Chromebook usually means developing online. There are a lot of sites around for that. But with the APIs getting more mature, its just a matter of time before someone builds a kick-ass IDE which runs natively on Chromebooks without network connectivity.

One such tool which I've been exploring for a last few weeks is from Google and called "Chrome Dev Editor" If you have never built and run a chrome app or extension, I'll show you how to do this in 3 easy steps.

 

 

Step 1

Launch the app and click on the "+" button to add a new project. Pick a project name and select "JavaScript Chrome App" in the drop down menu.

 

 

 

Step 2

Notice how it automatically adds the minimum code required for it to run. This will be the template you are going to work with. You are almost done, but lets review the files in there to understand why they are there.

 

1. manifest.json - This is the most important file. Modify the app name, version number, capabilities, permissions, scripts using this file. This is the only filename which cannot be modified. Everything else can be controlled using this file.


2. background.js - Noticed that manifest file mentions this script in it. This is the script which will start up first when the app comes up.


3. index.html - background.js requests a window to be created using "chrome.app.window.create" and this is the file it points to for the contents of the window.


4. main.js - This script is called from index.html. It won't start up until the window is created


5. style.css - index.html declares this as a stylesheet


6. assets - The icons for your project are kept in there

 

Step 3 

Thats it. Click on the play button on the top left corner of your editor to launch the app.

Final steps - "Chrome Dev Editor" can upload and publish the app for you with a single click. Since you are on a chromebook, you should know that you can save your code on Google Drive as well, which will just sync across multiple devices automatically. And if you'd like to revision control your code, know that the editor has built in support for syncing code to git as well.