Chrome App Creating an application for chrome (example)

As everyone remembers, at the last IO, Google announced its Web Store . And to fill it, the so-called web applications.
Today we will talk about how to create a simple application and prepare for the opening of the Web Store .
For example, we will create an application from the Hello World series, namely, a calculator.


First, let me remind you that in order for us to use web applications, we must launch a browser (the latest Chrome DEV build) with a parameter --enable-apps.
Well, now, actually, let's start writing our calculator. As with the extensions for chrome, we need a file manifest.json. With us, it will look like this:

{
 "name": "calc lite",
 "version": "0.1",
 "icons": {
  "24": "24.png",
  "128": "128.png"
 },
 "permissions": [
  "unlimited_storage",
  "notifications"
 ]
 "launch": {
  "local_path": "index.html"
 }
}

* This source code was highlighted with Source Code Highlighter.

Where name is the name of the application
version - the version for identifying
icons - in this parameter we specify two icons that will be displayed in our browser (next to the tabs and the launch link)
permissions - parameter in which we prescribe permission to access the "chips" (more about this later)
launch - in the local_path parameter we will specify our page with index.html markup
The content of the index.html file is, in fact, the web application you developed.
After you consider that your application is ready, you need to assemble it. This is done in the same way as with extensions: the menu item extensions - packaging extensions .
At the output, we get a file with the extension * .crx - this is our finished product, it remains only to drag it into the browser, or to launch it by reference.
If everything is correct, the following window will appear.

By agreeing, we can verify that our application is indeed installed in the browser. It will be with extensions

as well as in the quick launch bar

as we saw it on io

Launching the application, we will open the tab


Well, here’s the calculator itself:





Remember above, I talked about access to chips. Notifications have recently appeared in chrome (thanks, HTML5), and so, notification require permission from the user to notify, which we gave in the permissions parameter . And now, every time we divide by zero, our calculator will notify us of this.

There was a more used function, which is called HTML5 for the sake of HTML5. However, a pleasant opportunity to work with the database and so on remains with us!
More applications, good and ... good
Link to calc_lite / (the word light is the key here !!)