Google Contacts: Creating a Google Chrome App with Ext and the Google Data API
September 9, 2008 by 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 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. 
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.
Posted on September 9th, 2008 at 1:18 pm
Dude, this is great! Flex the Ext muscle in chrome
Posted on September 9th, 2008 at 1:48 pm
it is wonderful, i’m very extesion for chrome.
Posted on September 9th, 2008 at 3:58 pm
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
Posted on September 9th, 2008 at 4:02 pm
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!
Posted on September 9th, 2008 at 5:51 pm
This is an AWESOME example on extending Ext with a client side JavaScript API. Very nice, and thank you.
Posted on September 10th, 2008 at 7:57 am
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.
Posted on September 10th, 2008 at 7:50 pm
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
Posted on September 11th, 2008 at 8:33 am
(Prism || Chrome) + ExtJS == Silverlight.dead()
great works!
Posted on September 11th, 2008 at 8:49 am
[...] 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 [...]
Posted on September 11th, 2008 at 12:00 pm
[...] Ext JS - Blog. [...]
Posted on September 12th, 2008 at 5:14 pm
Jamie, this is really nice. Any chance you have an update that has search and works offline with gears?
We really like being able to access our contacts through an ext interface. Hot!
Posted on September 13th, 2008 at 9:07 pm
[...] 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. [...]
Posted on September 15th, 2008 at 2:54 am
This is awesome! I’m already having some ideas how can I use this.
Thanks, keep up the good work!
Posted on September 16th, 2008 at 4:15 am
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
Posted on September 16th, 2008 at 6:26 pm
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…
Posted on September 19th, 2008 at 5:56 am
I gave it a try but it doesn’t work for my test account. No data is loaded into grid.
Posted on October 14th, 2008 at 2:18 am
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.
Posted on November 19th, 2008 at 8:44 am
trying ExtJs, looks good