EnvBanner is a free Chrome extension that adds color-coded banners to your browser tabs based on URL patterns. Here’s how to get up and running in under a minute.
Step 1 — Install the extension
Head to the Chrome Web Store and search for EnvBanner, or click the “Add to Chrome” button on our homepage. The extension requires no special permissions beyond reading the current tab URL.
Click Add to Chrome, then confirm the installation when prompted.
Step 2 — Open the options page
After installation, click the EnvBanner icon in your browser toolbar. This opens the options page where you configure your URL patterns.
You can also reach the options page by right-clicking the extension icon and selecting Options.
Step 3 — Add your first rule
A rule maps a URL pattern to a banner color and label. For example:
- Pattern:
*.staging.myapp.com* - Color: Orange
- Label: Staging
EnvBanner uses simple glob-style matching. An asterisk matches any sequence of characters, so *.prod.* would match admin.prod.myapp.com, api.prod.myapp.com, and so on.
Step 4 — Add more environments
Most teams use three environments at minimum. A typical setup looks like:
| Pattern | Color | Label |
|---|---|---|
localhost* | Green | Local |
*.staging.* | Orange | Staging |
*.prod.* or myapp.com* | Red | Production |
You can add as many rules as you need. Rules are evaluated top to bottom, and the first match wins.
Step 5 — Verify it works
Navigate to a URL that matches one of your patterns. You should see a colored banner across the top of the page with your configured label.
If the banner doesn’t appear, double-check your URL pattern. The most common issue is forgetting the wildcard at the end of the pattern — localhost* matches localhost:3000/dashboard, but localhost alone won’t.
Customization tips
- Banner position — Choose between top and bottom placement
- Banner size — Pick from small, medium, or large heights
- Opacity — Reduce opacity if the banner feels too prominent
- Auto-collapse — Set the banner to collapse after a few seconds, leaving just a colored edge
What about privacy?
EnvBanner processes everything locally in your browser. No data is sent to any server, no analytics are collected, and no account is required. Your URL patterns and settings stay on your machine.
Next steps
Once you have your core environments configured, consider adding rules for other internal tools — CI dashboards, admin panels, monitoring systems. The more consistent your visual cues, the safer your workflow becomes.
Have questions or feedback? Visit our GitHub repository to open an issue or start a discussion.