UrlFlip - URL & Environment Switcher

Switch between dev/staging/prod, regions, locales, or PR previews in one click. A browser extension for Chrome and Edge — built for developers, QA engineers, and frontend teams who work across multiple URL variants of the same page. Preserves path, query params, and hash.

Use Cases

• Environment switching — jump between dev, staging, and production for any app or service
• Region & locale switching — toggle between en.example.com, fr.example.com, de.example.com
• PR preview switching — map main.example.com/path → pr-123.preview.example.com/path
• API version switching — cycle between /v1/, /v2/, /v3/ in API docs or Swagger UIs
• A/B variant switching — toggle between /variant-a and /variant-b paths for QA

Features

• One-click switching between any number of environments (dev, staging, production, etc.)
• Environment groups — independent sets of environments for different apps/services
• Two matching modes: simple host swap or full regex pattern matching with URL templates
• 4 click behaviors: popup (new tab), popup (replace tab), instant (new tab), instant (replace tab)
• Keyboard shortcut — Alt+Shift+E (or Opt+Shift+E on Mac) to cycle instantly
• Popup with keyboard navigation — arrow keys + Enter to select
• Badge indicator — shows current environment name on the toolbar icon
• Drag-to-reorder environments to control cycle order
• Color-coded environments with preset color swatches
• Live regex validation in the settings editor
• Test tool — preview URL matching and cycle order before saving
• Import/Export — share configs across browsers or with teammates
• Dark mode — follows system preference automatically
• First-run onboarding — guided setup for new users

Install

Chrome Web Store — (Coming soon)

Microsoft Edge Add-ons — (Coming soon)

Install (unpacked / development)

Chrome:

1. Clone or download this repository
2. Open Chrome → chrome://extensions
3. Enable Developer mode (top-right toggle)
4. Click Load unpacked → select the toggle-env/ folder
5. The UrlFlip icon appears in your toolbar

Edge:

1. Clone or download this repository
2. Open Edge → edge://extensions
3. Enable Developer mode (left sidebar toggle)
4. Click Load unpacked → select the toggle-env/ folder
5. The UrlFlip icon appears in your toolbar

Quick Start

1. Click the UrlFlip icon → Open Settings (or right-click → Options)
2. Add a group name (e.g. "My App")
3. Add environments with names and base URLs (e.g. https://stg.example.com, https://prd.example.com)
4. Click Save Changes
5. Navigate to any configured URL and click the UrlFlip icon to switch

Configuration

Environment Groups

Environments are organized into groups. Each group is an independent set of environments. Clicking the extension icon switches within the matched group only.

Matching Modes

Mode	Description
Host swap	Matches by hostname, swaps host when switching. Simple and covers most use cases.
Pattern	Matches by regex against the full URL. Uses capture groups in a URL template for rewriting.

Click Behavior

Mode	Description
Show popup	Pick an env from the list, opens in a new tab
Show popup, replace tab	Pick an env, navigates the current tab
Switch instantly	Jump to next env immediately, new tab
Switch instantly, replace tab	Jump to next env immediately, current tab

Tip: Ctrl+click any env in the popup to always replace the current tab.

Cycle Order

Cycle order matches the row order in settings. Drag the handle (⠿) to reorder.

Priority

When multiple patterns in a group match the same URL, the highest-priority env wins detection. Priority only affects which env is "current", not cycle sequence.

Privacy Policy

UrlFlip does not collect, transmit, or share any data. There are no analytics, no tracking, and no network requests. All configuration is stored locally in your browser using chrome.storage.sync. The only permissions used are:

• storage — to save your environment configuration
• tabs — to read the current tab URL and navigate
• activeTab — to update the badge on the active tab

Support

If you find UrlFlip useful, consider buying me a coffee.

File Structure

toggle-env/
├── manifest.json
├── background.js          # Service worker: badge, shortcut, first-run
├── popup.html/js/css      # Popup UI
├── options.html/js/css    # Settings page
├── lib/
│   └── url-switcher.js    # Shared: URL switching + storage helpers
├── icons/                 # 16/32/48/128px PNGs
└── generate-icons.js      # One-time script to regenerate placeholder icons