ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on October 16, 2011

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 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",

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": [
    "launch": {
      "web_url": ""
  "icons": {
    "128": "TheFisherman.png"
  "permissions": [

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:

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


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",
  "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 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.


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.


    0 of 8192 characters used
    Post Comment
    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      7 years ago from Canada

      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

    • James McCullough profile image

      James McCullough 

      7 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 imageAUTHOR

      Kevin Languedoc 

      7 years ago from Canada

      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.

    • visitmaniac profile image


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


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)