Build A Chrome Web App for Your Website – Part 1

Have you ever wanted to create a Chrome app that links back to your website?  Seems simple enough.  it puts your listing in the Chrome Web App store and people can install your app and it will work like a bookmark to your site.

Well the process is easy, and aside from the $5 developers fee (still cheaper than Android) it is a pretty painless process.

To start all you have to do is create a folder. I named mine “CharlieDeLong” (not after myself, but after the website name. 😛 )

Inside that folder you will need to create 2 files:

The first file is an icon, that MUST be 128 x 128 and named icon_128.png (because the manifest.json data file references that name, you can probably change it, but you would have to update the manifest.json file too.  See below for more info on that.)

The second file is a file named manifest.json (when creating the file make sure there is no other extension at the end. If it is manifest.json.txt or manifest.json.doc it WILL NOT work.)  Once you have created the manifest.json file you just have to open it with a text editor (notepad will work just fine) and past the following into it:

{
  "name": "EnterANameHere",
  "description": "Enter A Description Here.",
  "version": "1.0.0.0",
  "manifest_version": 2,
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "urls": [
      "http://www.yourwebsite.com/"
    ],
    "launch": {
      "web_url": "http://www.yourwebsite.com/"
    }
  }
}

The parts that are in orange will need to be edited.  Take note of the following:

1. “name” should be all 1 word, with no spaces. Leave the quotes “” on both sides of the word.
2. “description” can have spaces and is limited to 140 characters. (think Twitter)
3. the 1 bottom options “urls” and “web_url” should be the site you want to load, and should be MATCHING.

Click on the image to the left to see an example of what the manifest.json for this site looks like.

(The text editor that I am using in this screenshot is called notepad+ and is a great FREE option for editing large amounts of text.  It has that capability to color code your text, spell check and A LOT MORE. Check it out!)

Now that you have both files together in your appropriately named folder all you have to do is zip the folder into a single zip file.  I recommend 7zip as a free app that will make this task extremely easy.  Once you have 7zip installed simply right click the folder and choose the options:

7-Zip -> Add to “WhateverYourFolderIsNamed.zip”

And that’s it for part 1.  Stay tuned for (appropriately named) Part 2 where we will talk about how to test and upload your app to the Chrome store. This will give you the time to save up that $5 developer’s fee…