Tag: Apps

How to Create Google Chrome App in Less Than 5 Minutes

With Google Chrome, a lot of things are very easy to do. One of them is creating your own app. Yes, we can create an app in less than 5 minutes. (Considering an image icon of 128×128 px is ready to use).

Prerequisites:

  • A credit card for $5 setup fee (Google will charge it for first time).
  • Google Chrome.
  • Your site or blog is added and verified to Google Webmaster Tools
  • App icon with 128x128px in dimension.
  • Screenshot of your site in 1280x800px or 640x400px
  • App image of 440x280px
  • Google Analytics ID (UA-XXXXXX-YY) (Optional)

Google Chrome App Creation:

Create a manifest.json file

Open a text editor (like Windows Notepad) and write the following code and make necessary changes:

{
	 "name": "NetRival - Technology Blog",
	 "short_name": "NetRival",
	 "description": "NetRival is a Blog Focused on Personal Technology, How-to Tutorials, Gadgets and Telecom",
	 "version": "0.1",
	 "manifest_version": 2,
	 "icons": {
		 "128": "icon_128.png"
		 },
		 "app": {
		 "urls": [
			 "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 ],
		 "launch": {
			 "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 }
		 }
 }

Change name, short_name (upto 12 characters), add some description and the urls. Now rename your image as icon_128.png. Create a new directory and place both manifest.json and the icon in it. Now using any compression tool zip the directory.  (We will need this zipped this file later)

Load the created app in Google Chrome:

Open chrome browser and visit chrome://extensions/ then make sure the checkbox named “Developer mode” is checked. You will find it on the top-right of the page (as shown in the image below).

Now “Load unpacked extension” by browsing the directory. Note: Here we don’t have to load a file. Just browsing the directory where the icon and the manifest.json file stored. Google Chrome will automatically load the manifest.json file from that directory. as shown below. In my case the directory was E:\NetRival_Chrome_App (See the highlighted area of the screenshot)

temp-chrome-app

Verify the newly created Chrome Extension:

The plugin should now work. To verify it visit chrome://apps/ (See the screenshot below. If you will click on it. It will open your site or blog.)

verify-check-app

Submit Google Chrome Extension to Official directory.

We will now submit the app to Google Chrome Store so anybody in the world can download it. We have to upload the manifest.json and png in a zipped file (as we have compressed earlier). But first of all we have to pay $5 registration charge to access Google Chrome Developer console. (This $5 charge will allow you submit up to 20 chrome apps and extensions, excluding themes)

Visit https://chrome.google.com/webstore/developer/dashboard and pay the $5 fee. After successful payment hit “Add New Item” and upload the zipped file.

After uploading we have fill some details and add screenshots. You may take the following image as example. Here the screenshots and other images must be in the size mentioned.

chrome-dev-dashboard

 

You may use Google Analytics to track traffic to the Chrome App in the store. Just fill the id and its done for preview. Here, It is recommended to use different GA id than your blog. Now hit “Preview” button at the bottom-right and test-drive how your app looks in Google Chrome Store. Once you are satisfied hit publish button, and you are done.

These demo link and readymade zipped file link will help you. Go ahead and create a Google Chrome app in just minutes. Good Luck!

Demo: https://bitly.com/NetRivalChromeApp
Demo Files: Download Here