As a web developer, I often find myself with local, staging, and live versions of the same website. Obviously, one can tell which environment one they are on by viewing the address in the browser bar. I find it handy to have an additional visual cue, though, to make it even clearer. I have found a neat little extension for Chrome or Opera called Tab Modifier Plus that allows you to set custom favicons for tabs based on the URL.
When adding a new tab rule, you can match the URL by text matching or with regular expressions.
In my case, my local sites all begin with “http://stirrell.” so I can use that with a “Starts with” rule. Once you have set up the URL match, you can then choose a number of options for the tab:
- Choose a favicon.
- Pin the tab.
- Prevent the tab from being duplicated.
- Ask for confirmation before closing the tab.
- Mute sounds on the tab.
In my case, I will choose an included favicon available in Tab Modifier Plus, a green circle, to let me know I am on a “safe” site:
Then, of course, I can use a red circle for live web sites.
Although I use Tab Modifier Plus as a visual clue for “safe” and “dangerous” sites, I can see many other uses for this nicely-made extension. I appreciate that the options page uses Google’s Material look-and-feel. I have also tested in Opera and it seems to work just fine. I definitely recommend this extension.