Opps! Errors in Google’s Chrome Extension Tutorials

I don’t know why, but I got interested in writing a Chrome  Extension. Yeah, I know, like 3 years too late. I figured it would just take an hour and I might learn something about well designed plug and play component  architecture. I quickly found the Getting Started tutorial. The screen shots were a bit out of date but the instructions were clear and simple. After following the tutorial the example extension (kitten photos from Flickr) failed to display images and failed to post any errors to the debug console.

So I went the Debugging Tutorial but I could not get my extension to load in the debugger.

Fooling around I could make text to and images display in the example extension’s popup window but the example code, provided by Google, failed to work. Did the Flickr query API change? Was a bug introduced in a Chrome update? Is my computer broken? A glitch in the matrix?

I love that feeling you get when you’re debugging utterly simple code and completely lost: “It should work and when I figure it out I will feel like an idiot!” (because generally it’s a missing a “}” or some other typo).

But this time it wasn’t me! It was Google’s tech writers.

First, if you want to debug a Chrome extension do not follow the instructions: Right-click the Hello World icon and choose the Inspect popup menu item.

Instead do this: Left-click the Hello World icon so the popup appears and then right-click the popup window! (Unless you are left-handed like me and you have to right-click where the world says “left-click.”)

Clicking with the “other mouse button” (the handed-neural way to say “right-click”) on the extension’s window brings up a context menu that let’s you inspect the extension and load its code and resources into a Chrome debugging window.

Second, if you want to see the kittens, change this line in popup.js:

    req.open("GET", this.kittensOnFlickr_, true);

    req.open("GET", this.searchOnFlickr_, true);