How To Create Your Own Chrome Web Apps

imageGoogle recently launched the Chrome Web Store and I was excited to see a lot of really cool web apps being added to the Web Store everyday. Most of the Web Apps listed are just regular websites packaged to be installable on your Chrome browser, and these apps and extensions can then be synched across computers, so that you always get the same personalized experience in your browser, no matter which computer you use.

We have created some Google Chrome Themes and I wanted to see how to create a Web App. After reading the Chrome Web Apps Documentation for a while, I found that the process of making a web app from any existing website is quite easy. As an example, I created a Web App for Mind42.com which is my favorite site for creating Mind Maps.

Using the process described below you can create your own Chrome Web Apps. Lets see how it’s done.

Creating Your Own Chrome Web Apps:

Basics: What does a Chrome Web App consist of?

A Chrome Web App consists of a .crx file that contains the metadata describing the app. (The .crx file format is just a variation of ZIP that’s used by Google Chrome.)

The .crx file for a hosted app (app made from an existing website) must contain an icon and a manifest that has details about how the app should function in the browser.

Getting Started:

These are the only 2 things you need to make a Chrome Web App. The manifest and an icon for the web app.

The Manifest - Every app needs a manifest—a JSON-formatted file named manifest.json that describes it.

The Icon - Every app also needs an icon. The icon is used on the New Tab page.

Creating The Manifest:

In order to create a manifest file, open the notepad or any other text editor you use and save the document as a .json file. The code below shows the manifest.json we used in making the Mind Maps 42 Web App.

{
  "name": "Mind42 Mind Maps",
  "description": "A Simple Web App To Create Mind Maps with mind42.com",
  "version": "1.0",
  "icons": {
    "128": "128.png"
  },
  "app": {
    "urls": [
      "http://mind42.com/"
    ],
    "launch": {
      "web_url": "http://mind42.com/mindmaps"
    }
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

This manifest and the icon it points to ( 128.png ) make the Mind 42 web app installable as a hosted app in Chrome. When it’s installed, the specified icon appears on Chrome’s New Tab page. Clicking that icon launches the app by bringing up the page specified by the “web_url” field.

Permissions:

The “permissions” field lets you specify HTML5 permissions that the app requires. By specifying “unlimitedStorage” and “notifications”, this app is able to use those HTML5 features without having to repeatedly ask the user for permission.

During app installation, the user is told which permissions the app needs; installing the app implicitly grants those permissions for all pages whose URLs match those in the “apps” field of the manifest.

You can use the above code to create the manifest for your own web app. Just replace the various fields like name, versions, app, launch etc. with your own.

To learn more about how the various parameters of the manifest work, read Google’s documentation.

Creating the Icon:

128It is necessary to have an icon when a web app is made, and according to Google’s specifications it should be exactly 128×128 pixels. So we edited the Mind 42 Logo a bit so that we know which app this icon represents. We used the Webpage Screenshot extension to take a screenshot and the beautiful Aviary Chrome Web App (Update: no longer available) to edit the image.

Verify If Your Web App Works As Expected:

Now that you have the two necessary components to make a web app, we now need to load the unpacked app into the browser, to confirm that the app is valid.

1) First, create a folder (you might name it my_app or anything else you want) and put the files we created above, in it:

  • manifest.json
  • 128.png

You’ve just created the metadata for a hosted app. Now we can load the app.

2) In Chrome, bring up the extensions management page by clicking the wrench icon Chrome Wrench Icon and choosing Tools > Extensions.

3) At top right corner – If Developer mode has a + by it, click the +. The + changes to a -, and more buttons and information appear.

4) Click the Load unpacked extension button, which open a new window. Now browse to the location where you created the my_app folder shown in step 1, and select the folder.

Chrome Extension Management Page Options

5) If everything in the manifest file is correctly specified, your web app will install appear in the list of installed extensions. If there is an error, Chrome will tell you what went wrong.

Troubleshooting: If you get an error dialog saying you could not load the extension, make sure your manifest file has valid JSON formatting and is called manifest.json (not manifest.json.txt or manifest.json.rtf , for example). You can use a JSON validator to make sure your manifest’s format is valid.

6) Now open a new tab and Voila, your application will be shown on the Chrome Launcher with other apps.

image

7) Test if the app is working as expected by clicking on the icon and visiting the target website.

If everything went smoothly, you are now capable of creating your own basic Chrome Web Apps. Yeah!

This should be enough for you to use your Web App in your browser, however in order for you to upload the app to Chrome Web Store or Share it with someone you would need to pack your web app.

Packing Your Web App To Create The .crx File:

Now that we tested that our web app works, it’s time to pack it and create a .crx file.

1) Go to the Extensions Management page and click on “Pack Extension” button on top left.

Chrome Extension Management Page Options

3) Browse to the folder where you have placed the manifest.json and icon file and click ok.

Choose Web App Folder

This would also create a PEM or private key for you to be able to update this app in the Chrome Web Store.

If all goes well Chrome will tell you that your .crx and .pem files have been created. It also displays where these files have been placed.

.crx and .pem files created

The first file .crx is the container where your web app exists and it can now be installed on any Chrome browser. Just drag the .crx file into Chrome to install it.

Web App Installation

The .pem file would be needed if you update this extension with new features after uploading it to the Chrome Web Store. (Read about uploading Web Apps to Chrome Web Store)

With all these files in place you can now share your Chrome Web App with anyone. If some website you like doesn’t have a Web App, you can create one yourself, instead of waiting for them to come up with a Web App. You are now officially a newbie developer for Google Chrome.

If you have any questions about the above process or any suggestions to improve it, your comments are always welcome. Share your thoughts with us in the comments section below.

Further Reading:

alt


  • http://twitter.com/WilsonDavalos Wilson Davalos

    I keep getting this error “Manifest is not valid JSON. Line: 1, column: 2, Dictionary keys must be quoted.”

    • http://www.technorms.com Viki

      The most common errors in a manifest file for Chrome Apps, are caused due to ” (quotes) and , (commas) not used properly.

      The above code should work fine for creating a installable chrome web app for any live website. Try and change the quotes at the indicated line and column.

      If you still have an issue, share the code with me (here or via email) and I will look into it.

      • Gbrake

        Viki,
        I work for a school district. We are about to get a donation of 700 Netbooks for our kids to use. It would sure be handy to have an app for the Chrome App Store for kids to access our school district website. I know enough to get to this page. Is there anyone out there who can do this for a reasonable price for us?
        Gwen

        • http://www.technorms.com Viki

          Hello Gwen. Congratulations on getting the donation of the netbooks, they would prove to be a wonderful learning tool for the kids. :)

          So If I understand you correctly, you just need a basic Chrome app, which will help the kids to get to your school website here – “astoria.k12.or.us”, is that correct?

          If not, I would appreciate it if you could elaborate a bit about what it is that you need exactly and I could point you in the right direction. Lemme know.

        • Donald

          Hi Gwen

          I’m currently in college studying Computer Engineering and I’d be happy to help and would do it for a very reasonable price. If you’re interested, send me an email at donaldduck91(at)gmail.com

  • Jvmassi

    How come the “Apps” that I create will not sync to other Chrome Browsers of mine? The Apps installed from the Web Store sync perfectly fine.

    • http://www.technorms.com Viki

      Each Web App created, has a single secret key associated with it called the Pem key. It is generated when we pack the web app as we have seen in the post above.

      Google uses this key to both track and verify the legitimacy of any Web App.

      If you tried uploading a Web App to the Google Webstore, you must have noticed that, in order to upload any the app you need to have Google Webmaster Tools verification for the website used in the app. If you do not provide the verification, you cannot upload the web app and hence it is not legitimate and thus does not sync.

      So as we created the Mind42 Web App above, it cannot be synced across browsers, because I don’t have Mind42’s Webmaster verification. But if we create a web app for TechNorms.com, we would be able to upload it to the web store and sync it, since we can verify the domain ownership.

  • Pingback: How To Create A Chrome Theme From Your Favourite Wallpaper | Lifehacker Australia()

  • David

    How do you get your app to appear in the web store without searching for it’s exact name? It doesn’t show up in the category specified. I checked all the apps. It doesn’t show up anywhere. I gave plenty of keywords. What’s the secret?

  • http://www.facebook.com/profile.php?id=100001812464680 Elazar Krausz

    How do you save the file as a .json?

    • Anonymous

      Just “save as” in your word editor, choose “all files” as the file type and append the ,json extension to the end instead of whatever is already there (such as .txt).

  • http://www.technorms.com Viki

    Hi. It would help if you could share the code with me so that I can look into it myself. You can send it to me via email. My contact information is on our About page. Thanks.

  • http://twitter.com/VAGolfDad Steven Powers

    I created a Chrome Web App for my company website as you instructed and it works great. I uploaded to the chrome store but it wants me to verify that I own the website. All I am doing is pointing the app to the main page. Is there a work around?

    • http://www.technorms.com Viki

      I am sorry. There is no workaround for this issue as Google is very specific about this rule. As you can see in this tutorial, I created a Chrome Web App for Mind42.com, but could not upload it to the gallery since I needed to have permission from the owners of Mind42.com.

      Google has implemented this rule so that, only the rightful owners can create a web app for any given domain, or someone who has the permission to create the web app, should be able to do so.

      If you could contact the admin of your company website, they can help you verify your app quite easily. Its just a 1 step process. Please check with them once.

  • hal

    I developed two apps by now and they work (of course with some appearing bug – but that quite o.k. in a test-phase) really great!
    Problems can be solved very good by just google for an anwer (mostly..) – for further information I discovert a quite new page, you may be interested too in it (http://creatingapps.telekomaustria.com/)
    Finally, thanks for this nice article!

  • F TE

    Hi there. First I must to say that your mini tutorial is great. Simple and direct. If it’s possible I would suggest to increase it, giving an example about how to add web pages to the Chrome extensions. I mean, how to create stand alone web applications wich doesn’t use online web pages.

  • http://twitter.com/shifat96 Shifat Taushif

    great tutorial. the problem is the process of uploading your app isn’t free. you gotta pay 5.00 USD

  • Bhuvana

    Hi I have been trying to upload my app but How to save manifest file as .json instead of .json.txt. even i used json formatting but its giving error msg as “The JSON data field does not contain JSON data”. plz help with this…
    The JSON Data field does not contain JSON data.The JSON Data field does not contain JSON data.

  • Bhuvanaa

    Everything is fine now but the logo is not displayed in my app

  • http://www.technorms.com Viki

    Well that can work, but it would be against the Google Chrome Web Store terms of use. So use with caution, as it may lead to the deletion of the app.

  • http://www.technorms.com Viki

    Good to know our guide was helpful. We’ll strive to create more such helpful articles.

  • Pingback: Chrome: come creare un'applicazione personalizzata per promuovere il proprio blog/sito()

  • Pingback: Why You Should Create A Chrome Web App For Your Site – True Web Presence()

  • Pingback: Unofficial Chrome Apps | raschix()

  • Pingback: 110-366: WorkFlowy and Chrome | Interlocked Pieces()

  • Pingback: How do you add a page/link to the Chrome speed dial?()

  • Pingback: MY KNOWLEDGE LIBRARY()