Chrome Eklentisiyle Yerel, Test ve Canlı URL’leri Kolayca Değiştirin

Web uygulamalarını geliştirirken en sık karşılaşılan sıkıntılardan biri, farklı ortamlar arasında geçiş yaparken URL’leri elle değiştirmek zorunda kalmaktır. Geliştiriciler, sürekli olarak üretimden test ortamına, oradan da yerel sunucuya geçiş yaparken hem zaman kaybeder hem de hataya açık bir süreçle uğraşmak zorunda kalır. Basit bir Chrome eklentisi sayesinde, bu işlem artık birkaç tıklamayla ve hatasız bir şekilde tamamlanabilir.

Yerel, Staging ve Üretim Arasında Saniyeler İçinde Geçiş

Geliştirme sürecinde sıkça yapılan bir hata, ortamlar arasında geçiş yaparken URL’lerin sadece alan adını değiştirmekle yetinilmesidir. Oysa doğru bir geçiş, yolu, sorgulama parametrelerini, hash değerlerini ve hatta özel portları bile korumayı gerektirir. Örneğin, test ortamındaki bir ürün sayfasını yerel geliştirme ortamında açarken:

`

URL’sini:

`

olarak değiştirmek, manuel olarak hem zahmetli hem de hataya açıktır. Bu eklenti, tüm bu bileşenleri koruyarak sadece bir tıklamayla geçiş yapmanızı sağlar.

Manifest V3 ile Basit ve Güvenilir Yapı

Eklenti, Manifest V3 standartlarına uygun olarak geliştirilmiş olup, gereksiz karmaşıklıktan arındırılmıştır. Temel dosya yapısı aşağıdaki gibidir:

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

Eklenti yalnızca iki temel izin gerektirir:

{
  "manifest_version": 3,
  "name": "Ortam URL Değiştirici",
  "permissions": ["storage", "tabs"],
  "action": {
    "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "background": {
    "service_worker": "background.js"
  }
}

• tabs izni, aktif sekmenin URL’sini okumak ve değiştirmek için gereklidir.
• storage izni ise kullanıcı ayarlarının saklanması içindir.

Önemli bir nokta, eklentin herhangi bir sayfa içeriğini incelemediği için host izinlerine ihtiyaç duymamasıdır. Bu da kullanıcı gizliliğine saygılı bir tasarım sağlar.

Geçiş Algoritması: Basitlik ve Doğruluk

Eklentinin çalışma mantığı oldukça basittir. İlk olarak, aktif sekmedeki URL okunur ve bu URL’nin kökeni (origin) ile eklentide tanımlı olan ortamların kökenleri karşılaştırılır. Örneğin:

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

Bu karşılaştırma, localhost:3000 ve localhost:3001 gibi benzer URL’leri birbirine karıştırmamak için URL.origin kullanılarak yapılır. Ardından, hedef ortamın kökeni ve kalan yol bileşenleri birleştirilerek yeni URL oluşturulur:

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

Bu sayede, hem yolun tamamı hem de sorgulama parametreleri ve hash değerleri korunmuş olur.

Kullanıcı Ayarları ile Esnek Ortam Tanımlama

Eklenti, kullanıcıların kendi ortamlarını tanımlamasına olanak tanır. Örneğin:

• Yerel ortam: `
• Staging ortamı: `
• Üretim ortamı: `

Bu ayarlar, chrome.storage.sync kullanılarak Chrome profilleri arasında senkronize edilir. Böylece geliştiriciler, farklı cihazlarda aynı ayarları kullanabilir.

Geliştiriciler için Öğretici Bir Proje

Bu eklenti, Manifest V3’in temel özelliklerini öğrenmek için ideal bir başlangıç noktasıdır. Kullanıcı arayüzü, ayarlar sayfası, veri saklama, sekme yönetimi ve servis çalışanı yapısını içerirken herhangi bir çerçeve veya derleme aracına ihtiyaç duymaz. Bu da geliştiricilerin temel kavramları hızlı bir şekilde anlamasını sağlar.

Sıfır Maliyetli Kurulum ve Kullanım

Eklentin kaynağı MIT lisansı altında yayınlanmıştır ve GitHub üzerinden erişilebilir. Kullanıcılar, ZIP dosyasını indirerek Chrome’a paketlenmemiş olarak yükleyebilir. Geliştirici kimlik doğrulaması henüz tam olarak uygulanmadığı için Chrome Web Mağazası’na yayınlanması şu an için mümkün değildir. Bu da geliştiricilerin eklentiyi hemen kullanmaya başlamasını kolaylaştırır.

Geliştirme sürecinde karşılaşılan küçük ama tekrarlayan görevler, uzun vadede önemli zaman kayıplarına yol açabilir. Bu eklenti, bu süreci otomatikleştirerek geliştiricilerin odaklanması gereken asıl işlere daha fazla zaman ayırmasını sağlar. Basit bir araç olmasına rağmen, geliştirme verimliliğini artırmada büyük bir fark yaratabilir.