Save hours testing: Chrome extension for instant localhost switching

Testing web applications across multiple environments often means wasting time on manual URL edits. Developers frequently copy production or staging URLs, replace the hostname with localhost, keep the path, query string, and hash intact, and hope they didn’t introduce typos. This repetitive workflow disrupts focus and adds up to hours of lost productivity over a week. A simple Chrome extension can automate this entire process, allowing instant environment switching without touching a single character in the URL.

One-click environment switching for developers

This extension analyzes the current tab’s URL, identifies the active environment, and instantly switches to another configured environment—all while preserving the path, query parameters, hash, custom ports, and base paths. For example, transforming

into

can be accomplished with a single click. The tool eliminates the need to manually edit URLs, reducing errors and saving valuable time during development and testing cycles.

Minimal Manifest V3 structure with essential permissions

The extension is intentionally designed to be lightweight, consisting only of core configuration files and scripts. The directory structure is straightforward:

• url-switcher/
• manifest.json
• popup.html
• popup.js
• popup.css
• options.html
• options.js
• background.js
• icons/

The manifest file leverages Chrome’s Manifest V3, requiring only two permissions: storage and tabs. The tabs permission enables reading and updating the active tab’s URL, while storage allows saving environment configurations across sessions. Notably, the extension does not require host permissions, as it does not inspect page content—it only navigates between URLs.

{
  "manifest_version": 3,
  "name": "URL Environment Switcher",
  "permissions": ["storage", "tabs"],
  "action": {
    "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "background": {
    "service_worker": "background.js"
  }
}

Core switching logic that preserves every URL component

The extension’s switching logic follows a clear, repeatable process. First, it reads the current tab’s URL and compares its origin with the configured environments. Instead of relying on string prefix matching, it uses URL.origin to accurately distinguish between similar environments like localhost:3000 and localhost:3001.

The algorithm then strips the base path of the active environment and constructs the new URL by combining the target origin with the original path, query string, and hash. Finally, the extension updates the tab’s URL to the new destination. This ensures that developers can switch environments without losing their place or introducing errors.

const current = new URL(currentUrl);
const activeIndex = envs.findIndex(env => {
  const envUrl = new URL(env.baseUrl);
  return envUrl.origin === current.origin;
});

const target = new URL(targetEnv.baseUrl);
const nextUrl = target.origin + remainingPath + current.search + current.hash;
chrome.tabs.update({ url: nextUrl });

Customizable environments via a clean options interface

The extension includes an options page that lets developers define their own environments directly within Chrome. Users can configure options such as:

• Localhost: `
• Staging: `
• Production: `

These settings are stored using chrome.storage.sync, ensuring configurations remain consistent across Chrome profiles where synchronization is enabled. This eliminates the need to reconfigure environments every time a developer switches devices or browsers.

Why a minimal tool beats manual workflows

This extension isn’t complex—its power lies in simplicity. It removes a persistent, low-value task that interrupts development workflows dozens of times a day. With just a few clicks, developers can transition between environments without ever touching the URL bar.

For those learning Chrome extension development, this project serves as an excellent introduction to key concepts like popup interfaces, options pages, storage management, tab navigation, and service workers—all without requiring frameworks or build tools. It’s a practical example of how small automation tools can significantly improve daily productivity.

As browser-based development continues to evolve, tools like this one highlight the value of lightweight, purpose-built solutions over generic workflows.