Sunday, September 02, 2012

Google Apps part 2

Every extension,installed web app or theme has a JSON-formatted manifest file named manifest.json,that provides information/description about your app to the browser.For example:name,version number of your app,description are some of the details that can be retrieved from a manifest file.For the browser to retrieve the information we use the Javascript Standard Object Notation(JSON) which is generally used for lightweight data-interchange .(That explains why json is used as extension).
  • Create a folder in your desktop(Right click->New->Folder) and rename it to "helloworld".
  • Open Notepad
  • Save it as manifest.json in the folder you have created.
The format for manifest file would me something like this:-

  "manifest_version": 2,
  "description":"My first Chrome Extension",
  "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "index.html"
  • Just copy the above code and paste it in your manifest.json and save it.
  • Just download a sample icon of png format and paste it in your folder.
  • Create a new HTML file named "index.html" in the same folder, just type HELLO WORLD and save it.
  • Now open google chrome click the wrench icon->Tools->Extensions.
  • You can also navigate there by entering chrome://chrome/extensions/ in the URL bar.
  • If the Developer mode check button is unchecked please select it.
  • Now click load unpacked extension and select you folder.
  • Now your google app is ready and looks something like this.

  • Now if you want to share this app click pack extension.
  • Enter the extension root directory (do not worry about private key i will explain that later).
  • A .crx file will be created and share it with your friends .
If you have any doubts or clarification please feel free to comme or contact me.This is just a sample tutorial.More about the functions of manifest,json and cool examples  are coming up.Stay tuned.


Post a Comment