How to Create a Chrome Web App of Any Site for the New Tab Page

Posted January 27, 2011 by Rob Rogers in Google

If you can’t find your favorite app in the Chrome Web Store and you want it to be included in the Apps of your Chrome browser, you can easily make your own. It is an extremely easy process!

A Chrome Web App requires two components, the Manifest and an Icon.

The Manifest is a JSON file with the name manifest.json

The Icon is a 128px x 128px image that will be used on the New Tab page.

To create the Manifest, copy the following into a text editor like Notepad or TextEdit:
{
"name": "Tech-Recipes",
"description": "Your Cookbook of Tech-Tutorials",
"version": "1.0",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://www.tech-recipes.com/"
],
"launch": {
"web_url": "http://www.tech-recipes.com/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

You will need to make the appropriate changes to the areas indicated below (name, description, urls, and launch):

Once this is done, save the file as manifest.json (NOT manifest.json.txt!!!)

Next, you need an icon for your web app. You can use any graphics application or web app that allows you to save it as a 128×128 png file. Save the file with the name 128.png.

Create a new folder and give it the name that you will call your Web app and place both the manifest and icon files inside the folder.

Now it’s time to install the Web App into Chrome.

1. Open Google Chrome.

2. Click the wrench in the upper-right corner of the application.

3. Click Tools and select Extensions.

4. On the right side of the Extensions page, click the + that is next to Developer mode.

5. Click the Load unpacked extension button.

6. Browse to the Web App’s folder and click OK.

Your web app should now be created, any errors are likely a manifest typo. Go back and check the manifest for a missed character(or an unnecessary one).

When you go to the New Tab page, your new web app will appear with the others.

We will cover how to submit your web app to the Web Store in a future article.

 

About Rob Rogers

Once a prolific author here on Tech-Recipes, Rob has moved on to greener pastures.
View more articles by Rob Rogers

The Conversation

Follow the reactions below and share your own thoughts.

  • http://twitter.com/jericotolentino Jerico Tolentino

    Thanks! Just what I was looking for.

  • http://www.facebook.com/people/Kuldeep-Singh/808513677 Kuldeep Singh

    cool one 🙂

  • http://y2kemo.com y2kemo

    Gr8 and easy how-to. Thx

  • Proximo

    Great. Looking forward to your next article on how to upload and host this on the actual Google Chrome Store.

    Thanks

  • http://www.facebook.com/contentwriter Ava Catherine Marcella Fails

    This is fantastic. Thank you for sharing how to do this.

  • Quadrifarb

    awesome 🙂 thx

  • Kellen

    How do you make it non txt?

    • MegaEnx

      save the fil as .JSON and change the encoding to UTF-8 (not ANSI)

  • Dave

    Great tutorial but it’s outdated. Have you done an update to it by chance?

  • S S Chauhan

    It is saying-” Manifest file is missing or unreadable” I am entering right words.

  • Sammmmmm

    it keeps saying the manifest is unreadable

    • Dave

      Unfortunately, the article is severely out of date. The manifest problem can be “cured” by looking at the new manifest that chrome uses but it still puts the icon as a small icon, not a full sized one like a chrome app.

      Google chrome manifest if you don’t mind having a small icon in the bottom left corner. The manifest has changed/simplified a bit for 2.0.

  • Alejandro

    Thank you very much!! this helped me a lot and I have made 2 apps already, although I’m having some problems because if anyone installs one of my apps, then they can’t install my second app saying that there is a conflict with app number one. any suggestions?