12:46 AM
Unknown
http://royalgitzian.blogspot.com
Hello folks, recently I have registered with Google and published a couple of Google Chrome browser applications to the Chrome Web Store. I am here to share my experience and knowledge with you all.
The first app that I published to the Google Chrome Web Store is my blog app, The4thDimension, as shown in the screenshot.
Later I published a 'Hello Packaged App' app to the Chrome Web Store and now its up and working fine. I have also written a small Game App, show in adjacent picture, for Google Chrome, you can download it here.
The primary difference between a Packaged App and a Hosted App is the manifest.json (I will explain one shortly). Rest all is same for both of them.
In behavior, a Packaged App is an installable application & can RUN even when the browser is offline whereas the Hosted App is hosted from a web server and will NOT RUN offline.
1. What is 'manifest' file and how to create it?
A manifest file is a little JSON description file which holds the meta-data of your application. The code for manifest.json file is available at the chrome web store docs, but here is the customized code for the Hello Packaged App manifest file.
{
"name": "Hello Packaged App",
"description": "Demonstration to create a simple packaged app",
"version": "11.4.2.2",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"16": "icon_16.png",
"128": "icon_128.png"
}
}
Copy the above code into the notepad and save it as manifest.json. Here is the description for the above code.
name : This field of the manifest file denotes the name that will be seen in the web store by the users of your application.
description : This field describes the functionality and usability of your app in brief.
version : This is the version of the app. It can have value with three decimal point at the most. For example 3.2.0.1 would be correct value for version of the app.
app : The app field describes the behavior of the app. app field has a child field 'launch'
launch : The launch field describes the action to be taken when the application is launched. launch filed has a child filed 'local_path'
local_path : The local_path field denotes the path of the target file to be launched when the app starts running. It can refer to .html, .js, .php kind of files.
icons : This field has 2 sub fields '16' and '128' which refer to 16x16 PNG image icon and 128x128 PNG image icon for the application. Both of these fields are compulsory for the application to run.
2. Creating the target file for the launch field.
In the above code I have created main.html file. You can write whatever you want but must be a valid HTML code.
3. Packaging the application.
This is where I was stuck initially, but had figured out the way later. Now you have to select all the 4 files mentioned below and create a zip archive for example 'HelloPackagedApp.zip'
1. manifest.json
2. main.html
3. icon_16.png
4. icon_128.png
4. Publishing & Charging for the application.
Log into Chrome Web Store and goto the Developer Dashboard. Click the 'Add Item' button. A page will appear where it will facilitate you to upload the 'HelloPackagedApp.zip' file, fill the entries in the page and click 'Publish'.
Regarding the money that you can charge to users, Google provides a Web Store Payments API which makes is pretty simple to charge the users for the App, maintain licensing for the App etc.
5. Testing & Running your App.
When you are done with publishing the app. Search the Chrome Web Store with the name of your application (here 'Hello Packaged App') install it. When you open up a new tab, you should see something like the one shown below in the red colored rectangle.
The first app that I published to the Google Chrome Web Store is my blog app, The4thDimension, as shown in the screenshot.
The primary difference between a Packaged App and a Hosted App is the manifest.json (I will explain one shortly). Rest all is same for both of them.
In behavior, a Packaged App is an installable application & can RUN even when the browser is offline whereas the Hosted App is hosted from a web server and will NOT RUN offline.
1. What is 'manifest' file and how to create it?
A manifest file is a little JSON description file which holds the meta-data of your application. The code for manifest.json file is available at the chrome web store docs, but here is the customized code for the Hello Packaged App manifest file.
{
"name": "Hello Packaged App",
"description": "Demonstration to create a simple packaged app",
"version": "11.4.2.2",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"16": "icon_16.png",
"128": "icon_128.png"
}
}
Copy the above code into the notepad and save it as manifest.json. Here is the description for the above code.
name : This field of the manifest file denotes the name that will be seen in the web store by the users of your application.
description : This field describes the functionality and usability of your app in brief.
version : This is the version of the app. It can have value with three decimal point at the most. For example 3.2.0.1 would be correct value for version of the app.
app : The app field describes the behavior of the app. app field has a child field 'launch'
launch : The launch field describes the action to be taken when the application is launched. launch filed has a child filed 'local_path'
local_path : The local_path field denotes the path of the target file to be launched when the app starts running. It can refer to .html, .js, .php kind of files.
icons : This field has 2 sub fields '16' and '128' which refer to 16x16 PNG image icon and 128x128 PNG image icon for the application. Both of these fields are compulsory for the application to run.
2. Creating the target file for the launch field.
In the above code I have created main.html file. You can write whatever you want but must be a valid HTML code.
3. Packaging the application.
This is where I was stuck initially, but had figured out the way later. Now you have to select all the 4 files mentioned below and create a zip archive for example 'HelloPackagedApp.zip'
1. manifest.json
2. main.html
3. icon_16.png
4. icon_128.png
4. Publishing & Charging for the application.
Log into Chrome Web Store and goto the Developer Dashboard. Click the 'Add Item' button. A page will appear where it will facilitate you to upload the 'HelloPackagedApp.zip' file, fill the entries in the page and click 'Publish'.
Regarding the money that you can charge to users, Google provides a Web Store Payments API which makes is pretty simple to charge the users for the App, maintain licensing for the App etc.
5. Testing & Running your App.
When you are done with publishing the app. Search the Chrome Web Store with the name of your application (here 'Hello Packaged App') install it. When you open up a new tab, you should see something like the one shown below in the red colored rectangle.
