Chrome.gwt - Building Chrome Extensions using GWT

As some of you might already noticed before, I'm not a big fan of JavaScript. Although I'm impressed by what is possible with JavaScript I don't like the rest of JavaScript... (yet!) :)

Still, I'm getting more and more interested in developing web apps or Chrome extensions. Fortunately, there's GWT.


If you don't know GWT yet, I very much recommend you to read the documentation and try the samples yourself first. You need to understand at least the basics of GWT, like what it does, how you configure it and what you get from GWT...

Ok, let's start. I've put up a simple sample at GitHub. So, if you don't want to read through the whole post feel free to skip ahead to GitHub here, for the GWT part of the sample, and here, for the AppEngine part (which is actually not related to the "Building Chrome Extensions using GWT").

Start by creating a GWT project in Eclipse. To keep it simple, create a new "Web Application Project", put the usual stuff in there and uncheck "Use Google App Engine". All we need for now is the Google Web Toolkit.

If you told the New Project Wizard to create a sample code for you, you're almost done. Now you just need to put the usual manifest.json into your new project's "war" directory. You can tell Chrome using your manifest which files to use. For example, I told it to serve a html file within the "war" directory, which linked to the actual JavaScript created by GWT in "war/*/*.nocache.js" after you hit the "Compile GWT" button.

However, you could easily tell Chrome to use the generated *.nocache.js file as a contentscript.

If you still have no idea what I'm talking about, I suggest you to browse through the sample's repository. It's a really easy sample without too much extras.

That's it! You're almost done! Now open Chrome's extension page, unfold "Developer Tools" and "Load unpacked extension...". Navigate to your project and load the "war" folder.

Now... That's it (this time for real)!

Further improvements

So far this was a really basic usage of GWT's capabilities. If you want to expand this sample and take advantage of Chrome's APIs without writing JSNI I suggest you to take a look at gwt-chrome. Also, I'm sure you can find some interesting bits in the SpeedTracer source (yes, it's built using GWT, too!).