Home » Posts tagged 'JavaScript'

Tag Archives: JavaScript

Animating Google Chrome Extension Page Action Icons

I’m enjoying using (and working on) Library Lookup, but I’m not entirely satisfied with the Page Action icons that pop up when searching, or when a book is found, or not found. In particular, I wanted a small animation while the search was ongoing, something like this: .

Unfortunately, the animated GIF didn’t work – Google Chrome Extensions don’t support them.

Briefly deterred, I regrouped and tried a different tack – something I like to call A Bunch o’ PNGs and Some Javascript. First, I got myself three PNGs to display (okay, that’s not entirely true – they’re what I made the GIF from to begin with)

  • searching_eyes_right.png
  • searching_eyes_down.png
  • searching_eyes_left.png

Next, I needed a way to switch between the frames. I put the image names in an array, initialized an index, and wrote a small function that uses window.setTimeout to switch to a new icon every 0.3 seconds.

                var searching_images = ['searching_eyes_down.png',

                var image_index = 0;
                var keep_switching_icon = true;
                function rotateIcon()
                   if ( keep_switching_icon )
                      chrome.pageAction.setIcon({tabId: sender.tab.id, path: searching_images[image_index]});
                      image_index = (image_index + 1) % searching_images.length;
                      window.setTimeout(rotateIcon, 300);

Then I start the rotation just before hitting the web server to see if the book’s available and stop it when a result is found. Flipping the keep_switching_icon flag as soon as the search comletes ensures that the animating thread doesn’t overwrite a “found” or “not found” icon.

                window.setTimeout(rotateIcon, 300);
                var xhr = new XMLHttpRequest();
                xhr.open("GET", searchurl, true);
                xhr.onreadystatechange = function() 
                    if (xhr.readyState == 4) 
                       keep_switching_icon = false;
                       if ( xhr.status != 200 )
                            chrome.pageAction.setIcon({tabId: sender.tab.id, path: 'my_book_error_19.png'});
                            // other error handling
                      // process found and not found cases

IE binds to id attributes, or “How I learned to love var

I recently converted the LibraryHippo “Family Status” page to use AJAX to fetch individual card statuses, instead of having the server aggregate all the statuses and send the complete summary back to the user. It was fairly straightforward, with one notable exception – Internet Explorer.

AJAX LibraryHippoWhen using Firefox or Chrome, as soon as the page loaded, the user would see a list of cards that LibraryHippo was checking, complete with throbbers. As results came in, the matching progress line would disappear and other tables would fill in, holding the results – books that have to go back, holds ready for pickup, etc. I don’t mind admitting that I was a little proud of my first foray into AJAXy web programming.

The morning after I finished the update, a co-worker signed up. Unlike everyone else I knew, she used Internet Explorer. She hit the summary page and everything stalled. The progress list was populated, the throbbers were throbbing, and… that’s it. They just kept going. Oh, and a little indicator woke up in the status bar, saying that there was an error on the page: “Object doesn’t support this property or method”. The reported line numbers didn’t match my source file, but via judicious application of alerts()s, I was able to isolate the problem to a callback that’s executed on a successful card check to update a span that holds a row count:

 function refresh_table_count(table_selector)
    count = $(table_selector + ' tbody tr').length;
    $(table_selector + ' thead #count').html(count);

That seemed pretty innocuous, and not dissimilar from code that I had elsewhere in the <script> block. Quick web searches revealed nothing, so I resorted to cutting and renaming bits until I could see what was going on. I was down to an HTML body with a single table definition, and the function above. The error persisted. Suspicious, I renamed the count variable to c, and the problem disappeared.

At this point, I was convinced that IE’s Javascript interpreter reserved the count keyword for itself. I made this claim to a friend, who was sceptical. Eager to show him, I whipped up a quick example, and… it worked. There were no problems with the word count. I was stymied again, but not for long: my sample HTML file didn’t include an element with a "count" id. Once I added the count id, the sample broke.

It turns out that IE is actually creating a global object that matches the item’s ID! As Rick Strahl explains, the problem is a little worse than that, because the assignment on line 3 above should’ve overwritten the variable reference, but there’s “some whacky scoping going on”.


  1. do away with the temporary variable (possible in this case)
  2. rename the temporary variable (always possible, but lame)
  3. use more specific id attribute values (probably a good idea in any case)
  4. use the var statement to declare all variables – this is safest and probably the easiest to remember:
function refresh_table_count(table_selector)
    var count = $(table_selector + ' tbody tr').length;
    $(table_selector + ' thead #count').html(count);

Now everything is working on the new page, and I’ve every confidence that var will help keep it so.