TabZolo To The Rescue


Over the past week, I spent some of my free time working on a interesting little project with a friend of mine, David Small. The project itself was simple in nature but with a big purpose behind it. The project was TabZolo.

When web browsers started allowing us to have multiple tabs on the same window, I became a victim to what some would call tab ADD. If I found some interesting articles or funny things to look at while browsing the web, 99% of the time, I would pop up a new tab and leave it without looking; I would make an empty promise to myself that I would get to it later in the day. By the end of the day there would be so many tabs open it would almost be impossible to read the title of the tabs, let alone know what site they each belonged to without clicking on them. I would put my computer to sleep and the next day it would start all over with a brand new window, sometimes with the old one still hiding somewhere.

Enter TabZolo

When David first told me about the idea to be forced to work with only one tab at a time, my first thought was

“How could someone ever come close to being productive with one tab. Working with one tab? How annoying…he must be crazy.”

I was right, David was indeed crazy. He started the project and once he had it up on Github, the curious developer in me started looking through the code and that was the end of it.

I installed David’s first crack at the extension. It was simple. A checkbox that read Enable OneTab. I clicked the checkbox and just like that, all my tabs were gone. I panicked a bit inside as I had a bunch of Ruby, Rails, Elixir, and other curious articles opened up at the time that I was meaning to read. I immediately disabled the extension only to find all my tabs were back in their respective places. It was at that moment something in my brain snapped and I had to know what code madness would do this.

Developing

I opened up the project, saw Javascript, cried a little and went to bed. The end.

Just kidding, the project in itself was fairly simple. The code was straight forward using some of the Chrome Extensions API he managed to store all the currently opened tabs in local storage, close them, and block new ones from starting up.

My initial contribution was adding a bit of organization to the chaos in the project structure, which tends to be one of my pet peeves. Looking at a project with a bunch of files with no organization tends to drive me a bit crazy.

- OneTab
  - OneTab.html
  - OneTab.js
  - icon.png
  - manifest.json
  - jquery-2.0.3.min.js
  - popup.js
  - underscore-min.js

After a rename of the project to TabZolo, the project now looks like this:

- TabZolo
  - assets
    - javascripts
      - TabZolo.js
    - images
      - 'some icons'
  - vendor
    - jquery-2.0.3.min.js
  - .gitignore
  - README.md
  - manifest.json

Yes, I know that a project of this size probably doesn’t need structure/organization but I find it easier to navigate and separate vendor libraries from our own code.

The fun part

After organizing the project, it was just talking back and forth about improvements that could be made. We went from having a popup with a button, to just simply clicking the extension icon to activate the extension itself.

I wasn’t too familiar with the Chrome Extensions API to begin with. One of my mistakes was not reading the Getting Started. Implementing the ‘click on extension icon to enable’, I ran into some setbacks because I made the bad decision to jump straight to the actual documentation on the methods available. It took me a bit to realize that the method calls were asynchronous by design and in order for stuff to work I just had to mess with the callback craziness that is Javascript. A minor bump on the road but worth mentioning.

Also, David had pointed out that a few links for Facebook were not causing some nasty behavior in the extension. Namely, they were sending the only open tab to some weird URL. After some investigation, I was able to go around the issue by adding a event listener on the tab’s update event. It seems the links from Facebook were opening up a blank tab and setting its URL after it was opened. Once I realized the issue, it was simple enough to catch the update event on the tab, storing the information of the new tab, updating the main tab, and removing the tab.

Conclusion

I admit it, I still from time to time disable TabZolo and click a bunch of tabs open. I still find it hard to work with only one tab. It’s something to get used to but beneficial to productivity. I find myself actually finishing articles and forcing myself to be focused to one thing at a time.

For the most part, it was about learning something new while working on a project that has an interesting concept behind it. Collaborating with someone on a project is a great learning experience and allows you to see things in different ways.

Check out TabZolo in the Chrome Store and Github.