Last week I built a simple Chrome extension for tracking tab usage and wanted to share the discovery process. The initial idea came from a few of us at work looking at how many tabs we had open and that we should (jokingly) aggregate this into some kind of live activity monitor. I looked at some of the documentation for Chrome extensions and it seemed simple enough to create a counter with the current number of open tabs.

Chrome extensions are written using stripped down HTML pages, CSS, and Javascript, and held together using a JSON file that describes how the pages should be used. To create the basic counter I built on the Hello World example and created a simple popup with a placeholder for the counter. It was pretty straightforward to find the number of tabs open since Chrome has functions to get all the windows and to get all the tabs in a window, and I wrote this value to the placeholder.

While I was building the counter I noticed that there are event listeners for when tabs are opened or closed and started to wonder about plotting this on a graph with time. The easiest way to hold onto a log of the browser tab events was to create a background page listening for events and push them onto a Javascript array. Background pages are special pages that run behind the scenes as long as the browser is open, and Chrome provides a function to get their variables from other extension pages, like popups. This makes it easy to grab the log when a popup is opened and render the information.

I looked around at some different graphing libraries and settled on Flot, mostly because it includes jQuery and I had seen it used nicely in Managing News. This example, using only one line of Javascript to declare the graph, was especially impressive and exactly what I needed.

Wrapping that all together and tinkering for a bit, this is what I ended up with:

I hope this will help others who are interested in starting out with Chrome extensions. To dig deeper or give it a try, take a look at my repository or the Chrome extension documentation.

About a half hour ago I found a really great script on Github for quickly browsing posts on a page. If you are on the homepage of my site, try typing the following hotkeys:

If you have used the hotkeys in GMail or Google Reader, you will have likely used these shortcuts before. This usability pattern is showing up in quite a few places and I really like it. Take a look at how effective it is for browsing images on The Big Picture (make sure you're on a post), on Flickriver, and on FFFFOUND!.

Drupal is a great candidate for this pattern since quickly browsing through a list of nodes is quite common. Also, since Drupal comes with jQuery, adding the script wasn't too difficult. Here are some small adjustments to make it work.

This guide assumes that you are using Views to generate a list of nodes but it should be easy to adapt to other situations.

1. Snag the jQuery version provided on Git and save it to your theme's directory.
2. Add the page_keys.js to Drupal by adding the line scripts[] = paging_keys.js to your theme's .info.
3. We have to make a few small adjustments to the script to make it play nice with Drupal. Go take a look at the settings array found on line 84 of paging_keys.js. Let's change it to the following:
   
var config = {
  nodeSelector: '#main .node h2.node-title a',
  prevPageSelector: '.pager-previous a',
  nextPageSelector: '.pager-next a',
  pagingNavId: 'paging-nav',
  keyNext: 'j',
  keyPrev: 'k',
  keyNextPage: 'h',
  keyPrevPage: 'l',
  keyRefresh: 'r',
  additionalBodyClass: 'paging-keys',
  bottomAnchor: 'bottom'
};


   This assumes that the list of nodes will be under the div '#main', but you will probably want to change this to be more specific. For my own site I've also used the view name in the selector to ensure that there is not any weird behaviour. The only other changes to the config array were for the Drupal pager.

4. We want to add the anchor "bottom" to the last node of the View, allowing the script to move nicely between pages. To do this, we can add a small snippet to the node title link in node.tpl.php. Here is what my revised node title code looks like:
   
<h2 class="title node-title">
  <a href="<?php echo $node_url; ?>"<?php if($view) { end($view->result)->nid == $node->nid ? print 'name="bottom"' : NULL; } ?>><?php echo $title; ?></a>
</h2>


   This will check if we are displaying the last node for this view and add 'name="bottom"' to it's title link.

And you are done! Hopefully everything is working great. If you encounter problems, make sure that caching is turned off while you try to integrate this.