WhichEnv: Environment Indicator and Switcher

See which environment you are on at a glance, and switch between dev, staging, prod and local at the same path.

Never wonder which environment you are looking at. Register a group for a site, list its environments, and every tab on one of them gets a color-coded indicator. Green for local, blue for dev, amber for staging, red for production. One click switches to the same page on another environment, keeping the path, query string, and fragment exactly as they were. STAYS OUT OF YOUR WAY The usual complaint about environment indicators is that they cover the page. This one collapses to a thin color chip at the edge of the screen after a few seconds and expands when you point at it. You can move it to any corner, make it larger, hide it on one tab with Alt+Shift+H, or hide it permanently for a site while still switching from the toolbar. ASKS FOR NOTHING AT INSTALL Most extensions in this category need "read and change all your data on all websites" before they do anything. WhichEnv asks for no site access at all when you install it. Access is requested per site, only when you save a group that mentions it, and released again automatically when no group needs it. Local addresses work immediately with no prompt. SWITCHING - Click the indicator for the list of sibling environments, then pick one - Cmd or Ctrl click to invert your default of replace-this-tab or open-a-new-one - Copy another environment's URL for the current page without navigating - Right-click any link to open it, or copy it, on a different environment. This works on pages that are in no group at all, so a production link pasted into Slack or a ticket is one right-click from staging - Alt+Shift+E opens the switcher from the keyboard, and four numbered shortcuts jump straight to an environment - Type env then a space in the address bar to switch by name - New tabs are gathered into a Chrome tab group named after the site, colored by the riskiest environment open in it MATCHING THAT HANDLES REAL SETUPS - Ports are first class. localhost:3000 and localhost:3001 are different environments, and a base URL with no port warns you rather than silently meaning port 80 - localhost and 127.0.0.1 are offered as aliases of each other, because Chrome treats them as different origins while they are the same server - Base paths work, so acme.com and acme.com/shop can be separate groups - Single-label hosts like https://intranet are supported, for internal apps - A host can start with *. to match any subdomain, for preview deploys whose hostname is different every time. An exact host always wins over a wildcard WHEN GETTING IT WRONG MATTERS - Turn on a confirmation for any environment, so entering production takes a second deliberate click - Frame the whole page in the current environment's color, at a thickness you choose. It never intercepts clicks - Mark the tab icon: your site's own favicon with a color bar along the bottom, so twelve tabs of the same site are tellable apart in the strip. The site's icon comes back when you switch it off - The toolbar badge carries the environment's color and a three-letter code, per tab, as a backup when the indicator is hidden BUILT TO BE READABLE Four color sets: Default, Vivid, Subtle, and one designed for color vision deficiency that separates environments by lightness rather than hue. Every environment also shows its name as text and carries a distinct shape, so color is never the only signal. Individual colors are deliberately not editable. The whole value of the indicator is that amber means staging on every site you work on, so the mapping has to be the same everywhere. You choose which set is in use; the mapping inside it stays fixed. ALSO - A registry of which local ports each group has claimed, and a suggestion for a free one - Export or import your whole configuration, or copy one group as JSON to paste to a teammate. An import shows exactly what it will do before writing anything - No analytics, no tracking, no remote code, no accounts, no network requests of any kind Open to feedback and bug reports at https://github.com/rocketcatcreative/whichenv/issues