Show HN: Derleme yapılandırması olmadan web uzantıları oluşturan bir CLI aracı geliştirdim

 (github.com/cezaraugusto)
4 puan yazan GN⁺ 2024-05-02 | 1 yorum | WhatsApp'ta paylaş
  • Extension.js, Chrome, Edge ve Firefox için web uzantıları geliştirmeye yönelik bir CLI; geliştirmeye yalnızca npx extension@latest create my-extension ve npm run dev ile başlanabiliyor
  • Manifest V3 parçalanması, tarayıcılar arası farklar, içerik betiklerinde hot reload eksikliği ve hedefe özel ayrı derleme hatlarını yapılandırmasız geliştirme akışı ile azaltmayı hedefliyor
  • Arka plan, içerik, popup ve seçenekler betikleri için Hot Module Replacement sunuyor; ayrıca React, Vue, Svelte, Preact bileşenleri ile TypeScript’i birinci sınıf destekliyor
  • extension build --zip ile Chrome Web Store, Edge Add-ons ve Firefox AMO gönderimleri için prodüksiyon ZIP oluşturulabiliyor; --browser=firefox gibi tarayıcıya özel derlemeler de mümkün
  • Mevcut uzantılara da extension@latest bir geliştirme bağımlılığı olarak eklenip build, dev, preview betikleri bağlanarak dahil edilebiliyor

Extension.js'in çözmeye çalıştığı sorun

  • Extension.js, Chrome, Edge ve Firefox uzantıları oluşturmak için bir CLI aracıdır
  • Temel kullanım akışı, yeni bir proje oluşturup ardından geliştirme sunucusunu çalıştırma şeklindedir
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • npm, pnpm, yarn ve bun ile çalışır
  • Dokümantasyon, şablonlar ve örnekler sırasıyla Documentation, Templates, Examples üzerinden sunulur

Geliştirici deneyimi ve temel özellikler

  • Tarayıcı uzantısı geliştirmede karşılaşılan Manifest V3 parçalanması, tarayıcılar arası farklar, içerik betiklerinde hot reload eksikliği ve hedefe özel derleme hattı sorunlarını azaltmaya odaklanır
  • Hot Module Replacement, background, content, popup ve options betiklerine uygulanır
    • Buna React, Vue, Svelte ve Preact bileşenleri de dahildir
  • Varsayılan olarak Manifest V3 kullanır ve Chrome, Edge, Firefox hedefleri için otomatik adaptörler sağlar
  • Tek bir CLI ile Chrome, Edge, Firefox ile Chromium veya Gecko tabanlı ikililer hedeflenebilir
  • webpack, rollup veya bakımı gereken eklentiler olmadan zero config yaklaşımını benimser
  • TypeScript, React, Vue, Svelte ve Preact’i birinci sınıf destekler
  • extension build --zip ile Chrome Web Store ve Firefox Add-ons gönderimine uygun prodüksiyon derlemeleri oluşturabilir
  • Mevcut uzantılara da tek bir devDependency olarak eklenebilir

Diğer uzantı geliştirme araçlarından farkı

  • Plasmo, WXT, CRXJS kullanmış olanlara yönelik olarak, Extension.js'in farklarını özellik bazında gösterir
  • GitHub örnekleri doğrudan çalıştırılabilir
  • Yönetilen tarayıcı ikilileri sunar
    • Örnek: extension install firefox izole bir Firefox derlemesi indirir
  • İçerik betikleri için çapraz tarayıcı HMR yerleşik olarak gelir ve ayrı eklenti bağlamayı gerektirmez
  • Mağaza gönderimi için prodüksiyon ZIP oluşturabilir
    • Örnek: extension build --zip
  • Herhangi bir framework'e bağımlı değildir
  • Özel Chromium ve Gecko ikilileri belirtilebilir
    • --chromium-binary
    • --gecko-binary

Desteklenen framework'ler ve tarayıcılar

  • Desteklenen framework'ler ve çalıştırma örnekleri şablon veya örnek olarak sunulur
  • extension dev, extension start, extension preview içinde tarayıcıyla ilgili bayraklar kullanılabilir
    • --browser <chrome | edge | firefox> ile tarayıcı seçilir
    • --chromium-binary <path-to-binary> ile özel bir Chromium ikilisi belirtilir
    • --gecko-binary <path-to-binary> ile özel bir Gecko veya Firefox ikilisi belirtilir
  • Desteklenen tarayıcılar Google Chrome, Microsoft Edge, Mozilla Firefox, Chromium tabanlı ve Gecko tabanlı tarayıcılardır
  • Apple Safari, Next olarak işaretlenmiştir

Derleme, paketleme ve yönetilen tarayıcılar

  • Prodüksiyon derlemesi npx extension@latest build ile çalıştırılır
  • Mağaza gönderimi için ZIP paketi npx extension@latest build --zip ile oluşturulur
  • Tarayıcıya özel derlemeler de mümkündür
    • Örnek: npx extension@latest build --browser=firefox --zip
  • Kullanışlı derleme bayrakları sunulur
    • --zip: mağazaya yükleme için ZIP olarak paketler
    • --zip-source: mağazanın kaynak kod incelemesi için kaynak dosyaları dahil eder
    • --zip-filename <name>: çıktı dosyası adını kontrol eder
    • --polyfill: çapraz tarayıcı webextension polyfill desteğini etkinleştirir
  • Extension.js, temiz geliştirme oturumları için izole tarayıcı ikililerini indirebilir ve yönetebilir
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Mevcut uzantılar ve örnek çalıştırma

  • Mevcut uzantılara geliştirme bağımlılığı olarak kurulabilir
    • npm install extension@latest --save-dev
  • package.json betiklerine extension build, extension dev, extension preview bağlanarak kullanılabilir
    • npm run dev: geliştirme
    • npm run build: prodüksiyon derlemesi
    • npm run preview: prodüksiyon çıktısını kontrol etme
  • Chrome Extension Samples içindeki örnekler doğrudan alınarak çalıştırılabilir
  • Topluluk ve örnekler Discord, GitHub issues, examples üzerinden sunulur
  • Lisans MIT'dir

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-02
Hacker News yorumları

  • Harika bir proje. Kendi eklentimde de (https://github.com/herrherrmann/omnivore-list-popup) kullanmayı düşünüyorum
    Şimdiye kadar eklenti derleme veya geliştirme modu yönetimini kendi script’lerimle hallediyordum, ama bunu zaten web-ext ile rahatça yapıp yapamayacağıma bakıyordum
    Ancak ana tarayıcım Firefox ve Extension.js henüz Firefox’u tam olarak desteklemiyor gibi görünüyor

    • Mozilla Add-On, --polyfill bayrağı eklenirse Chrome veya Edge’de çalıştırılabiliyor, ancak şu anda Firefox’ta eklentiyi elle eklemek gerekiyor
      Yakın zamanda Firefox desteği ekleme planı var, ama şimdilik bir tarayıcı çalıştırıcısı yok

  • Tam şu anda ihtiyacım olan araç. Yapıp paylaştığın için teşekkürler; Firefox desteğinin iyi olmasını umuyorum
    Firefox destek issue’su: https://github.com/cezaraugusto/extension.js/issues/5

    • Özellikle manifest.json içindeki çakışan gereksinimleri ele almada yardımcı olursa iyi olur
      Örneğin event page ile arka plan service worker’ı arasındaki fark veya tarayıcıdan tarayıcıya istenen ya da yasaklanan izinlerin tutarsız olması gibi durumlar var
    • GitHub’daki Firefox destek issue’suna daha fazla ayrıntı yazarsan iyi olur. Topluluk çözmeye yardımcı olabilir

  • Biraz kafam karıştı. Daha önce Chrome’a özel bir eklentiyi JavaScript ile yazdım; başlangıç, Chrome eklenti dokümantasyon sitesinden birkaç dosya kopyalamak kadardı
    IDE ayarı ayrıca yapmadım ve ne yapmam gerektiğini de pek bilmiyorum
    Bu aracın birkaç dosya kopyalamaktan öte ne yaptığını anlamak istiyorum. Çapraz tarayıcı desteği mi, çoklu dil desteği mi merak ediyorum

    • Böyle durumlarda Extension.js, normal web geliştirmede gözden kaçması kolay yapılandırma ayrıntılarını yönetebilir
      Chrome eklenti dokümanlarından birkaç dosyayı kopyaladıktan sonra tarayıcıda “geliştirici modu”nu elle açıp dosyaları eklemek gerekir. Kodu değiştirdiğinde, değişiklikleri görmek için tarayıcı eklentisinin etkilediği çeşitli çalışma bağlamlarını elle yenilemen gerekir. Birden fazla tarayıcıda test etmek için bu süreci her biri için tekrarlamak gerekir
      TypeScript veya JavaScript framework’leri gibi paket bağımlılıkları kullanmak istersen, yeni bir yaklaşım öğrenmek için mevcut eklenti soyutlama framework’lerine dayanman ya da webpack, Parcel, esbuild gibi araçlarla kendi yapılandırmanı oluşturman gerekir. Bu noktada tarayıcı eklentisi geliştirmek karmaşık ve bunaltıcı hale gelebilir
      Extension.js, geliştirme tarayıcısında eklentiyi paketleyip çalıştırma sürecini otomatikleştirerek bunu basitleştirir. HTML/CSS/JavaScript dışındaki tarayıcı alanları da dahil olmak üzere tüm çalışma bağlamlarında otomatik yenileme desteği sunar; TypeScript ve React gibi kod bağımlılıklarını da ayrıca yapılandırma sihrine ihtiyaç duymadan, yalnızca kurulumla destekler. Birden fazla tarayıcıda da eşzamanlı çalışır

  • Güzel proje. İlk Chrome eklentimi https://crxjs.dev/vite-plugin/getting-started ile yaptım; stilleri düzgün çalıştırmak epey uğraştırdı
    İlk tarayıcı eklentisi geliştirme deneyimim olduğu için de olabilir: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Hâlâ yapılacak çok iş var, bu projeye de bakacağım

  • Gerçekten harika. README bile güzelce hazırlanmış
    Google Play çok dağınık olduğu için uygulamaya eklenti eklemeyi erteliyordum; bunu bir denemeyi düşünüyorum

  • Harika. Benzer bir framework olan Plasmo ile nasıl karşılaştırıldığını merak ediyorum
    https://www.plasmo.com/

    • Bence en büyük fark, Plasmo’nun bir framework olması. Yani yeni bir eklenti yapmak için onun soyutlamasını öğrenmek ve o soyutlamaya göre hazırlanmış örneklere dayanmak gerekiyor
      Tarayıcı eklentisinin kendisiyle doğrudan ilgili olmayan yapılandırma dosyalarına ve belirli kurallara da uymak gerekiyor
      Buna karşılık Extension.js, standart eklenti API’siyle eklenti geliştirmenizi sağlar ve yalnızca yapılandırma dosyasını soyutlar. Araca özgü ayrıntılı bir yaklaşımı öğrenmeye gerek yoktur. Bu yüzden Chrome veya MDN örnekleri manifest dosyasını tek referans alıp çalışıyorsa, Extension.js’te kullanmak için refactor etmeye gerek kalmaz; yeni proje başlatmak ve prototip oluşturmak kolaylaşır
    • Plasmo çok kullanışlı görünüyor. Gerçekten eklenti geliştirmede kullanıp kullanmadığını merak ediyorum

  • Birkaç eklenti yaptım. Biri şakaydı: imgur kalp rengini değiştirip herkes şikâyet ettiğinde o rengi değiştiren bir eklentiydi
    Chrome eklentisi yaparken her seferinde güçlü bir impostor sendromu yaşıyorum. Garip bir şekilde yeni proje oluşturmak çok zor geliyor; böyle bir araç olsa gerçekten iyi olur

    • Tamamen katılıyorum. Eklenti geliştirmek aslında eğlenceli olmalı diye düşünüyorum. Umarım Extension.js bir sonraki projende yardımcı olur

  • Hoşuma gitti. Eklenti ile sekmeler arasındaki iletişime de biraz sihir serpiştirirse iyi olur
    Her eklenti yaptığımda DOM’u okumak veya eklentiden etkin sekmeye mesaj göndermek hep sancılı oluyor

    • Plasmo’da bakmaya değer bir mesajlaşma kütüphanesi var
      https://docs.plasmo.com/framework/messaging
    • Şu an planlarda yok, ama bu arada npm’de mutlaka iyi bir kütüphane vardır diye düşünüyorum
    • Bu süreçte özellikle neyin can sıkıcı veya kafa karıştırıcı olduğunu daha fazla paylaşabilir misin, merak ediyorum

  • Bir issue ekledim. Safari desteği, Apple’ın safari-web-extension-converter CLI aracı kullanılırsa nispeten basit olabilir gibi görünüyor

  • İyi görünüyor. Kendi eklentim Vim for Docs’ta denemeyi düşünüyorum
    Firefox’un desteklenmemesi üzücü, ama zaten Firefox ve Chromium tabanlı tarayıcıları birlikte destekleyen bir eklenti derleme aracı da yok

    • Firefox desteği bir sonraki güncellemeye eklenecek. Beklemeye değer