URL Environment Switcher

One click to switch between localhost, staging, and production. The browser extension (Chrome + Firefox) that saves web developers 30 seconds, 50 times a day.

Download & Install Free Star on GitHub

No Chrome Web Store required. Download, load unpacked, done in 60 seconds.

What it does

One-Click Switching

Click "Staging" and your current page instantly navigates to the staging equivalent. Path, query params, and hash preserved.

Auto-Detection

The popup highlights which environment you're currently on — localhost, staging, or production — so you never lose track.

Custom Environments

Add your own environments in the Options page. Works with any URL pattern: dev, QA, preview, feature branches.

Zero Dependencies

Pure HTML + CSS + JavaScript. No React, no npm, no build step. Loads instantly. Weighs under 10KB.

Syncs Across Devices

Your environment configs sync via chrome.storage.sync. Set up once, available on every machine you sign into.

Open Source (MIT)

Full source on GitHub. Fork it, modify it, ship it to your team. No vendor lock-in. No subscription.

See it in action

The popup appears when you click the extension icon. The Options page lets you configure your environments.

Extension Popup

myapp.vercel.app — Google Chrome ─ □ ✕
🌐My App — Product 42
+
← → ↺
🔒 myapp.vercel.app/products/42?debug=true 🧩

Env Switcher

https://myapp.vercel.app/products/42?debug=true#section

Current: Production

●Localhostlocalhost:3000
Stagingstaging.myapp.com
Productionmyapp.com
⚙ Settings

Options Page

chrome-extension://abc123def/options.html — Google Chrome ─ □ ✕
🧩URL Environment Switcher — Options
+
← → ↺
🔒 chrome-extension://abc123def/options.html 🧩

Environment Settings

Configure the base URLs for each environment. Click to switch preserves path, query, and hash.

×
×
×
+ Add EnvironmentSave

Install in 60 seconds — no store required

You don't need the Chrome Web Store. The extension is a pure unpacked build — download the ZIP, extract, load into Chrome. Works immediately, no login, no account, no wait.

1

Download the ZIP

url-switcher-latest.zip (7.4 KB) — or git clone https://github.com/ttcd77/url-switcher.git if you prefer

2

Extract and load in Chrome

Unzip the folder, go to chrome://extensions, toggle Developer mode (top right), click Load unpacked, and select the extracted folder (the one containing manifest.json)

3

Configure your environments

Right-click the extension icon in the toolbar, select Options, and replace the default example URLs with your own localhost, staging, and production addresses

Coming to Chrome Web Store soon — one-click install without Developer Mode. Until then, the unpacked flow above works identically.

Firefox Install

The extension works in Firefox too — same code, same features, zero changes. Uses the WebExtensions API.

1

Download the Firefox build

url-switcher-firefox-v1.0.0.zip (6.6 KB) — purpose-built for Firefox with browser_specific_settings in manifest

2

Load in Firefox

Extract the ZIP, go to about:debugging#/runtime/this-firefox, click Load Temporary Add-on, and select the manifest.json file

3

Configure your environments

Go to about:addons, find the extension, click the Options tab, and set your environment URLs

Coming to Mozilla Add-ons (AMO) soon. Free developer registration — no fee like Chrome Web Store. Until then, temporary loading works identically.

Comparison

Manual URL editingBookmark foldersURL Switcher
Switch environmentsCopy-paste-editFind bookmarkOne click
Preserves path & queryManualNoYes
Shows current environmentLook at URL barNoYes, highlighted
Custom environmentsYour brainLimitedUnlimited
Syncs across devicesNoYesYes
CostFree (your time)FreeFree (MIT)

Frequently Asked Questions

How do I switch between localhost and production in Chrome?
Install URL Environment Switcher by loading it as an unpacked extension. Right-click the extension icon, select Options, and configure your environment base URLs (e.g. http://localhost:3000 and https://myapp.com). Then click the extension icon on any page to toggle between environments with one click. The extension preserves your current path, query parameters, and hash — so /products/42?debug=true transfers between environments automatically.
What is a URL environment switcher Chrome extension?
A URL environment switcher is a developer tool that lets you jump between different versions of the same web application — typically localhost (your machine), staging/preview (testing server), and production (live site). Instead of manually editing the URL bar every time, you click a single button in the extension popup. It's especially useful during code review, QA testing, and debugging when you need to compare behavior across environments.
Is this extension free?
Yes. The core URL Environment Switcher is completely free and open source under the MIT license. You can use it forever with no limits. A premium version with team features (multiple project sets, keyboard shortcuts, cloud sync) is planned via ExtensionPay, but the current free version handles all basic environment switching needs for individual developers.
Does it work with custom domains and subdomains?
Yes. You can configure any base URL patterns in the Options page — localhost ports, staging subdomains, preview deployments, QA servers, or any custom domain. Each environment consists of a label (shown in the popup) and a base URL. The extension detects your current environment and builds the target URL by replacing the base while keeping the path intact.
How is this different from bookmark folders?
Bookmark folders require you to manually find the right bookmark for each page. URL Environment Switcher automatically detects which environment you're on and builds the correct destination URL for any page you're viewing. It preserves the exact path, query string, and hash — things bookmark folders can't do. It also works with Chrome sync so your environment configs follow you across devices.
Does it collect my data?
No. URL Environment Switcher runs entirely on your local machine. It does not send any data to external servers, does not use analytics, and does not track your browsing. Your environment configurations are stored in Chrome's local storage and synced across your own devices via chrome.storage.sync if you're signed into Chrome. The full privacy policy is available in the repository.

Free. Open Source. MIT License.

The core extension is and always will be free. A premium version with team features (multiple project sets, keyboard shortcuts, ExtensionPay) is in development.

Download Free Star on GitHub

7.4 KB ZIP. No store. No account. Extract, load unpacked, done.