Weekend Project: TabZolo.co

With the popularity of InboxZero as a movement for being more productive with email and the getting things done¬†methodology, I had an idea that lent itself to being more productive with one’s Internet browsing. It also lent itself to a technical curiosity I had: figuring out how to develop Google Chrome extensions. This is my recap of how TabZolo came to be.

I’m a web developer and use Google Chrome as my default browser like many others. My browsing habits tend to lead me to having multiple tabs open in any given session. Most times these tabs are unrelated to the tab I’m actively looking at, assuming that I’m even actually using my browser at the time as opposed to having it minimized for later. For example, as I write this, I have six other tabs open with one playing an awesome Diplo & Friends mix, another with Gmail open, the InboxZero homepage, etc…Other times, say when casually browsing daily news sources, I’ll end up opening up several tabs after seeing their headlines on previous pages, or links within articles I’m reading. It can get a little crazy at times and just add to my mental list of ToDos when they’re not really that important. What if at the end of your browsing session, you actually completed what you set out to do when you fired up your browser instead of getting sidetracked by secondary content? That’s where the seed idea for TabZolo came about.

How do you even build a Chrome extension?

I imagined having an extension that would somehow limit my Chrome usage to a single tab that would encourage me to actually go from start to finish on any single page I was viewing instead of being mentally indebted to other background tabs tormenting me until I either: read them or closed them all in frustrating defeat. Mind you, I had no idea what Chrome’s extension development was like and what freedoms it offered but I thought the idea was cool and motivating enough to actually investigate its offering.

Getting started with Chrome extension development was a lot less intimidating than I had imagined. It’s all just JavaScript/HTML/CSS work. There’s a simple introduction page that was easy enough to follow (if you’re into the whole programming thing) with instructions on how to write a simple extension that will dynamically generate kitten pictures in a popup after clicking the extension’s button. The painlessness of that guide made me comfortable and more intrigued to get going on my TabZolo concept.

Chrome’s approach to extension development is interesting to me from a technical perspective in terms of how one can architect an extension. A developer is able to create extensions that are always running in the background and are aware of each page you’re viewing and even interact with those pages or only execute certain functions depending on the browser action that occurred (for eg, when you open a new window or change a URL). Now, all of this seems pretty obvious because clearly the allure of extensions is that they add to your browsing experience in some relevant way but to get the generic overview of how they do so was insightful instead as opposed to considering the end result of someone’s to be magic.

Can I haz prototype?

I started my tour of the chrome.* APIS library and ended up with a respectable, albeit rough, prototype of TabZolo (then called OneTab/TabOne before I saw a similarly named extension) in about two-ish hours I think it was. It was exciting to go from having an idea without any knowledge of how to actually build it to seeing it come together in fine fashion after a crash course and determination. The prototype was a very reassuring proof of concept and encouraged me to go forward with the mini project. That early version would stop you from creating any new tabs but it offered no creature comforts. You had to enable/disable it from the Chrome Extensions settings page and there was no other way of knowing whether it was on or not. Again, it was a proof of concept/prototype and I was happy.

The biggest challenge for me, as with any new territory in terms of libraries/APIs, was getting familiar with what functions were available for use. Chrome implements a number of asynchronous JavaScript methods for manipulating some of their resources. If you’re itching to get into extension development at this point, get ready to get comfortable with callback functions. They’re not too scary though. Trust me.

Defining the ideal product

In my excitement of developing the prototype, I messaged my friend Matthew to fill him in on my achievement up to that point and get feedback on the idea. What are friends for if not listening to your unsolicited idea pitches? He liked the concept but wasn’t the biggest fan of the current prototype implementation and offered up how he would want to see the extension work which 99% defined how it’s implemented today.

Matthew's TabZolo feedback
Matthew’s TabZolo feedback

 

Matthew's TabZolo feedback 2
Matthew’s TabZolo feedback no.2

I won’t lie. My shine was dulled a little to have Matthew not just love the idea for what I prototyped as-is – after all, it was already implemented – but his conception of it was definitely more useful. His suggestion outlined what TabZolo does today (except for offering a fresh, new tab – a decision my co-creator Leo and I made intentionally). This is why I like having a good set of folks in my circle; they can help refine/further a vision. Admittedly, however, I will call Matthew out and publicly say that he has yet to actually try out the extension despite me asking him a couple times to do so since that night. I’m a little (read: significantly) salty about it and want to let you, the reader, know about it but enough on that. I’ll just let it get popular on the internet and have him find out from a third party.

I spent some more hours coding and got a second, toggle-able prototype going with Matthew’s features. Now there was a user-facing popup to enable/disable the extension! Muy exciting.

OneTab Settings
OneTab Settings

As you can see, a lot of love and creative inspiration went into the early design of the popup – including my use of the button icon that was used in the Chrome extension intro example (all sarcasm by the way). I wrapped up work on the project that Sunday night pleased that everything was coming together nicely. If you had multiple tabs and/or windows open and checked the checkbox, every tab and window except your current window and tab was closed with their URLs stored. When disabled, just like Matthew outlined, they would all be reloaded.

“mind if I help out with this a bit?”

Sometime on Monday, I unintentionally picked up a co-contributor, Leo, to help out with this little project. That prior Saturday I mentioned the idea to him – an idea he hated for his own workflow, which is completely understandable – and now I was letting him know that I had a legitimate working prototype I wanted him to take a look at. He grabbed the code from GitHub and promptly chewed me out for it actually working because it closed all his windows and tabs except for one (dude, it was called OneTab and I told you what was going to happen) but he seemed sold on working on it since he then offered to help out with the project. Very cool stuff. We’ve got a team now, y’all!

It was nice to check the repository after work and see that Leo had gone to town on cleaning up the project layout organizing things into folders. Admittedly, in my late Sunday night / early Monday morning coding spree I was decidedly more focused on prototyping functionality than file organization but the complement was awesome.

Finished Product

After some code toiling between Leo and myself, and a crash course in using GIMP (thanks to my buddy, Ulises) TabZolo now has a fancy, super sophisticated logo and a simple, smooth button-toggle operation that you can watch here.

In a week we’ve come to finish the project and officially launch TabZolo, our first Google Chrome extension, on the unsuspecting interwebz. We hope some find it useful on their quest to a less-distracted web experience. The project’s source is publicly available on GitHub so if you’re inclined feel free to dive in and contribute, hack/break or just troll our code decisions. All’s fair in open source code.

As I wrap up here, does TabZolo actually qualify as a weekend project if it was concluded during the week? If not then just ignore the first half of this post’s title but congratulations on making it to the end!

Links:

Check out Leo’s side of the TabZolo story here!

TabZolo on LifeHacker!