Like many people I use a laptop that I carry from home to work and back again. That coupled with browser preferences syncing to my other machines means all my bookmarks and extensions travel everywhere with me.

At work (or on our VPN) there are certain intranet sites I can access that are not public, so I’d prefer not to see them if i can’t click on them. There are also some browser extensions that I don’t want to run at work because they are not on our IT departments approved list. This means that either I have to stop syncing settings, or use a different browser for work… or come up with a smarter solution.

After thinking about the problem for a while I realized I’d solved something similar in the past. Back when I used OS/2 (yes, I am that old!) I needed different settings and configurations for home and work so I’d built a small utility that held the different configurations and swapped them. I’d also used something similar for Windows that would adjust network settings based on location (before Windows and OSX were smart enough to do that for you). It seemed like a good excuse to dig into the Chrome Extensions to see what I could do there.

The first challenge was working out if I was at home, or at work. Chrome doesn’t have a way to determine this for me, so I was going to write a simple AppEngine script that used socket.gethostbyaddr(addr) to do a reverse DNS lookup to let me determine what my ISPs domain was. Sadly it turns out the free AppEngine doesn’t support sockets, so that idea was a non-starter. I could have done it on my hosted IIS box but then I realized another small hiccup… in order to know to check the value I’d need Chrome Extensions to have an event raised when the IP address changed, but there doesn’t appear to be one, and the other options (e.g. checking when a tab was created) seemed clumsy. To rather than a technological solution to the problem I decided a simple form with two profiles that I could toggle between.

The next task was building the settings pane, the toggle switch and the logic behind the scenes. This is complicated because while you do the development in HTML and Javascript you have to separate both - so no-inline javascript at all, even if you want to have a button press do something you have to attach the event to the button. I understand the reasoning behind this (security) but it still required some extra thinking about, and you don’t seem to be able to drop all the javascript into one file that can process appropriately if it’s called from the options pane or the toolbar - which again means you have to be more careful architecting things.

The events and properties offered by Chrome Extensions cover most of what you need, though the promise based development paradigm also takes some getting used to… to avoid locking the UI thread much of what you do with Extensions is asynchronous. This includes things like getting a list of installed extensions or even reading/writing to local storage.

Once I’d got my head around that, the extension management wasn’t too hard - I populated a list of the available extensions using{…}); and two columns for “home” and “work” to select which I wanted enabled or disabled (I defaulted both initially to their current state) and added an icon to Chrome to let me select which profile I wanted to activate. I also defined a key combination to toggle between the currently selected profile.

Unfortunately bookmarks are proving a little harder to manage - there is no simple “enabled”/“disabled” toggle to control their appearance, so I’m probably going to have to manage moving nodes back and forth between the bookmarkBar and an “inactive bookmarkBar” collection in the next version…

Then I guess I need to package it up and put it in the store…

Edit: later that day… first version is now in the store as a free download. Have a play and let me know what you think in the comments…