I’ve recently challenged myself to build a few extensions for the Chrome browser. I recently finished my first one, still working on the others, and was so proud of the results I thought I would make a post about it. The extensions is called Tab Colorizer and, if it wasn’t obvious, is a chrome extension which allows you to customize and change the color of your open tabs.
What features are available?
- Choose any color in any order.
- Customize the key-stroke command.
- Submit bugs and feedback form.
- Sync across all your browsers!
How does it work?
What makes this so cool is how unique and clever it is. Chrome, due to it’s enhanced security, doesn’t allow you to modify the chrome window or tab itself. So, instead, I inject code into the tab’s loaded webpage to manipulate the favicon to a solid color of your choice.
Customize not only the colors, but also the key command!
Within the extension options, you can choose any number of colors in any order of your choosing. Then, on almost any tab, press the keys CTRL + SHIFT + SPACEBAR to flip through all the colors. Once you’ve reached the end, TabColorizer will put the original site’s favicon back!
What challenges were overcome?
Unfortunately, the extension doesn’t work on all websites. In fact, it won’t work on any chrome-specific tabs, like the extensions page or any settings pages. The caveat here is how I have to manipulate the tab’s HTML to modify the favicon in the first place:
Front-end developers can use a myriad of methods to display, change, update and modify the favicon — even after the page is fully loaded! I overcame this by first removing all rel-links to any icon I could find in the page’s HTML. This is a brute force method of removing all inner-workings of how the site was programmed and ultimately preventing the site from changing the icon further. But, before I delete them entirely, I take a backup of the favicon so I can put it back later 🙂
Next, I inject my own favicon code. By injecting my own code, instead of modifying an existing link, I prevent the site from tampering with it later with any custom javascript and make it easy for me to change it on-the-fly.
Still, there are some sites that are using some other, unknown (to me), method of setting the favicon and hopefully any users of my extension will let me know via the feedback form on the extensions options page so that I may troubleshoot.
How does the color-picker work?
Great question, this was fun to write and was written in javascript and HTML5. This works by utilizing the canvas properties of HTML5 to load the image (a transparent png) and literally read the pixels at the cursors position. This relies on knowing the size of the image and where the mouse’s cursor is.
Next and, pretty clever, if I don’t say so myself, I only invoke the color-picker when a color text-box is selected and has focus. And now for the brilliant part, when a user clicks on the color wheel to choose a color, it’s not the click event that logs the color, it’s the losing of the focus event that logs the color. By clicking outside of the color wheel you’ll get an unknown color and defaulted to #000000 (black).
A user can also type in any hex color they desire. If they type in gibberish, it defaults to #000000 (black)!
Shut up and give me the link!
You can install the chrome extension by visiting the following site: http://TabColorizer.io
Hope you enjoy it as much as I did making it. It was a wonderful experience and has opened me up to looking for excuses to make more!