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.