Tutorial: Building a Chrome app

By : bhaskar

This is a hands on tutorial about How to build chrome apps, with examples of two Chrome apps we published recently. Lets get started.

Chrome apps are of two types:

  • Extensions : They extend the functionality of Google chrome and the websites. They have little or no UI. Ex:Password Generator . Source code : Github
  • Apps: These are separate apps and appear just like any other website. Ex: To Do List. Source Code : Github

Depending on our requirement, we need to decide what kind of app we need to build.

Extension: Password Generator

Installation :

Visit the link Password Generator using google-chrome browser and click 'Add To Chrome' button on the top-right corner. Then an extra icon will appear right to the address bar of the browser. If you cant see any icons, try clicking the 'down arrow' that is visible between the address bar and the settings icon. Or just drag and decrease the size of the address bar to see the icons. (see screenshot from the app). Click the icon and a small popup will be opened which is the required app !

What it does :

It gets the domain of the currently opened webpage and generates a unique password for that domain by combining the master password that one can set and the domain. The combined string is encrypted using SHA2 and first 8 letters of the generated string is used as the password.

Its Manifest File

        {
        "name": "Password Generator",
        "version": "1.2",
        "manifest_version": 2,
        "description": "Generates domain specific passwords ",
        "browser_action": {
            "default_icon": "images/icon.png",
            "default_title":"Password generator",
            "default_popup": "popup.html"
        },
        "icons" : {"16" : "images/icon16.png","48" : "images/icon48.png","128" : "images/icon128.png"},
        "permissions": ["tabs"]
        }
        

Understanding the Manifest file

The above code is the content of manifest.json of the app you just installed(Password Generator).
If you observe the value of the key 'browser_action', it has 3 keys default_icon, default_title, default_popup.
  1. default_icon : It is the icon that is visible to the right side of the address bar.
  2. default_title : The 'name' that appears when you hover on the icon.
  3. default_popup : It is the html file that will be shown as popup when we click the icon.

Permissions

Chrome API lets your app access various things like the bookmarks, about the other tabs etc.. To use these features, you need to take appropriate permission from the user by mentioning them in the 'permissions' key of the manifest file. In the password generator app, I have used chrome api to get the current tab details. So, I have added the permission 'tabs'. Here is the full list of permissions : http://developer.chrome.com/extensions/permissions.html

Ajax call

When you are doing any ajax call, you may need to take permission depending on whether the 'url' used is local (bundled with app) or from the internet. If it is a local one, you need not take any permissions. But, if the url is from internet(not bundled with app), then you need to mention that url in the permissions. There is an option '<all_urls>' that you can give in the permissions if you want any url to be accessible.

Manifest file for chrome app To Do List

        {
        "name": "To Do List",
        "version": "1.2",
        "manifest_version": 2,
        "description": "Simple and best way to organise work and increase productivity. ",
        "app" : {
            "launch" : {
            "local_path" : "index.html"
            }
        },
        "icons" : {"16" : "to-do-list.png","48" : "to-do-list.png","128" : "to-do-list.png"},
        "permissions": []
        }
        
If you observe the difference between the manifest files of an app and an extension, an app uses the 'launch' parameter which tells Google chrome what to show when an app is opened. Where as the manifest file of an extension contains 'browser_action' which tells what icon to be used to recognise the extension(icon will be shown to the right side of addressbar). Rest of the things are the same.

Building

Package the whole files(html/css/js/images/manifest.json) in 'zip' format and distribute it by uploading the zipped app in the Chrome developer dashboard .


Can we help you build amazing apps? Contact us today.

Comments

Sunshine Coast Custom Web Development

Great article... There's not a lot out there on chrome development and this was very helpful.

commmenttor
© Agiliq, 2009-2012