Ghost Tabs Chrome Extension Old tabs slowly fade away, but you can always bring them back.

Summary

I was inspired by this tweet:

Can someone make a Chrome extension that fades the colors of tabs according to when they were last referenced? That way you can garbage-collect stale tabs that you haven't looked at in awhile.

Goals

See which tabs are old so you can close them yourself.

Solution

I knew there were ways to manipulate images in JS, and my first thought was that I’d get the favicon from the browser and modify it, and then set the icon to my modified one. This would have been ideal because I wouldn’t need the Chrome extension to have access to individual pages.

For historical context, the favicon was a feature that was introduced last-minute by Internet Explorer in the early days of the web. A senior developer built it for fun and showed it to a Program Manager who gave it the OK. You can read more about it on that program manager’s blog here.

It was a long saga trying to get the extension working. I first tried getting the favicon from Chrome’s API. This had some limitations. I decided to get the favicon from the web page directly. This was a little tricky since the icon could be in many different formats. And SVG icons needed to be processed in their own way.

I was able to get the icon fading working. Next, I needed to make sure my extension was a good citizen. I decided to reset the HTML back to its original state after the user uninstalled the extension. Turns out, reseting the HTML didn’t cause the icon to reset. I found a hack to force the favicon to reset.

Because my Chrome extension was injecting a little script into each page, I also wanted a way to detect if the user had uninstalled the extension. Turns out there’s no API for this. So I instead had the content scripts call try to communicate with the host Ghost Tabs Chrome extension, and if it failed, it would reset the icon back to the original state.

Learnings

I now know why this kind of extension doesn’t exist in the Chrome Web Store. I gave it my best shot, and I have an extension that can fade your tabs, but it does so at a cost. And if you try to uninstall it, you’ll be frustrated for a while until the browser eventually resets all the icons back to normal.


Stack

Languages:
HTML CSS JavaScript TypeScript
Packages:
Environment:
Hosting:
← Previous
Migrating Cranes
Next →
HashDrop