Home » Development » Animating Google Chrome Extension Page Action Icons

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',
                                        'searching_eyes_right.png',
                                        'searching_eyes_down.png',
                                        'searching_eyes_left.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
                };
                xhr.send();
Advertisements

2 Comments

  1. anthony says:

    so, any chance of actually seeing this implemented?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: