Getting Started EnvHub helps you visually identify which environment you're working in. Here's how to get up and running in less than a minute. Quick Start 1 Install the extension Click "Install Free" and add EnvHub to Chrome, Edge, or Brave. 2 Click the EnvHub icon Find the EnvHub icon in your browser toolbar and click it to open the popup. 3 Create your first project Click "New Project" and add environments for your first website. 4 Visit your site Navigate to any URL you configured—you'll see the environment indicator!
Projects Projects are containers that group related environments together. Each project represents a single web application or website. Creating a Project 1. Click the + button or "New Project" in the popup 2. Enter a project name (e.g., "My E-commerce Site") 3. Optionally add a favicon URL to help identify the project 4. Start adding environments 💡 Tip: Quick Add When you're on a website that isn't configured, EnvHub shows "Add This Site" button for quick setup.
Environments Environments represent different versions of your application—Local, Development, Staging, Production, etc. Built-in Environment Types Local Your local development machine Development Shared development server Staging Pre-production testing UAT User acceptance testing Production Live customer-facing site Custom Define your own types Adding an Environment 1. Open a project from the main list 2. Click "Add Environment" 3. Select an environment type or create a custom one 4. Enter the base URL (e.g., https://staging.myapp.com) 5. Customize the display settings 6. Click Save
Display Modes EnvHub offers four distinct ways to display the environment indicator. Choose the one that works best for your workflow. Bar Mode A full-width bar that displays across an edge of the page. Most visible option. Positions: Top, Bottom, Left, Right Sizes: Thin (10px), Normal (20px), Thick (30px) Frame Mode A colored border around the entire viewport with a label in one corner. Best for: Making it impossible to miss which environment you're on Ribbon Mode A corner ribbon like you see on "Beta" labels. Subtle but visible. Positions: Top-left, Top-right, Bottom-left, Bottom-right Label Mode A small floating badge that hovers in a corner. Least intrusive option. Best for: When you want minimal visual interference
URL Matching EnvHub offers flexible URL matching to handle any URL pattern your projects might use. Exact Domain Match Enter the full URL and EnvHub will match it exactly. https://staging.example.com Wildcard Matching Use * to match any subdomain or path segment. *.example.com Matches: dev.example.com, staging.example.com, etc. Regular Expressions Toggle the .* button to enable regex matching for complex patterns. ^https?:\/\/.*\.example\.com\/app.*$ Full JavaScript regex support for advanced use cases. 💡 Tip: Contains Match By default, EnvHub uses "contains" matching. If your URL contains the configured pattern anywhere, it matches.
Customization Make EnvHub look exactly how you want it. Colors • Preset color swatches • Full color picker with hex input • Recent colors saved automatically • Separate text and background colors Patterns • Solid color (default) • Animated stripes • Neon glow effect • Configurable animation speed Typography • Custom label text • Font sizes: Small, Normal, Large • Bold text option Visibility • Opacity slider (20-100%) • Push content vs overlay • Per-environment toggle
Import / Export Share your configuration with teammates or back up your settings. Exporting 1. Open EnvHub popup 2. Click the ⚙️ Settings icon 3. Select "Export Data" 4. A JSON file downloads with all your projects and settings Importing 1. Open EnvHub popup 2. Click the ⚙️ Settings icon 3. Select "Import Data" 4. Choose a valid EnvHub JSON file 5. Select whether to merge or replace existing data
Web Dashboard Manage your projects, review issues, and settings from any browser via the web dashboard — no extension needed. What You Can Do Create, edit, archive, and delete projects Add and manage environments per project Browse, filter, and resolve review issues Forward issues to GitHub or Slack Manage custom environment types Import and export configuration backups Monitor cloud sync status Sync Changes made on the web dashboard are automatically synced to the Chrome extension via cloud sync. Sign in with the same account on both to keep everything in sync.
Shopify Integration EnvHub has special features for Shopify developers working with theme previews. Auto-Detection EnvHub automatically detects Shopify preview URLs and can label them with the theme name. Features • Detect preview theme IDs in URLs • Display theme names instead of IDs • Differentiate live vs preview themes • Works across all Shopify admin and storefront URLs
Keyboard Shortcuts Quickly toggle EnvHub or access features without using your mouse. Shortcut Action Alt+E Toggle EnvHub indicator on/off Alt+Shift+E Open EnvHub popup Shortcuts can be customized in Chrome's extension settings: chrome://extensions/shortcuts
Preferences Global settings that affect the entire extension. Theme Choose between Light, Dark, or Auto (follows system preference) for the popup UI. Tab Counter Show a badge on the extension icon indicating how many tabs have an active environment. Default Display Settings Set the default display mode, position, and style for new environments.