Google Chrome extension with Google JavaScript API

I’ve been in a huge rant about the awesomeness of Google Chrome over the past few days, and it got me wanting to become a little more involved with the project. I set out to create a Chrome extension (which is still very dev-stage) that would show me one of my Google Finance porfolios in a scrolling ticker-like style.

Unfortunately, Google’s JavaScript client API for developing web applications is meant (as far as I know) precisely for web applications: ones that are run (hosted) on the web.

The problem is, since you have to be logged-in to Google Finance to grab portfolio data, you need to have Google allow your website to “access” your account (http://code.google.com/apis/gdata/client-js.html) and when you do, Google will redirect you to the originating site that was requesting access.

Well…thats fine and great if you can be redirected to. Chrome extensions can’t. They are simply HTML/JavaScript files on your computer.

Now I’ve managed to come up with a solution that unfortunately can’t really be used by everyone unless you have a Google Finance porfolio #3. The portfolio ID must be #3 for the time being, because that’s what’s hard coded in my extension. Despite this (hopefully temporary) drawback, it does still demonstrate my workaround to the API authentication problem.

First, I created an HTML site that uses the Google API to pull my stocks into a small little ticker.

You can view the website here:  http://motrclan.com/chrome_extensions/my_toolstrip_original.html

NOTE: When you go to this site you will only see the Finance icon. To connect your Google Account and retrieve your data, first click anywhere on the page. This will try to log you in to your Finance account (don’t worry, I’m not stealing any personal information) and redirect you back to the site. After this, click on the Finance icon to retrieve your #3 portfolio.

Now that’s the majority of the work. Now to make it an extension, I created another file on my comptuer called “my_toolstrip_client.html” (as well as the neccessary “manifest.json” file) and here is the code:

<div id="my_toolstrip">

	<iframe scrolling="no" FRAMEBORDER="0" width="125px" style="margin-top: -3px;" height="40px" src="http://motrclan.com/chrome_extensions/my_toolstrip_original.html" />

</div>

You see, all the Chrome extension is, is an iframe to my site which serves as the extension, since my site can actually use the API.

Now if you do all this and try to load the extension in Chrome. You'll have to first go to the original site and click on the body to authorize access. Then you can click on the Finance icon in your Chrome extension and VIOLA! You have a scrolling ticker extension in Chrome.

I'll be working on this for a while and adding some features. Hopefully soon I'll be able to cycle through each of your portfolios and add all the different stocks from each one.

You'll notice that right now, all the stocks are saying 0.0% I think there is something wrong with the Finance API because I'm just grabbing a field straight from the documentation for the Finance API. The only thing that seems to actual give any numbers is shares.

Here's a screenshot: