Simple Tutorial to Make a Chrome Extension that uses jQuery UI

Google Chrome has had extensions for a while now, but because the Linux client is a little farther behind I never got farther than the simple hello world tutorial. Today, however, I am pleased to announce that Chrome extensions are totally boss, and it is extremely easy to get a jQuery UI skinned template app going in 15 minutes, just by following three easy steps.

Step 1 – Brushing up on the Hello World Extension Tutorial

Follow the Getting Started (Hello World) tutorial. The tutorial is very well written and will help you get your bearings about what extensions can do and the minimum you need to get started. A key part is the manifest.json

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

The name, version, and description fields are all self explanatory. The browser action one is interesting. It means that your extension will add a button to the browser (right after the address bar) with the specified icon. So far as I can tell the only thing that the button can do now is display a popup, though this popup can communicate with other parts of your extension. Permissions are also important, they specify what domains you can access via xmlhttprequests.

At this point you should have a working hello world tutorial, if not please continue to follow the rest of the directions on the full tutorial page, I’ll wait.

Step 2 jQuerying it up

After you finish the tutorial you may come to feel that raw JS is pretty harsh stuff and it would be great to get a little jQuery action in there. No need to fear, just add this to your “popup.html” file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

You don’t even need to add a file anywhere in your extension. Neat! Now you can rewrite the part of the tutorial that connects to the Flickr API like so:

$.get("http://api.flickr.com/services/rest/", {
    method: "flickr.photos.search",
    api_key: "90485e931f687a9b9c2a66bf58a3861a",
    text: "hello world",
    safe_search: 1,
    content_type: 1,
    sort: "relevance",
    per_page: 20
  }, function(data, status, request) {
    var photos = request.responseXML.getElementsByTagName("photo");
 
    for (var i = 0, photo; photo = photos[i]; i++) {
      var img = document.createElement("image");
      img.src = constructImageURL(photo);
      document.body.appendChild(img);
    }
  }
);

Love that fresh jQuery scent. Note that I left the constructImageURL function unchanged, so you’ll still need it if you want the extension to continue working.

Step 3 Adding jQuery UI (It’s Easy!)

This is the easy part. Go to the jQuery UI custom build your own download. Keep all the UI stuff checked and choose your favorite theme, you’ll have plenty of time later to choose exactly what you want or need, but for now just focus on seeing how easy it is to integrate. Now download the zip and extract in into your extensions root directory.

You can go to chrome-extension://extensionId/index.html and see all the magic of the jQuery UI demo, but working from inside a Chrome Extension. Of course extensionId is whatever that giant random string of characters that Chrome assigned to your extension was, something like opnnhifacfpohionnikhlecfgheooenk. (Learn more here)

Congratulations!

Although getting a simple skeleton/hello world extension up only takes a short amount of time, learning about all the possibilities and actually making an extension that does great things will take much longer. I hope that with this tutorial that starting will be very easy and nothing will stand in the way of your dreams.

Peace!