How To Create A Simple Google Chrome App In Less Than 5 Minutes

If you take a look at Google’s “Web Store” a lot of these apps listed there are basically just quick ways to access web-pages.

For example, the official Google Docs app does what? It opens docs.google.com.

The Hootsuite app? It opens hootsuite.com/dashboard

Etc.

While that may defeat the purpose of an app (shouldn’t it be more than just a bookmark?) there’s an interesting way we can exploit this.

Creating A Custom Chrome Dashboard

When you start up Chrome, you have two options:

1. Either you see all your “Most Visited” webpages in the form of thumbnails:

2. Or you see your apps:

Seeing these big icons on start-up can be an advantage to the often cluttered gallery of mini-screenshots of recently visited webpages.

It’s more focused, clean and enables super-quick access to everyday functions even when your eyes are tired. The big icons also lend themselves to touch-based interfaces.

I’m going to show you now how you can add your own applications to this start-screen.

For the sake of example we are going to be adding an app that launches this blog (see the last icon in the row below):

Again, this is just an example, you could build an app that launches the BBC homepage or whatever site/service you need quick and daily access for.

Here’s how it goes:

Step 1: Building The App

We are going to need two things:

–  A file called manifest.json

–  An icon

The first thing we’re going to do is

1. Create a new folder somewhere (name and location are irrelevant)

2. Find an icon somewhere. You can use a site like findicons.com. A good size is 128 by 128 pixels. Download the icon and put it in your folder. Rename the file, for our example, let’s just call it “icon.png” 

3. Create a new text-file and paste the following code inside it:

{
"name": "NAME OF YOUR APP HERE",
"version": "1",
"icons": { "128": "icon.png" },
"app": {
"urls": [
"http://PUT-THE-URL-OF-YOUR-WEBSITE-HERE"
],
"launch": {
"web_url": "http://PUT-THE-URL-OF-YOUR-WEBSITE-HERE"
}
}
}

4. Change the red parts to whatever you need. If you’d want to build an app that launches the BBC homepage, you could write BBC launcher under “name” and put “http://bbc.co.uk” under “url”s and “web_url”. In our example case we would write:

{
"name": "Launch Blog",
"version": "1",
"icons": { "128": "icon.png" },
"app": {
"urls": [
"http://learnoutlive.com/blog"
],
"launch": {
"web_url": "http://learnoutlive.com/blog"
}
}
}

4. Save this text-file in your folder under the name manifest.json

 Step 2: Installing And Activating Your Custom App

Now, click on the Wrench icon in Google Chrome and go to Tools -> Extensions:

On the next screen, click on “Developer Mode” and then on “Load Unpacked Extensions”:

Simply select the folder you created above and hit OK.

Your new app is now installed and ready to use.

That was easy, wasn’t it?

Here’s an example of apps I created.

To give you a few ideas, one of these apps is a direct link to adding a new article, another one launches this blog and the third opens up the Kindle Indie-Publishing Dashboard.

Note: The above process is for creating apps for private use only. If you want to submit apps to the Webstore, please look here.