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.
    image


    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.
    image

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

    as well as in the quick launch bar
    image

    as we saw it on io
    image

    Launching the application, we will open the tab
    image


    Well, here’s the calculator itself:
    image
    image
    image
    image

    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.
    image
    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 !!)

    Also popular now: