Switch between development environments in one click
A powerful Chrome extension for developers who work across multiple environments.
Instantly switch between dev, staging, QA, and production URLs while preserving your current path.
| Feature | Description |
|---|---|
| One-Click Switching | Swap domains instantly while keeping your URL path intact |
| Port Support | Full support for localhost and custom ports (e.g., localhost:3000) |
| Keyboard Shortcuts | Alt+D to open, Alt+Shift+D for quick swap to last used domain |
| Folder Organization | Group related domains with nested subfolders |
| Drag & Drop | Reorder domains and folders with ease |
| Fuzzy Search | Find domains quickly with smart search |
| Dark Mode | Automatic theme detection with manual override |
| Import/Export | Backup and share your domain configurations |
| Context Menu | Right-click to swap domains directly from any page |
| Protocol Control | Per-domain protocol settings (HTTP/HTTPS/Preserve) |
| Ignore Path Prefixes | Strip locale or environment prefixes (e.g., /he-il, /en-us) when swapping to a domain |
Prerequisites
- Node.js v18 or higher
- npm or yarn
Steps
-
Clone the repository
git clone https://github.com/yourusername/domain-swapper-pro.git cd domain-swapper-pro -
Install dependencies
npm install
-
Build the extension
npm run build
-
Load in Chrome
- Open Chrome and navigate to
chrome://extensions - Enable Developer mode (toggle in top right)
- Click Load unpacked
- Select the
distfolder from the project directory
- Open Chrome and navigate to
- Click the extension icon to open the popup
- Click Add Domain to add a new environment URL
- Enter the domain (e.g.,
localhost:3000,staging.example.com,app.example.com) - Optionally add a label and select a folder
- Click any domain in the list to swap your current tab's URL
- Right-click on any page and use the context menu
- Press Alt+Shift+D to instantly swap to your last used domain
- Create folders to group domains by project or environment type
- Drag and drop to reorder domains and folders
- Collapse folders to keep your list tidy
| Shortcut | Action |
|---|---|
Alt+D |
Open Domain Swapper popup |
Alt+Shift+D |
Quick swap to last used domain |
Customize shortcuts at
chrome://extensions/shortcuts
Switch between environments while keeping your current path:
| Current URL | Target Domain | Result |
|---|---|---|
localhost:3000/dashboard/users |
staging.app.com |
https://staging.app.com/dashboard/users |
staging.app.com/api/v1/users |
localhost:8080 |
http://localhost:8080/api/v1/users |
app.example.com/settings |
dev.example.com |
https://dev.example.com/settings |
y.co.il/he-il/page |
x.co.il (ignores he-il) |
https://x.co.il/page |
Start the development server with hot reload:
npm run devThe extension will automatically reload when you make changes.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run typecheck |
Run TypeScript type checking |
domain-swapper-pro/
├── src/
│ ├── background/ # Service worker & handlers
│ ├── lib/ # Utilities (URL parsing, validators)
│ ├── popup/ # Popup UI components
│ ├── options/ # Options page
│ ├── store/ # Zustand state management
│ ├── styles/ # Global styles
│ └── types/ # TypeScript types
├── icons/ # Extension icons
├── manifest.json # Extension manifest
└── vite.config.ts # Vite configuration
- React 18 — UI framework
- TypeScript — Type safety
- Vite — Build tool with CRXJS plugin
- Tailwind CSS — Styling
- Zustand — State management
- Radix UI — Accessible components
- dnd-kit — Drag and drop
Domain Swapper Pro:
- Stores all data locally in your browser
- Does not collect or transmit any personal information
- Only requires minimal permissions necessary for functionality
Contributions are welcome! Please feel free to submit a Pull Request.
MIT