Chrome-Erweiterung für schnelles Wechseln zwischen Entwicklungsumgebungen

Das ständige Wechseln zwischen localhost, Staging- und Produktionsumgebungen ist eine lästige, aber unvermeidliche Aufgabe für viele Entwickler. Jedes Mal, wenn Sie eine URL von einer Umgebung in eine andere übertragen, besteht die Gefahr von Fehlern – sei es durch manuelle Eingaben, vergessene Pfade oder falsche Ports. Doch es geht auch effizienter: Mit einer kleinen Chrome-Erweiterung lassen sich diese Schritte in einem einzigen Klick erledigen, während Pfade, Abfragen und Hash-Fragmente automatisch erhalten bleiben.

Wie die Erweiterung funktioniert

Die Erweiterung analysiert die aktuelle Tab-URL und erkennt, in welcher Umgebung Sie sich befinden. Anschließend können Sie mit einem Klick nahtlos in eine andere konfigurierte Umgebung wechseln – ohne manuelle Anpassungen. Dabei bleiben folgende Elemente unverändert erhalten:

• Pfade
• Abfrageparameter (?tab=reviews)
• Hash-Anker (#pricing)
• Benutzerdefinierte Ports (z. B. :3000)
• Basis-Pfade (z. B. /api/v1)

Ein praktisches Beispiel:

` wird mit einem Klick zu:

`

Aufbau der Erweiterung (Manifest V3)

Die Erweiterung ist bewusst schlank gehalten und kommt ohne komplexe Frameworks oder Build-Tools aus. Die Dateistruktur sieht wie folgt aus:

url-switcher/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
├── options.html
├── options.js
├── background.js
└── icons/

Das manifest.json umfasst nur die notwendigen Einstellungen:

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

Die Erweiterung benötigt lediglich zwei Berechtigungen:

• storage: Zum Speichern der Umgebungs-Konfigurationen.
• tabs: Zum Auslesen und Aktualisieren der aktuellen Tab-URL.

Wichtig: Es werden keine Host-Berechtigungen benötigt, da die Erweiterung keine Inhalte der Webseiten ausliest.

Der Kernalgorithmus: So funktioniert der Wechsel

Die Logik hinter dem URL-Wechsel ist einfach, aber präzise:

1. Die aktuelle Tab-URL wird ausgelesen.
2. Die Umgebung wird anhand der origin identifiziert (nicht über String-Vergleiche).
3. Der Basis-Pfad der aktuellen Umgebung wird entfernt.
4. Die Ziel-URL wird aus der ausgewählten Umgebung plus dem ursprünglichen Pfad, Abfrage und Hash zusammengesetzt.
5. Die Tab-URL wird aktualisiert.

Ein zentraler Punkt ist die Verwendung von URL.origin statt einfacher String-Prüfungen. Dadurch werden Fehler vermieden, etwa wenn zwei lokale Server auf unterschiedlichen Ports laufen (z. B. localhost:3000 vs. localhost:3001).

Hier ein Ausschnitt des JavaScript-Codes:

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 });

Individuelle Umgebungen konfigurieren

Die Erweiterung bietet eine einfache Optionen-Seite, auf der Entwickler ihre eigenen Umgebungen definieren können. Beispiele:

• `localhost:
• `Staging:
• `Produktion:

Diese Einstellungen werden in chrome.storage.sync gespeichert und synchronisieren sich über Chrome-Konten, sofern die Sync-Funktion aktiviert ist. Das bedeutet: Ihre Konfiguration ist auf allen Geräten verfügbar, auf denen Sie Chrome mit demselben Konto nutzen.

Warum diese Erweiterung ein Game-Changer für Entwickler ist

Es handelt sich um eine scheinbar kleine, aber extrem nützliche Erweiterung – genau deshalb ist sie so wertvoll. Das manuelle Bearbeiten von URLs ist zwar trivial, aber repetitiv und fehleranfällig. Wenn man diese Aufgabe dutzende Male am Tag erledigen muss, summieren sich die verlorenen Minuten zu Stunden pro Woche.

Zudem eignet sich die Erweiterung perfekt als Einstiegsprojekt für die Arbeit mit Chrome-Erweiterungen unter Manifest V3. Sie deckt alle wesentlichen Konzepte ab:

• Popup-Benutzeroberfläche
• Optionsseite für Konfigurationen
• Nutzung der Chrome Storage API
• Tab-Navigation
• Service Worker

All das ohne externe Abhängigkeiten oder Build-Prozesse. Ein ideales Beispiel, um die Grundlagen von Chrome-Erweiterungen zu erlernen.

So nutzen Sie die Erweiterung

Die Erweiterung ist unter der MIT-Lizenz auf GitHub verfügbar. Da die Verbreitung über den Chrome Web Store derzeit blockiert ist (bis zur Identitätsüberprüfung des Entwicklers), können Sie die Erweiterung direkt als entpacktes Projekt in Chrome laden. Folgen Sie einfach diesen Schritten:

1. Laden Sie das Repository von GitHub herunter.
2. Entpacken Sie die ZIP-Datei.
3. Öffnen Sie in Chrome chrome://extensions.
4. Aktivieren Sie den Entwicklermodus.
5. Klicken Sie auf Erweiterung laden und wählen Sie den Ordner aus.

Die Erweiterung ist sofort einsatzbereit und erfordert keine weitere Einrichtung.