About Environment Guard

Environment Guard is a Manifest V3 browser extension for Chrome, Edge, and Safari that visually labels every environment your web apps run on. Configure your projects once and the extension automatically injects a coloured frame, a banner, and a tab title prefix whenever you visit a matching URL — no more accidentally running a destructive action on production when you meant staging.

Coloured border

A configurable-thickness frame (1–4 px) around the entire viewport in the environment's colour — visible no matter how deep you are in the UI.

Environment banner

Full-width strip or compact floating badge showing the project name, environment tier, and a context hint (e.g. "Changes here affect live data.").

Tab title prefix

[PRODUCTION] Orders — the right tab is obvious without switching to it. A MutationObserver keeps the prefix in place even when a SPA overwrites the title.

One-click environment switching

Jump between environments while preserving the current path. Optional: also preserve query params and hash. Always shows a confirmation step before navigating to production.

Inline quick-add

Configure a new environment directly from the popup on any unconfigured page — no separate options window needed.

Import / Export

Back up and restore your full configuration as JSON. Import merges with or replaces existing projects. Download an example file to see the expected format.

Environment tiers

Tier	Default colour	Banner context hint
Production	`#dc2626` Red	Changes here affect live data.
Staging	`#d97706` Amber	Pre-production environment.
QA	`#7c3aed` Purple	Quality assurance environment.
Development	`#16a34a` Green	Local development environment.
Custom	`#6366f1` Indigo	—

Tier colours are defaults only — every environment has a colour picker so you can override them freely.

Setup Guide

Add to Chrome (free)

Opens Chrome Web Store — no account required to install

Step 1 — Install the extension

Click Add to Chrome, confirm the browser dialog, and the extension is ready. No restart required. The Environment Guard icon appears in your toolbar (pin it for easy access).

For Microsoft Edge, install from the Edge Add-ons store or directly from the Chrome Web Store (Edge supports Chrome extensions). For Safari on macOS, see Safari installation below.

Step 2 — Add your first environment (quick add from popup)

Navigate to one of your web apps — for example https://app.example.com — and click the Environment Guard toolbar icon. The popup shows Not configured with the current hostname and a + Add website button. Click it to expand the inline form:

Field	Default	Description
Project name	(empty, required)	Display name shown in the popup header and the banner strip, e.g. Customer Portal
Environment type	Production	Tier — controls the default colour and the context hint shown in the banner. Options: Production, Staging, QA, Development.
Base URL	`https://<current hostname>`	Root URL matched against the tab. At minimum, enter the hostname (`https://app.example.com`). Include a port if your app runs on one (`http://localhost:3000`).

Click Save. The popup shows "Environment added!" for a moment, then closes automatically. The border, banner, and tab prefix are applied immediately on the current page without a reload.

Step 3 — Add more environments to the same project

Open Settings (toolbar icon → Settings button in the popup header). Find your project and click Edit. Click + Add environment to add staging, QA, and development URLs under the same project name. With multiple environments, the popup shows an environment switcher so you can jump between them with one click.

Safari installation (macOS)

Environment Guard is available for Safari on macOS via the Mac App Store. Once installed, enable the extension under Safari → Settings → Extensions.

During local development: Safari → Settings → Developer tab → Allow unsigned extensions. This checkbox resets after every Safari restart.

Removing the extension

Go to chrome://extensions, find Environment Guard, and click Remove. All locally stored configuration is deleted immediately.

Using the Popup

Click the Environment Guard toolbar icon to open the popup. The popup has three states depending on whether the current tab matches a configured environment.

State 1 — Not configured

When the current page has no matching environment, the popup shows a globe icon, Not configured, the current hostname in monospace, and a + Add website button. Clicking the button expands the inline quick-add form described in Step 2 of the Setup Guide — no new window opens. After saving, the popup closes automatically and indicators appear on the page.

State 2 — Configured (current environment card)

When the page matches a configured environment, the popup shows a Current Environment card with:

Project — the project name (left column)
Environment — a coloured badge showing the environment name, e.g. PRODUCTION (right column). Production environments show a small dot inside the badge.
Hostname — the matched URL in monospace below the two columns
Context hint — the tier's subtext (e.g. "Changes here affect live data.") when the environment type has one

State 2 — Environment switcher

If the project has more than one enabled environment, a Switch to section appears below the current environment card. It shows one button per other environment, coloured in that environment's colour. Clicking a button navigates the current tab to the same path on that environment's base URL.

Production confirmation: clicking a button whose type is production does not navigate immediately. A warning card replaces the buttons showing: "Switch to production?", the destination hostname, and Confirm / Cancel buttons. Confirming navigates and closes the popup; Cancel returns to the switcher.

Whether query params and the URL hash are preserved when switching is controlled by the per-project Advanced settings in the project editor.

Display controls (Border / Banner / Tab)

At the bottom of the popup is a row of three toggle chips: Border, Banner, and Tab. Each chip is a toggle — blue when on, grey when off. These are display overrides that take effect immediately without opening Settings. They are useful when a page's own UI conflicts with the banner or border (e.g. a sticky header that the banner overlaps).

Chip	What it controls
Border	The coloured frame around the viewport
Banner	The full-width strip or compact badge
Tab	The `[ENV]` prefix on the tab title

These overrides are global (not per-site) and persist across sessions. They are separate from the per-indicator defaults in Appearance settings.

Popup header

The gradient header always shows two controls: a Docs link (opens this page) and a Settings button that opens the full settings page as a browser tab.

Settings

Open Settings via the popup header or by right-clicking the toolbar icon → Options. The settings page opens as a full browser tab and has three sections in the left sidebar: Projects, Appearance, and Import / Export.

Projects list

The Projects section lists all configured projects. Each project row shows the project name, the number of environments, and two actions:

Edit — opens the project editor
Delete — removes the project and all its environments after confirmation

Click + New project at the top to open the project editor for a blank project.

Project editor

The project editor is used for both creating new projects and editing existing ones.

Project fields

Field	Description
Project name	Required. Display name used in the popup card and in the full banner text (e.g. Customer Portal · PRODUCTION · Changes here affect live data.)

Environment fields

Each project has one or more environments. Click + Add environment to add another row. Each environment has:

Field	Default	Description
Name	(empty, required)	Display name shown in the popup badge and the switcher buttons, e.g. Production. Also used as the banner label.
Type	Development	Tier dropdown — sets the default colour and the context hint. Changing the type automatically updates the colour to the tier default. Options: Production, Staging, QA, Development, Custom.
Base URL	(empty, required)	The root URL to match against the current tab's URL. Must be a valid URL starting with `http://` or `https://`. Include a port if the environment runs on one (e.g. `http://localhost:3000`). Used to build the destination URL when switching environments.
Colour	Tier default	Colour picker with a live badge preview. Controls the border, banner, and switcher button colour. The badge text colour is automatically set to white or black based on contrast.
Enabled	On	Uncheck to exclude this environment from URL matching and the switcher without deleting it. Useful for temporarily disabling an environment without losing its configuration.

Click the trash icon on any environment row to delete it. A project must have at least one environment — the trash icon is hidden when only one remains.

Conflict detection

If two enabled environments within a project share the same hostname and port, an amber warning appears: "Conflicting rules: Project / Env A and Project / Env B share the same host (example.com)". Conflicts are shown before you save so you can resolve them.

Badge preview

Below the environment list, a Preview row shows a coloured badge for each named environment so you can see what the popup badge and switcher buttons will look like before saving.

Advanced settings

Click Advanced settings ▾ to expand two per-project options that control what happens to the URL when switching environments:

Option	Description
Preserve query parameters	When switching environments, the current query string (e.g. `?tab=settings&page=2`) is appended to the destination URL. Off by default.
Preserve URL hash	When switching environments, the current URL fragment (e.g. `#section`) is appended to the destination URL. Off by default.

Test URL

The Test URL field at the bottom of the editor lets you verify your configuration before saving. Type any URL (the https:// prefix is added automatically if omitted) and click Test or press Enter. The result shows either:

Matches: Project name / Environment name — the URL matched and this is the winning environment
No match found for this project. — the URL did not match any enabled environment in this project

Appearance

The Appearance section controls the visual style of the injected indicators globally across all projects.

Setting	Options	Description
Border thickness	1 px / 2 px / 3 px / 4 px	Width of the coloured frame injected around the viewport. Default: 2 px. Chosen via a segmented control — changes are previewed immediately in the live preview below.
Banner position	Top / Bottom	Whether the banner strip or compact badge is pinned to the top or bottom edge of the viewport. Default: Top.
Banner style	Full banner / Compact badge	Full banner — a full-width strip showing Project · ENVIRONMENT · Context hint. Compact badge — a small floating pill in the top-right (or bottom-right) corner showing only the environment label, e.g. PRODUCTION. Default: Full banner.
Tab title prefix	On / Off	When on, prepends `[ENVLABEL]` to the browser tab title, e.g. `[PRODUCTION] Orders`. A `MutationObserver` keeps the prefix in place even when a SPA rewrites the title. Default: On.

A live preview at the bottom of the Appearance section shows a miniature page mock with the border and banner rendered using the current settings and the Production colour (#dc2626).

Import / Export

The Import / Export section has three cards:

Export

Click Export configuration to download your current configuration as environment-guard-config.json. The file contains all projects, environments, appearance settings, and display overrides. Use it to back up your config or to share a standard configuration with your team.

Import

Click the dashed Choose a JSON file… area and select a previously exported .json file.
A preview lists all projects in the file with their environment counts.
Choose an import mode:

Mode	Behaviour
Merge with existing	Adds projects from the file whose `id` does not already exist locally. Existing projects are not modified. Default.
Replace all	Deletes all existing projects and replaces them with the imported ones. A confirmation dialog is shown before applying.

Click Apply import. A "Configuration imported successfully." confirmation appears for 3 seconds.

Example configuration

Click Download example to get a sample environment-guard-example.json showing the expected JSON structure — a project named Customer Portal with Production, Staging, QA, and Development environments.

URL Matching

When you navigate to a page, Environment Guard scores every enabled environment in every enabled project against the current tab URL. The environment with the highest score wins and its indicators are applied. If no environment scores above zero, no indicators are shown.

Scoring rules

Condition	Points
Hostname matches exactly	+100
Port matches exactly	+10
Path prefix matches (one of `matchPaths`)	+50 + length of matched path

If the Base URL includes a port (e.g. http://localhost:3000), the tab URL must also be on that port — a mismatch scores −1 (no match). If no port is specified in the Base URL, the port check is skipped.

Subdomain matching

Each environment has an optional Match subdomains flag. When on, a Base URL of https://example.com also matches https://api.example.com, https://app.example.com, etc. When off (the default), only the exact hostname matches.

Path matching

By default the path is not part of the match — only hostname and port are checked. If an environment has matchPaths configured, the tab URL's pathname must begin with one of the listed paths for the environment to match at all. Longer path matches score higher than shorter ones, so a more specific rule always beats a general one.

Deterministic tie-breaking

If two environments produce the same score, the one that appears first in the project list (by project index, then by environment index within the project) wins. There is no ambiguity.

SPA navigation

The content script patches history.pushState and history.replaceState, and also listens to popstate, hashchange, and a MutationObserver on the document root. Any URL change — whether a full navigation, a SPA route change, or a hash change — triggers a re-match and re-applies (or removes) indicators without a page reload.

Switching environments

When you click a switcher button in the popup, the destination URL is built as follows:

Start with the target environment's Base URL
Replace the path with the current tab's path
Append the current query string if Preserve query parameters is on for the project
Append the current URL hash if Preserve URL hash is on for the project

For example, if you are on https://staging.example.com/orders?page=2 and switch to Production (https://app.example.com) with query params preserved, you land on https://app.example.com/orders?page=2.

Permissions Requested and Why

Environment Guard requests only the minimum permissions required to provide its functionality.

Permission	User-facing feature	Why narrower is not viable
`storage`	Saves project configuration (names, URLs, colours, appearance settings, display overrides) to `chrome.storage.local` so it persists across sessions and browser restarts.	Without this permission, all configuration resets when the browser closes. There is no narrower scope for local per-extension persistent storage.
`activeTab`	Reads the URL and hostname of the current tab when the popup is opened, to detect whether the page is configured and to pre-fill the Base URL field in the inline quick-add form.	Only the active tab URL is read at the moment the popup opens. The broader `tabs` permission (access to all open tabs at any time) is not requested for this purpose.
`scripting`	Injects the content script that renders the border, banner, and tab prefix into matching pages via `chrome.scripting.executeScript`. Re-injects when the background service worker detects a tab navigation.	Dynamic injection is used so that the static manifest does not need to declare `<all_urls>` as a content script match pattern. Without `scripting`, indicators cannot be rendered on any page.
`tabs`	Listens on `tabs.onUpdated` to detect tab URL changes and re-apply (or remove) indicators when you navigate. Also used by the environment switcher to navigate the current tab to the destination URL (`chrome.tabs.update`).	`activeTab` alone does not fire on background tab navigations. `tabs.onUpdated` and `chrome.tabs.update` both require the `tabs` permission.

No sensitive permissions Environment Guard does not use history, cookies, webRequest, bookmarks, identity, or any other sensitive Chrome API. It has no access to page content beyond injecting visual indicators. No data is ever sent to any external server.

Privacy Policy

Last updated: October 4, 2026

Overview

Environment Guard is a free browser extension for Chrome, Edge, and Safari that visually labels web application environments. This policy explains what data the extension accesses, how it is used, and what — if anything — leaves your browser.

Data Stored Locally

The following values are saved to chrome.storage.local, stored exclusively on your device and never transmitted to any server:

Project configuration — project names, environment names, Base URLs, types, colours, and per-project options (enabled, preserve query params, preserve hash).
Appearance settings — border thickness, banner position, banner style, and tab prefix on/off.
Display overrides — the per-session Border / Banner / Tab toggle states set from the popup.

Data Accessed at Runtime

The extension reads the URL of the current tab when the popup is opened and when tabs.onUpdated fires. The URL is matched in memory against your stored configuration to determine which environment is active. The URL is not stored, logged, or transmitted — it is used transiently for the duration of the match operation.

The extension does not read page content, DOM structure, form values, cookies, or any information beyond the tab URL and title.

Data Not Collected

Environment Guard does not collect, transmit, or store:

Usage analytics or telemetry
Browsing history
Page content, form values, or credentials
Any personally identifiable information

Data Sharing and Transfer

Environment Guard makes no network requests of any kind.
No data is sent to any server, analytics service, or third party.
No human (including the developer) has access to your configuration or browsing activity through this extension.

Data Retention and Deletion

Configuration data is retained in chrome.storage.local until you remove the extension or clear its storage.

Remove the extension from chrome://extensions to delete all stored data immediately.
Use Settings → Import / Export → Export to download a backup before removing if you want to restore it later.

Third-Party Services

Environment Guard does not use any third-party analytics, advertising, tracking, telemetry, or data-processing services. The extension operates entirely within your browser.

Contact

For questions about this Privacy Policy or Environment Guard's handling of data, contact: lucamit@gmail.com

Terms of Service

Last updated: October 4, 2026

1. Acceptance of Terms

By installing, accessing, or using Environment Guard, you agree to these Terms of Service. If you do not agree to these terms, do not install or use the extension.

2. Description of the Service

Environment Guard is a browser extension that injects visual indicators (coloured border, banner, tab title prefix) into web pages based on URL rules you configure. It is intended as a visual aid to help distinguish between deployment environments and should not be relied upon as the sole safeguard against accidental actions on production systems.

3. Free to Use

Environment Guard is currently provided free of charge. There are no subscription fees or paid features at this time. The developer reserves the right to introduce paid features, modify pricing, or discontinue free access in the future. Where reasonably possible, users will be informed before such changes take effect.

4. License

Environment Guard is free to use for both personal and commercial purposes. You may not copy, modify, redistribute, reverse-engineer, or create derivative works based on this extension or its source code without explicit written permission from the developer.

5. No Warranty

Environment Guard is provided "as is" and "as available" without warranties of any kind. The developer does not guarantee that:

environment detection will always match the correct tier;
visual indicators will render correctly on every website;
the extension will remain compatible with future browser versions; or
the service will operate without interruptions or errors.

You are solely responsible for confirming which environment you are working on before taking any consequential action.

6. Limitation of Liability

To the maximum extent permitted by applicable law, the developer will not be liable for any damages arising from use of Environment Guard, including accidental actions on production, incorrect environment detection, data loss, service interruptions, or other consequences of relying on visual indicators.

Use of Environment Guard is at your own risk.

7. User Responsibilities

By using Environment Guard, you agree that:

you are responsible for the URL rules and project configuration you set up;
you will not use the extension for unlawful or unauthorized purposes;
you will comply with applicable browser store terms and policies; and
you will independently verify which environment you are on before taking irreversible actions.

8. Changes to These Terms

The developer may update these Terms at any time. Continued use after changes are posted constitutes acceptance of the revised terms.

Support

Getting help

See the Setup Guide, Using the Popup, Settings, and URL Matching sections above for full documentation.

Report an issue

Email lucamit@gmail.com and please include:

What happened and what you expected
The browser and version (Chrome, Edge, or Safari)
The Base URL configured for the affected environment
The URL of the tab where the issue occurred
Whether the issue occurs on initial page load, SPA navigation, or both
Any errors in the browser console (F12 → Console). Look for lines starting with [EG]