Create your own Google Chrome App using JSON

in Articles / 1 Comment

Hi friends, this post by Srinu chilukuri. In this article he will explain you how to create your own chrome app and upload to Google Chrome Web Store. We are creating this app using JSON data, and using Google chrome extension we can compress it to a extension pack. You need a notepad or any text editor and Google Chrome browser installed in your machine.

Create your own Google Chrome App using JSON by Srinu chilukuri

Create your own Google Chrome App using JSON by Srinu chilukuri

demo link for Create your own Google Chrome App using JSON download link for Create your own Google Chrome App using JSON

Create a new file in your project directory called “manifest.json” and add to it the following code.
Place your app icon inside the directory with the name icon.png. You can use png,gif and jpg files for icon. But I prefer png. Now you need to create a JSON object with the details for your Chrome App (Extension) like below.

JSON Code

{
    //name - name of your application
    "name": "AnilLabs",
    //description - description of your application
    "description": "PHP Tutorial Online with Demo and Example.",
    //version - of you APP
    "version": "1.0",
    //manifest version (No need to change)
    "manifest_version": 2,
    //Image of your app. Image should be 128 X 128 px
    "icons": {
    "128": "anillabs_icon.png"
    },

    "app": {
    "urls": [
    //URL of your website/Blog etc..
      "http://www.anil2u.info/"
    ],
    "launch": {
    //URL of your website/Blog etc..This URL will open once the user clik on the icon
      "web_url": "http://www.anil2u.info/"
    }
    },
    "permissions": [
    "unlimitedStorage",
    "notifications"
        ]
    }

Save the file and open your Google Chrome. From the options open Tools -> Extensions.
The new tab will open.

Create your own Google Chrome App using JSON by Srinu chilukuri

Create your own Google Chrome App using JSON by Srinu chilukuri

At the top you can find the menu called Load Unpacked Extension. In not, check the Developer Mode at the top right of the window. Now you can see Load Unpacked Extension button. Click and select the directory where you have saved the above JSON file and Image of your App. Now you can see your app installed in Chrome. Open a new window and check.

Now we can pack the extension using Chrome to send anybody or to upload in Chrome Store. Open Extension Manager (Tools -> Extensions) and click on Load Extension. Open the Extension root directory, click Pack Extension. You can find a file with your app name having .crx extension. You can upload this Packed Extension to Chrome Store or share on internet to make you app popular.

App Icon with 128X128 size

Create your own Google Chrome App using JSON by Anil Kumar Panigrahi

Create your own Google Chrome App using JSON by Anil Kumar Panigrahi

If you are interested in learning more about packaged apps I recommend that you check out the Packaged Apps documentation at
http://developer.chrome.com/apps/about_apps.html

I have developed a web based applications of websites using PHP and MySQL , I also have some experience in the following areas: PHP, MySQL, Ajax, CakePHP.

Discussion 1 Comment

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>