Stage Masks

This extension helps you clearly distinguish between development, staging, testing, and production environments by adding a simple visual marker directly in your browser.

When working with multiple environments that look almost identical, it is easy to forget where you are. A single mistaken click can mean editing production data, triggering real actions, or deploying changes in the wrong place. This extension is designed to prevent exactly that by giving you an immediate visual cue for the current environment.

You define your environments by specifying URL patterns. These can be full URLs, parts of a URL, or regular expressions, giving you full flexibility to match any setup. For each environment, you choose a unique color. When you visit a page that matches one of your defined patterns, the extension displays that color as a visual overlay on the page. The marker can appear as a colored border around the page or as a small colored triangle in one of the corners, making it easy to see at a glance which environment you are currently using.

The visual marking is completely non-intrusive. It does not modify the page content, does not inject styles into the site itself, and does not interfere with page functionality or performance. It is purely an overlay rendered by the extension, ensuring that the behavior of the website remains unchanged.

To make setup fast and effortless, the extension includes a button that lets you add the currently open URL as a new environment entry. This allows you to build your environment list organically as you work, without manually copying and pasting URLs.

By assigning a distinct color to each environment, you build a strong visual association over time. After a short while, you will instantly recognize whether you are on development, staging, or production without having to read the URL or think twice. This reduces cognitive load, speeds up everyday work, and significantly lowers the risk of costly mistakes.