EnvAware

About

EnvAware: Your Environment, Instantly Identified.

Have you ever accidentally performed a test transaction on Production? Or spent frustrating minutes debugging, only to realize you were looking at the Staging site?

EnvAware is a powerful, lightweight Chrome Extension designed for software developers, QA engineers, and content creators. It instantly tells you exactly which environment you are viewing (Local, Dev, Staging, QA, or Prod) by injecting a customizable, non-intrusive watermark overlay directly onto the webpage.

Stop second-guessing your browser tabs and navigate your environments with absolute confidence!

✨ Key Features
🎯 Pattern-Based URL Matching Set up rules using simple, intuitive glob patterns. Whether you need an exact URL match, a wide subdomain wildcard (e.g., *.staging.*), or a partial string match (e.g., *int-*), EnvAware handles it effortlessly.

⚡ Real-Time Live Preview Tweak your overlay without ever refreshing the page. Adjust the watermark size, text color, spacing, and opacity right from the extension popup, and watch the changes update instantly on your active tab.

🔖 Smart Specificity & Conflict Detection What happens if a URL matches multiple rules? EnvAware's smart logic automatically calculates a specificity score, prioritizing exact matches over wildcards. The configuration page even detects and flags potentially overlapping patterns with a ⚠️ indicator, so you always know which rule is active.

🏷 Tab Title Prefixing Juggling dozens of tabs? Enable the "Add to Tab Title" feature to automatically prepend your environment name (e.g., [LOCAL] App Name) to the browser tab. Find the exact environment you need at a glance in a crowded tab bar.

🎨 Full Visual Control Make your overlays as subtle or as loud as you want: • Custom Text: Use any label like "PROD DO NOT TOUCH", "QA", or "LOCAL ENV". • Color Picker: Choose any color that fits your team's workflow. • Size & Spacing Sliders: Adjust text size (12px–100px) and grid spacing so the watermark is visible but never gets in the way of your clicks. • Opacity Control: Dial transparency from a subtle 5% up to a solid 100%.

💾 Quick Presets Frequently use the same red warning for "PROD" or green tag for "DEV"? Save your favorite text and color combinations as quick-access presets directly within the extension popup for lightning-fast setup.

🔄 Export & Import Configurations Moving to a new computer or onboarding a new team member? Easily export all your environment rules as a single JSON file and import them anywhere with just one click. Standardize your team's environments effortlessly!

🛡️ Privacy & Performance First
Built entirely with vanilla HTML, CSS, and JavaScript, EnvAware has zero external dependencies, guaranteeing a lightning-fast experience with a minimal memory footprint.

Designed natively for Manifest V3, EnvAware runs 100% locally. Your browsing history, visited URLs, and configurations never leave your machine. It only requires the bare minimum permissions (storage, activeTab, and scripting) to save your settings and apply the visual overlays safely.

🚀 Who is EnvAware for?
• Software Developers: Never lose track of whether you are coding against localhost, dev, or staging. • QA Engineers & Testers: Seamlessly switch between multiple test environments without confusion. • System Administrators: Protect yourself from making critical configuration changes on the wrong console. • Content Managers: Quickly differentiate between draft preview servers and your live published site.

🛠️ Getting Started in 3 Simple Steps:
Click the EnvAware extension icon in your Chrome toolbar.
Click "Manage All Configurations" and tap the "+ New Config" button.
Enter your URL pattern (e.g., https://my-app.local or *staging*), customize your colors and text, and save!
Install EnvAware today and never mistake your environments again!