EnvMate

English | 简体中文

A browser extension that works for Chrome, Edge, and Firefox, built for teams that switch between development, testing, staging, and production environments all day.

EnvMate makes the active environment obvious, keeps test accounts close at hand, and helps reduce mistakes caused by visually similar systems.

Highlights

• Detect environments by URL rules.
• Show a badge, watermark, or both on matched pages.
• Optionally prefix the page title with the environment label.
• Manage grouped environments from a dedicated options page.
• Store multiple test accounts per environment and fill them on demand.
• Show the matched environment directly in the extension popup.
• Add an environment homepage URL so the popup can jump straight to grouped environment entries.

Install from Chrome Web Store

Install EnvMate from the Chrome Web Store

Install from Microsoft Edge Add-ons

Install EnvMate from Microsoft Edge Add-ons

Install from Firefox Add-ons

Install EnvMate from Firefox Add-ons

Why EnvMate

Many internal systems look nearly identical across dev, test, pre-release, and production. EnvMate adds lightweight visual signals so you can tell where you are before you click, edit, or submit anything important.

Changelog

• 2026-09-10 · v0.5.5: Added a focus-aware breathing highlight that makes the active configuration section clear while editing.
• 2026-09-09 · v0.5.4: Fixed environment title prefixes disappearing when pages update their titles or replace the title element.
• 2026-08-31 · v0.5.3: Fixed newly created groups not being saved immediately.
• 2026-08-12 · v0.5.1: Fixed Quick Access expansion causing the popup window to become wider.
• 2026-08-05 · v0.5.0: Added in-page text editing, making temporary copy checks and screenshots easier.
• 2026-07-31 · v0.4.0: Added a breathing edge-glow marker and fixed import/export modals to adapt to expandable selection trees.
• 2026-07-20 · v0.3.0: Added URL-based configuration import with saved import scopes and one-click re-import.
• 2026-07-10 · v0.2.4: Added optional test-account export with a password-security notice.
• 2026-07-06 · v0.2.3: Quick Access now follows the configured environment order instead of recent visits.
• 2026-06-18 · v0.2.1: Improved drag reordering for environments in grouped settings.
• 2026-06-17 · v0.2.0: Added Quick Access.

URL Rule Types

• wildcard: supports *, for example https://test.example.com/*
• prefix: matches URL prefixes, for example https://pre.example.com/
• regex: uses JavaScript regular expressions

Marker Options

• badge: floating environment badge only
• watermark: watermark only
• badge-watermark: badge and watermark together

Badge styles include a corner ribbon, pill, and breathing edge glow. The edge glow uses the badge color and respects the badge size and opacity settings.

Watermark settings support text, opacity, angle, size, and spacing.

Test Accounts

Each environment can store multiple test accounts. Accounts can be reordered, marked as the default fill target, and filled from the popup when the current page matches that environment.

EnvMate only fills fields after an explicit user action. It does not submit forms or trigger login buttons automatically.

Install Locally in Chrome or Edge

1. Open chrome://extensions.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select the project folder.

Configure Environments

Open the extension options page to:

• create groups
• add environments to a group
• configure URL matching rules
• customize badge and watermark appearance
• add and manage test accounts

The most important part of each environment is its URL Rules, because those rules determine when EnvMate should activate on a page.

Typical Use Cases

• Add a bright badge to production pages so they never look like test.
• Prefix page titles to make environment differences visible in browser tabs.
• Keep shared QA or staging accounts available without digging through notes.
• Group environments by product or business line so large setups stay manageable.

Build Release Artifacts

• make zip: create dist/envmate-<version>.zip
• make firefox-zip: create dist/envmate-<version>-firefox.zip for Firefox AMO; this package uses the Firefox background-script fallback and does not change the Chrome/Edge package.
• make crx: build a .crx package with Chrome
• make crx KEY=path/to/key.pem: reuse an existing signing key

If KEY is not provided, Chrome creates a new private key in .keys/, which changes the extension identity. Do not commit files in .keys/.