How-To Develop Four Kinds of Google Chrome Apps | Google Web Store

The Google Chrome web browser, a free download from the Google web site, offers super fast web browsing and optimized Javascript execution. Not surprisingly, Chrome runs on the fame WebKit browser engine that was originally developed by Apple. The Webkit has since become open sourced. One of WebKit’s interesting features, and which pre dates HTML5’s ability to have offline apps, is to be able to host “installable” apps.

Google’s Chrome browser, which also serves of as the main client interface on Google Chromebook’s, offers four kinds of installable application models.

1- Extensions
2- Hosted Apps
3- Packaged Apps
4- Themes


Extensions


Extensions extends Chrome’s functionality having direct to all APIs. They reside in the Chrome’s Toolbar. They can use Chrome’s API to interact with the browser’s objects like the bookmark manager. Extensions can also be apps that use news feeds, use services like Google Finance or Alerts.

Creating an extension is quite easy. You need a manifest file to describe your extension, some html, css and some javascript (optional).

Extensions development path follows three to four steps:

  1. Create a web application
  2. Create a manifest.json file at its root
  3. Install in Chrome for testing
  4. Upload to Google Chrome’s Web Store

Toolbar icon
Toolbar icon

Create a web application
Use any editor you like. Your application may have one or more pages, css and javascript files for complex apps or embedded for simple apps. Your application may also include images, audio and video files.

This must seem trivial, however, your app must have one page, a landing page which will be defined in the manifest. Its path is relative to the manifest.json file. I always put my landing page at the root of the site along with the manifest.json file. It makes for easier management.


  • Create a manifest.json file at its root
  • Add a text file. Name it manifest.json. The name and extension are important and must always be named the same way.


The manifest file is a json formatted file that describes your extension and its functionality.
For example the following manifest file extract defines a name, the version of the application and a description. In the browser actions section, which by the way is only available with Extensions, the icon (19 pixels) to be used in the toolbar is defined and the main page.

{
  "name": "My Extension",
  "version": "1.0",
  "description": "This is a simple Extension",
  "browser_action": {
    "default_icon": "extIcon.png",
    "popup":"index.html"
  }
}

Test your app
Testing your Extension app involves installing it in Chrome, setting bookmarks, if needed in your Javascript code and stepping through the code like any other application. Open the Extension Manager page. You will it under the Tools menu from Tool Wrench icon in Google Chrome’s toolbar.

The Extension page open, enable the Developer mode; the link is located just the header on the right hand side of the page. The Developer Mode expands the installation menu. Use the Upload Unpacked Extension button; navigate to the folder where your files and manifest.json file are located; Confirm your folder selection and initiate the upload process with the Select button.

If every goes according to plan, you should see the configuration details of your Extension and the icon will be displayed in the Toolbar. My example displays a popup of a picture from the condo we renter last summer before last in Daytona Beach, Fl.

That is as simple as it gets. Chrome offers an extensive API and can access external sites, news feeds, you own web site or web services. To deploy your app, read the deployment section below. The process is similar to all application types.

Extension configuration page in Chrome
Extension configuration page in Chrome
Extension preview
Extension preview
Hosted app icon on Home page
Hosted app icon on Home page

Hosted Apps


This type of app as the name suggests is hosted on an external web server, like your own site, or it can be hosted on Google’s Web Store as is most often the case. It can be as simple as a static web page or a full scale application.

Like the Extension, Google Chrome requires a manifest file in the json format. The difference with hosted apps is that they are easier to maintain. They also have an app icon on the Google Chrome home page as the following screenshots demonstrates.

Hosted application tab when launched
Hosted application tab when launched
Hosted app configuration in Extension page
Hosted app configuration in Extension page

Creating a hosted app
As before, create a folder for your app’s configuration files and app icons. No html or javascript files are needed as your app resides somewhere else. For the Home page icon, choose a 128 pixel image in a png or jpg file format. The manifest.json would look something like this:

{
  "name": "My HubPages Profile",
  "description": "Read my technical hubs",
  "version": "1",
  "app": {
    "urls": [
      "http://klanguedoc.hubpages.com/hub/"
          ],
    "launch": {
      "web_url": "http://klanguedoc.hubpages.com"
    }
  },
  "icons": {
    "128": "TheFisherman.png"
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

Under the app section, you need to specify the urls that the app will access and that will need permissions on the local machine. You don’t need to specify each file in your app as you can use wild cards and you only need to specify the start of the url where the pages reside. For example, at HubPages, all the Hub file names are appended to the the main url for a given profile. In other words, they are located in a sub-folder under your sub-domain. In my example, my hubs are located beneath my sub-domain as follows:

http://klanguedoc.hubpages.com/hub/

Adding the above url to my manifest.json file will locate any file following the main url like

http://klanguedoc.hubpages.com/hub/FluorineFX-Basic-Setup-in-Visual-Studio-2008

or

http://klanguedoc.hubpages.com/hub/Creating-Native-Mobile-Apps-with-these-Free-and-Open-Source-Mobile-App-Development-Frameworks

Another important aspect is the permissions node. This defines what permissions have on the installed machine. You also need to specify the main launch url. Additionally in the launch node you can specify the type display your app will have using the container element. If you specify “panel”, your app will launch in a panel, similar to the Extension, otherwise if you omit the container entry or define the container as “tab”, the default, your app will load in a new tab.

Finally the permission section can be any combination of "background", "clipboardRead", "clipboardWrite", "geolocation", "notifications", and "unlimitedStorage".

Full documentation is available on Google Chrome’s web site (see resources). Once finished and tested as Extensions, you can upload the hosted app configuration information to the Google Web Store.

Testing and deployment
Testing and deployment mimic the same functionality as Extension.

Packaged Apps


This type of app is a mix of both Extensions and Hosted apps, I find anyway. Packaged Apps are downloaded and install in Chrome like an Extension. The application has an icon on the Home page and has access to Google Chrome’s APIs, except the Browser Actions. As Extensions, your application assets: html pages, Javascript, images and other assets and the manifest.json file reside in the same site folder. The manifest.json file has its own configuration peculiarities. Notice the “app” element, it defines the relative path of the main landing page of your app. The icons: 16 defines the favicon; 128 defines the Home page icon.

{
  "name": "Copy & Paste",
  "version": "1.0",
  "description": "An embedded Adobe Flex (Flash) app",
  "app":{
  	"launch":{
  		"local_path":"Packaged_Apps.html"
  	}
  },
  "icons": {
    "16": "copypaste16.jpg",
    "128": "copypaste.jpg"
  }
}
Manifest syntax error
Manifest syntax error

Testing and deployment

This type of app implements the same process as the two previous app types for testing and deployment. Review the procedure in the Extension section above. If you make a mistake in the manifest file, Chrome will block the upload and display where the error is occurring.

Packaged app configuration in Extension page
Packaged app configuration in Extension page
Copy & Paste app icon
Copy & Paste app icon

Once installed, the app's icon appears on the Home page and the favicon appears in the open tab next to the title of the app. When launched, the app appears the same way as a Hosted app. The only difference is this one is actually installed on the local machine.

Copy & Paste app
Copy & Paste app

Themes


Themes are not really apps. Rather, they define the overall style of the toolbar, tabs and Home page of your Google Chrome browser and, if you have a Chromebook, your desktop. Themes are always free downloads from the Google Web Store. They offer a unique opportunity for a savvy marketing to promote their brand, or web site as is most often the case if you browse the current Theme listings.

Themes configuration follows the same procedure as outlined for the previous app types. I previously wrote an article demonstration how to develop a Theme. I suggest have a look at that article for further reading and reference.

Deployment


No matter your type of app, the deployment procedure is the same. Your app tweaked and tested, you need to package your app into a crx archive file for uploading to the Google Chrome Web Store. You are also going to need a certificate, which at the time of this writing is only $5.

When you use the Developer Dashboard to publish your app, a crx file of your app is created for you. Distributing your app on your own will require you to package your app as a crx as all Chrome apps are served up a crx files.

Packaging your app as a crx archive is done from the Extension page, second button Pack Extension the Developer mode. Select your app’s root folder and the private key file, .pem, if you have previously packaged your app, otherwise leave to the field blank and a provate key file will be created. This file is important and required when you upload the app to the Google Web Store and when you are updated your app in the Google Web Store.

Sales and Marketing



A quick word, although the breath of this subject is beyond the scope of this article. Different types of payment are available:


  • Free

  • One-time payment

  • Monthly or yearly subscription

  • Free trail with option b or c

  • Custom payment solution


In summary


Web applications continue to gain favor with developers, on mobile devices, devices like web TVs and more traditional computers including desktops, laptops and netbooks. As technologies mature and offer developers similar APIs as native applications, web applications will continue their inroads against the native apps. Installable apps holds a lot of promise, allowing users to be offline, will continue to level the playing field. Better offline storage and integration with native APIs are needed to offer the same or similar user experience as native apps. To that end, many frameworks are available, both free or open sourced or commercial, providing that integration, thus.


More by this Author


Comments 4 comments

visitmaniac profile image

visitmaniac 5 years ago

Very cool and great info I have been looking into building an app myself for Chrome. Its so fresh and clean and so many great apps for it I am sure it will continue to grow in size.


klanguedoc profile image

klanguedoc 5 years ago from Canada Author

It is a great market to get into; you can deploy to all devices that has a Chrome installed on it, so potentially reaching computers and mobile devices from one developed app. Thanks for the comment. Keep me posted on your venture, or turn it into a hub.


James McCullough profile image

James McCullough 4 years ago from Kelowna, British Columbia

Excellent information here. I had no idea where to start with developing for Chrome, but now I do. Thanks for creating this hub.


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

I am glad I was able to help. Chrome is a great piece of software and I hear more and more companies are finding ways to monetize their apps. Good luck with your project

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working