Hi guyss how are you doing its been quite some days since i had posted, as iam busy with some personal work.Okay lets jump into something exciting.Today iam going to show you how to build simple chrome app s and extensions. I think all you guyss are familiar with google chrome arent you? Ofcourse everyone since it has its own mark in the area of browsing and user interface and HTML5 and CSS3 support over its counterparts.It has lot of cool apps and extensions.
Lets see the basic technical requirements to build a chrome app:
- HTML
- JavaScript or JQuery
- CSS
- html files
- javascript files(Chrome app only supports external JS files)
- css files(if necessary. you can also use internal or inline stylesheets too)
- image files(if necessary)
- manifest.json(it contains details which describes your app)
- backrgound.js(it create thes event page and sets some values to the app like height and width of window etc.)
Manifest.json and background.js files should be kept along with the source files.
Note that All the files should be kept in a same folder.
Note that All the files should be kept in a same folder.
HelloWorld Chrome App
Step 1: Create manifest.json
{
"name": "Hello World",
"description": "Basic Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "256": "chrome.png" }
}
}
As you can see in the above script everything is self descriptive you can find the name of the app its version its icon size and name etc.
Step 2: Create backgorund.js file ,ofcourse the name of the file could be anything as you like but following conventions will make your life easier so lets stick to background.js.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('Helloworld.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
in this we specify the html page to be loaded and set the height and width of the window.
Step 3: Helloworld.html
<html>
<head>
</head>
<body>
<h1 align="center">HelloWorld iam in Chrome!!</h1>
</body>
</html>
Here in this app we dont include any CSS or JS files since the aim of our app is to say HelloWorld. Depending upon the necessicity we include those files in our app.
Execution of the app:
Step 1:
- Go to chrome://flags.in the address bar.
- Fin "Experimental Extension APIs", and click its "Enable" link.
- Relaunch Chrome.
Step 2:
- Goto setting->tools->extensions and check DeveloperMode.
- After that click Load unpacked extension button and navigate to your app directory and select it.
Navigate to chrome://apps and there you will find your app and click on that icon to launch your app.
our app:
If you wish you can upload your app into Chrome webstore by creating developer account and paying a one time registration fee of $5.00.
In my next post i will show you how to build a basic calculator chrome extension. Cheers.
our app:
If you wish you can upload your app into Chrome webstore by creating developer account and paying a one time registration fee of $5.00.
In my next post i will show you how to build a basic calculator chrome extension. Cheers.
No comments :
Post a Comment