To address the ongoing need for cross-platform applications, Google is attempting to emulate smartphone apps to build more user friendly web applications running directly from a browser. An application running inside a browser typically has its own dedicated UI coupled with rich user interaction. These could include games, photo editors or even video players that run inside the browser.
‘Chrome Packaged Apps’ or ‘Chrome Apps’ are installable web apps that are available for download on the Chrome Web Store and behave like a fusion of extensions and hosted apps. Packaged Apps don’t share the Chrome interface (unlike extensions) and allow hardware devices, such as your camera, to be utilised over TCP/IP (Network), USB and Bluetooth by giving additional privileges to the application, making web apps behave like desktop apps. The capabilities of Chrome apps include desktop notifications – hard to imagine with a browser as the platform just a few years ago.
Without diving into any more detail, let’s get into the essence of this article and make our first packaged app for Google Chrome. The app will show programmability of the Omnibox – Chrome’s address bar. It will also demonstrate how the Omnibox uses keywords such as “wiki” and “facebook” to allow access to the search engines of these respective sites and provide suggestions to the user.
What you will need:
1. An active internet connection;
2. Text editor: Sublime Text 2 with Chrome Apps plug-in;
3. Basic JavaScript knowledge;
4. $5 or `310;
5. A Google account (preferably a dedicated account for development purposes);
Let’s start!
1. Launch Sublime Text 2
2. Go to Tools > Command Palette… [Ctrl]+[Shift]+[P]
3. Search “install”
4. Click “Package Control” and install Package (If you don’t have Package Control, you can get it from: http:// dgit.in/1f4RWBN)
5. Search “Chrome” in the Package Control dialogue box
6. Click “Chrome Apps and Extensions”
7. Notice a new tab on the right side of Help called “Chrome”
8. Go to Chrome > New App… > Hello World!
9. Three files are created. Save each of them in the same directory to enable colour-coding. (These three files are typical to any packaged app on Chrome.
This is how the Developer Dashboard looks like.
The Extensions page in Chrome.
For our purposes, we’ll need only two files: manifest.json and background.js) manifest.json:
{
“name” : “Digit”,
“description” : “To use, type ‘digit’ [space] &
a search term into the address bar.”,
“version” : “1.0”,
“background”:
{
“scripts” : [“background.js”]
},
“omnibox” : { “keyword” : “digit” },
“manifest_version” : 2
}
The manifest describes meta-information about your application such as name, one-line description, version number (to avoid duplicity between updates) and additional information on how to launch your app and privileges associated with it. Manifest version 1 has been deprecated and is no longer available for use. You can find out more about the manifest
