Know which environment
every tab is on.
Register a site once. Every tab on one of its environments gets a color-coded indicator, and one click takes you to the same page on another one.
One of these is production. Quickly.
Staging and production look identical, because that is the entire point of staging. Same theme, same content, same admin screens. The only thing separating them is a string you stopped reading months ago.
Staging. Safe.
Production. Four characters different.
So the mistake is not carelessness. It is a design flaw in the tools: the two most consequential states your work can be in look the same. WhichEnv fixes the flaw instead of blaming you for it.
How to tell which environment you are on
Four approaches are in common use. Each one works, right up to the point where it does not.
Read the address bar
Free and always available. But reading is a deliberate act, and the whole problem is that you did not perform it.
Fails exactly when you are tired
Put a banner in the code
The right answer if you own the codebase and work on one project. It must be built per project, must never ship to production, and does nothing for the CMS, the CDN or the deploy console.
Does not scale past one repo
Separate browser profiles
Genuinely useful for keeping sessions apart. But profiles label nothing, and two windows on one monitor still look the same.
Labels nothing
Change the admin color scheme
Works inside one application and stops at its edges. The front end, which is where you check your work, looks exactly like production.
Stops at the app boundary
Label the tab itself
Not per project, not per application, and nothing to remember. It sits in the browser, applies to every site you register, and marks the tab. You stop checking and start seeing.
Works everywhere you already work
Pick how loudly you want to be told
Every marker is optional and set per group, so production can shout while local stays quiet.
The on-page indicator
A pill naming the environment. It shrinks to a thin chip after a few seconds and returns when you point at it. Any corner, two sizes, hideable per tab with Alt+Shift+H.
The page frame
A border around the whole viewport in the environment's color, at a thickness you choose. Impossible to miss, and it never intercepts a click.
The tab icon
Your site's own favicon with a color bar under it, so twelve tabs of one site are tellable apart without reading a title. The real icon returns when you switch it off.
The toolbar badge
The environment's color and a three-letter code on the extension icon, per tab. Your backup for sites where you have hidden everything else.
Never hand-edit a hostname again
Every environment in a group is a destination. Pick one and you land on the same page you were looking at, with the path, query string and fragment carried across.
- Cmd or Ctrl click to invert replace-this-tab or open-a-new-one
- Copy another environment's URL without navigating to it
- Right-click any link to open it elsewhere, even on pages in no group at all
- Turn on a confirmation for production, so entering it takes a second deliberate click
What it asks for when you install it
Nothing.
“Read and change all your data on all websites”
Requested during installation, before you have named a single site. That is a lot of trust to hand a colored badge, and in any company with an IT review it is where the conversation ends.
Per site, at the moment you save a group
Access is asked for those specific origins only, and released again automatically once no group refers to them. Decline and the group still saves; switching still works. Only the on-page indicator waits for your yes.
It makes no network requests of its own at all. No analytics, no tracking, no accounts, no remote code. The only thing stored is the configuration you type, held by Chrome and synced by Chrome, the same way it handles your bookmarks. Nothing reaches Rocket Cat, because there is no server for it to reach.
Built for the way projects are actually configured
Every one of these came out of daily agency work rather than guesswork.
localhost:3000
localhost:3001Ports are first class, so two local servers are two environments. A base URL with no port warns you rather than silently meaning port 80.
localhost ⇄ 127.0.0.1Offered as aliases of each other, because Chrome treats them as different origins while they are the same server.
acme.com/shopBase paths work, so one domain can hold several separately tracked projects.
https://intranetSingle-label hosts are supported, for internal apps that never had a dot in them.
*.preview.acme.devWildcards match preview deploys whose hostname changes on every build. An exact host always beats a wildcard.
env␣acmeType env and a space in the address bar to switch by name, without touching the mouse.
The ones worth asking before installing anything
Does it send my URLs anywhere?
No. WhichEnv makes no network requests of its own at all. A tab's URL is compared in memory against the groups you configured, the answer is a color and a label, and the URL is not retained. No browsing history is assembled.
What does it actually store?
Only the configuration you enter: your groups, their environments, and your display preferences. It goes into Chrome's own storage, which Chrome syncs to your other signed-in browsers if you have Chrome Sync on, exactly the way it handles your bookmarks.
Does it work on localhost?
Yes, with no permission prompt, because loopback addresses are your own machine. Ports count as part of the environment, so localhost:3000 and localhost:3001 can be two different things.
Does it work with preview deploys, like Vercel or Netlify?
Yes. A host can start with *. to match any subdomain, which covers preview URLs whose hostname differs on every build. Those tabs are recognized and labeled. You cannot switch into a wildcard, because there is no way to know which specific host you meant.
Does it work with WordPress or WP Engine staging?
Yes. Register the production and staging domains as two environments of one group and both get labeled, on the front end and in wp-admin, because it works at the browser level rather than inside the application.
Will it slow my browser down?
No. It does nothing at all on sites you have not configured, and on sites you have it renders one small element and compares a URL. There is no polling, no background network activity and no page rewriting.
Can I change the colors?
You can choose between four color sets, including one for color vision deficiency that separates environments by lightness rather than hue. Individual colors are deliberately fixed: the value of the indicator is that amber means staging on every site you work on, so the mapping has to hold everywhere.
Is it really free?
Free and open source under the MIT license. No paid tier, no account, no upsell. It exists because we needed it.
Stop checking. Start seeing.
Built by Rocket Cat for our own team, and used every day on every project we run. Free, open source, and it still asks for nothing at install.