Sencha Inc. | HTML5 Apps

Blog

Google Contacts: Creating a Google Chrome App with Ext and the Google Data API

September 09, 2008 | Jamie Avins

When Google Chrome was released last week, I was interested in seeing how the Application mode feature worked. I revived an old project to interface with the Google Contacts Data API and built a small application to manage your google contacts which you can 'install'. The example extends the Ext.data.DataProxy to allow you to populate a store with your contact information to bind to any store driven components such as Grid, EditorGrid, ComboBox and DataView. Google Contact Manager

Google Contact Manager

Google Contact Manager will show and allow you to edit the title, primary email and primary phone of all your contacts. At this time there is nothing special that you need to keep in mind when developing a Google Chrome Application. To 'install' an application, select the Page icon to the right of the URL box and choose “Create Application shortcuts...” You can then choose to create shortcuts on your Desktop, Start Menu or Quick Launch bar. I chose to create the shortcut on my Desktop. Hopefully Google releases an additional API or a 3rd party plugin which allows you to integrate your web app with more desktop like features. How to Install Google Contact Manager

Working with the Google Data API

This example interfaces directly with Google's Data API with no need for a server-side backend. Google has released a JavaScript developer guide which is very useful when interfacing with their API. The example authenticates using Google's AuthSub proxy to obtain the contact information. The authentication token is stored as a cookie with a two-year expiration. One additional caveat when using the Google JavaScript API is that you must have an image hosted at the same domain as your page or it cannot authenticate. Google has recently released many different Data API's which you can interact with directly through JavaScript including a Language Translation API, a Visualization API and a Notebook API.

Google Chrome's Future

Google Chrome seems like it will be a game-changing step made by Google for the browser environment. If they kept this project secret for nearly 2 years, I wonder what else they have up their sleeves. I am eagerly awaiting the stable release of Google Chrome as well as the Linux and OS X versions. Google Chrome is currently in Beta and therefore it is not yet an officially supported browser. We have full intentions of bringing Google Chrome into our supported platforms and have created an issue tracking thread on the forums.

There are 21 responses. Add yours.

Jay Garcia

6 years ago

Dude, this is great!  Flex the Ext muscle in chrome smile

Elson

6 years ago

it is wonderful, i’m very extesion for chrome.

Steve Jobber

6 years ago

Hi, i like your background, can i have a link or can u email it? thanks in advance.. nyahaha! seriously, really cool, i just hope they keep pushing the chrome browser, i mean pushing and hurry the Linux/Mac version too, and to have specially plugins!! thats it.. and ow, im serious about the wallpaper, send it over!! please, thanks wink

Jonny

6 years ago

I agree - the application mode feature is pretty cool. The Ext JS toolbar fits nicely inside it…making it feel like a typical desktop application. Such a simple idea - but a great one!

Bill Francis

6 years ago

This is an AWESOME example on extending Ext with a client side JavaScript API.  Very nice, and thank you.

Nick Williams

6 years ago

A few weeks prior to Chrome’s announcement I was wishing that there was a way to trim down all the browsers and get rid of the tool/status/url bars and leave only the essential title bar and buttons.  I was ecstatic to see this feature in Chrome.  Shortly after its release, several bloggers who were fans of Firefox came to its defense and linked to some plugins that give similar functionality to the favorite Chrome features - one of which was Prism, to answer this very situation.

I didn’t know about Prism prior to the Chrome publicity, but it provides this ‘application window’ functionality for Firefox in much the same manner.

Neil

6 years ago

When I read of this application feature I thought ‘HTA’ right away, seems exactly the same, and HTA’s never became popular. Is there anything different this time? Or is it just that people weren’t trying to build apps back then so it wasn’t interesting? perhaps I should stop being lazy and do some research myself o_O

aLe

6 years ago

(Prism || Chrome) + ExtJS == Silverlight.dead()

great works!

Conosco i tuoi contatti « Alessioma’s

6 years ago

[...] Conosco i tuoi contatti Extjs é sempre al passo coi tempi. Un’altra semplice e pratica applicazione desktop a base di Javascript e Browser Contact’s Manager [...]

Andreas Matern’s Weblog » Blog Archive

6 years ago

[...] Ext JS - Blog. [...]

Derick S

6 years ago

Jamie, this is really nice.  Any chance you have an update that has search and works offline with gears? wink  We really like being able to access our contacts through an ext interface. Hot!

Daily del.icio.us for September 10th through Septe

6 years ago

[...] Ext JS - Google Contacts: Creating a Google Chrome App with Ext and the Google Data API - Google Chrome seems like it will be a game-changing step made by Google for the browser environment. If they kept this project secret for nearly 2 years, I wonder what else they have up their sleeves No tag for this post. [...]

mirws

6 years ago

This is a great Idea…. I have an application built on ExtJs, and it looks like binding by the chrome ...keep move on google, I wait the official released smile

film fan

6 years ago

there are so many advantages and features with Chrome, such as it’s speed, for example; now if only they would take care of the browser’s flighty cookie management…

krzak

6 years ago

I gave it a try but it doesn’t work for my test account. No data is loaded into grid.

Ankur

6 years ago

Very nice tutorial and application.

We are developing something similar and got into problem.

Can you please clarify this sentence - “One additional caveat when using the Google JavaScript API is that you must have an image hosted at the same domain as your page or it cannot authenticate.” Looks like we are getting this same problem.

Waiting early reply.

Thanks.

TaunT

5 years ago

trying ExtJs, looks good smile

kabin

5 years ago

saol adm?n boyle ol hep efer?n.

cinsellik

5 years ago

I am grateful to you for this great content.

Acai

4 years ago

I still don’t even use Google Chrome yet; I may adopt it in the future once I find out more why that may be to my advantage.

Charles

3 years ago

I’m digging the new Google Chrome, not sure it’s up to par with Firefox, but I think it has a good future ahead.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.