Show HN: Build yapılandırması olmadan web uzantısı oluşturan bir CLI aracı yapımı

Extension.js Tanıtımı

• Extension.js, kurulum gerektirmeyen plug-and-play tarzında çapraz tarayıcı uzantı geliştirme aracıdır
• TypeScript, WebAssembly, React ve modern JavaScript’i varsayılan olarak destekleyerek çapraz tarayıcı uzantılar oluşturmanıza olanak tanır

Yeni bir uzantı oluşturma

• Aşağıdaki komutlarla yeni bir uzantıyı kolayca oluşturabilirsiniz

  npx extension create my-extension
  cd my-extension
  npm run dev
  

• Komut çalıştırıldıktan sonra yeni bir tarayıcı örneği açılırsa hemen geliştirmeye başlayabilirsiniz

Chrome Extension Samples kullanımı

• Chrome Extension Samples deposundaki örnekleri kullanarak hızlıca geliştirmeye başlayabilirsiniz
  1. Terminali açın
  2. Projeyi oluşturacağınız dizine gidin
  3. Aşağıdaki komutu çalıştırın

     npx extension dev <sample-name>
     

  • <sample-name> alanını Chrome Extension Samples’ta kullanmak istediğiniz örneğin adıyla değiştirin
• Örnek: page-redder örneğini isteme

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
  

Microsoft Edge’de Chrome Extension Samples kullanımı

• Extension.js, Microsoft Edge dahil olmak üzere çeşitli tarayıcıları destekler
• Edge uyumlu bir uzantıya başlamak için:
  1. Terminali açın
  2. İstediğiniz proje dizinine gidin
  3. Aşağıdaki komutu çalıştırın

     npx extension dev <sample-name> --browser=edge
     

  • <sample-name> alanını kullanacağınız örneğin adıyla değiştirin
• Örnek: magic8ball örneğini Edge’te çalıştırma

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge 
  

Edge’de Mozilla eklentisi çalıştırma

• Firefox ile Edge arasındaki açığı azaltmak için Mozilla eklentileri Edge’de çalıştırılabilir
  1. Proje dizinine gidin
  2. Aşağıdaki komutu kullanın

     npx extension dev <addon-name> --browser=edge --polyfill=true
     

  • Mozilla eklentisini alıp Edge için uyarlayın
• Örnek: MDN WebExtensions Examples içindeki Apply CSS örneğini Edge’de çalıştırma

  npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
  

Mevcut bir uzantıda Extension.js kullanma

• Mevcut uzantınız bir paket yöneticisi kullanıyorsa, Extension.js paketini kurup bir betik oluşturarak çalıştırabilirsiniz
  1. devDependency olarak extension kurun

     npm install extension --save-dev
     

  2. npm betiklerini Extension.js komutlarına bağlayın

     {
       "scripts": {
         "build": "extension build", 
         "dev": "extension dev",
         "start": "extension start"  
       },
       "devDependencies": {
         "extension": "latest"
       }
     }
     

• Geliştirme için npm run dev, üretim modu önizlemesi için npm run start, üretim modu derlemesi için npm run build komutlarını kullanın

Geliştirme için belirli tarayıcı kullanma

• Masaüstü tarayıcı desteği

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

• ☑️ = Çalışma olasılığı yüksek, ancak tarayıcı başlatıcısı desteklenmiyor
• Mobil tarayıcı desteği

Firefox Android	iOS Safari
⛔️	⛔️

• Belirli bir tarayıcı hedefliyorsanız, dev/start komutlarına --browser bayrağını iletin
  • Örnek: npx extension dev path/to/extension --browser=edge
• İpucu: --browser="all" ile kullanılabilir tüm tarayıcıları tek seferde yükleyin

GN⁺’in görüşü

• Extension.js, çapraz tarayıcı uzantı geliştirme için güçlü bir araç gibi görünüyor. Özellikle kurulum gerekmeden hemen kullanılabildiği ve birden fazla tarayıcıyı kolayca desteklediği için geliştirme süresini ciddi biçimde kısaltabileceği düşünülüyor.
• Chrome Extension Samples veya MDN WebExtensions Examples gibi mevcut örnekleri kullanabilmek de büyük bir avantaj. Yeni başlayan geliştiriciler için de başlangıcı kolaylaştırır gibi görünüyor.
• Ancak Firefox veya Safari gibi bazı tarayıcılar henüz tam anlamıyla desteklenmiyor gibi görünüyor, bu nedenle dikkat etmek gerekiyor. Sadece belirli bir tarayıcıyı hedefliyorsanız o tarayıcının özel geliştirme araçlarını kullanmayı düşünmek gerekebilir.
• Mevcut Plasmo, WebExtensions API gibi benzer araçlarla karşılaştırıldığında avantaj ve dezavantajları merak ediyorum. Özellikle Manifest V3 gibi en yeni spesifikasyonların desteklenip desteklenmediğini kontrol etmek gerekebilir.

[GN⁺]

Hacker News görüşleri

• Chrome uzantısı geliştirmek için kullanışlı bir framework olarak Extension.js tanıtıldı
  • Şu anda Firefox desteği tam değil
• Diğer geliştiriciler de Chrome uzantısı geliştirirken zorluk yaşadıklarını paylaştı
  • Özellikle stil uygulamak zorlayıcıydı
  • Extension.js'in bu zorlukları gidermesi bekleniyor
• Extension.js'in README dokümantasyonu da iyi yazıldığı için beğeni topladı
• Google Play'in karmaşıklığı nedeniyle uygulamasına uzantı eklemekte tereddüt eden bir geliştirici de Extension.js kullanmayı düşünüyor
• Uzantılar ile sekmeler arasında iletişim özelliğinin de Extension.js'e dahil edilmesinin iyi olacağı belirtildi
  • DOM'dan veri okumak veya uzantıdan aktif sekmeye mesaj göndermek kullanışsızdı
• Plasmo gibi benzer frameworklerle karşılaştırmaya dair soru gündeme getirildi
• Chrome uzantısı geliştirirken yaşanan sahtekârlık sendromuna (Imposter Syndrome) değinildi
  • Yeni proje oluşturmak zor
  • Extension.js'in bunu hafifletmesi bekleniyor
• Safari desteğinin safari-web-extension-converter CLI aracı kullanılarak nispeten kolay olacağı görüşü paylaşıldı
• Daha önce Chrome uzantısı geliştirmiş bir kişi, bu deneyime dayanarak Extension.js'in avantajlarını merak ettiğini ifade etti
  • Sadece dosya kopyalamanın ötesinde ne sunuyor?
  • Çapraz tarayıcı desteği mi? Çoklu dil desteği mi?
• Chrome uzantısı geliştirirken geliştirme araçlarının yetersizliğini hisseden bir geliştirici, Extension.js'e dair beklentisini dile getirdi