Show HN: Membuat alat CLI untuk membuat ekstensi web tanpa konfigurasi build

 (github.com/cezaraugusto)
4 poin oleh GN⁺ 2024-05-02 | 1 komentar | Bagikan ke WhatsApp

Pengenalan Extension.js

  • Extension.js adalah alat pengembangan ekstensi lintas browser bergaya plug-and-play yang tidak memerlukan pengaturan
  • Mendukung TypeScript, WebAssembly, React, dan JavaScript modern secara bawaan untuk membuat ekstensi lintas browser

Membuat ekstensi baru

  • Anda dapat membuat ekstensi baru dengan mudah dengan perintah berikut 
    npx extension create my-extension
cd my-extension
npm run dev
  • Setelah perintah dijalankan dan sebuah instance browser baru terbuka, Anda bisa langsung mulai pengembangan

Menggunakan Chrome Extension Samples

  • Gunakan sampel dari repositori Chrome Extension Samples untuk mulai mengembangkan dengan cepat
    1. Buka terminal
    2. Pindah ke direktori tempat membuat proyek
    3. Jalankan perintah berikut 
      npx extension dev <sample-name>
    • Ganti <sample-name> dengan nama sampel yang akan digunakan dari Chrome Extension Samples
  • Contoh: mengeksekusi sampel page-redder 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Menggunakan Chrome Extension Samples di Microsoft Edge

  • Extension.js mendukung berbagai browser termasuk Microsoft Edge
  • Cara memulai ekstensi yang kompatibel dengan Edge:
    1. Buka terminal
    2. Pindah ke direktori proyek yang diinginkan
    3. Jalankan perintah berikut 
      npx extension dev <sample-name> --browser=edge
    • Ganti <sample-name> dengan nama sampel yang akan digunakan
  • Contoh: menjalankan sampel magic8ball di Edge 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Menjalankan add-on Mozilla di Edge

  • Untuk mengurangi kesenjangan antara Firefox dan Edge, Anda dapat menjalankan add-on Mozilla di Edge
    1. Pindah ke direktori proyek
    2. Gunakan perintah berikut 
      npx extension dev <addon-name> --browser=edge --polyfill=true
    • Menyesuaikan add-on Mozilla agar berjalan di Edge
  • Contoh: menjalankan contoh Apply CSS dari MDN WebExtensions Examples di Edge 
    npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

Menggunakan Extension.js pada ekstensi yang sudah ada

  • Jika ekstensi yang sudah ada sudah menggunakan package manager, Anda dapat menginstal paket Extension.js lalu menjalankannya dengan membuat skrip
    1. Instal extension sebagai devDependency 
      npm install extension --save-dev
    2. Hubungkan npm script dengan perintah Extension.js 
      {
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
  • Gunakan npm run dev saat pengembangan, dan npm run start atau npm run build untuk mode produksi

Menggunakan browser tertentu untuk pengembangan

  • Dukungan browser desktop
Brave Chrome Edge Firefox Opera Safari Vivaldi
☑️ ✅ ✅ ⛔️ ☑️ ⛔️ ☑️
  • ☑️ = Kemungkinan berfungsi, tetapi launcher browser belum didukung
  • Dukungan browser seluler
Firefox Android iOS Safari
⛔️ ⛔️
  • Untuk menargetkan browser tertentu, terapkan flag --browser pada perintah dev/start
    • Contoh: npx extension dev path/to/extension --browser=edge
  • Tip: mengirimkan --browser="all" akan memuat semua browser yang tersedia sekaligus

Pendapat GN⁺

  • Extension.js terlihat sebagai alat yang kuat untuk pengembangan ekstensi lintas browser. Terutama karena bisa digunakan langsung tanpa pengaturan dan mudah mendukung beberapa browser, yang dapat memangkas waktu pengembangan secara signifikan.
  • Keunggulan besar lainnya adalah kemampuannya memanfaatkan sampel yang sudah ada seperti Chrome Extension Samples dan MDN WebExtensions Examples; bahkan pengembang pemula tampaknya juga dapat memulai dengan mudah.
  • Namun, beberapa browser seperti Firefox atau Safari terlihat belum didukung sepenuhnya, sehingga perlu kehati-hatian. Jika menargetkan browser tertentu, sebaiknya mempertimbangkan untuk menggunakan alat pengembangan khusus browser tersebut.
  • Akan menarik untuk mengetahui kelebihan dan kekurangan dibandingkan alat serupa seperti Plasmo dan WebExtensions API. Terutama perlu memeriksa apakah dukungan terhadap spesifikasi terbaru seperti Manifest V3 sudah ada.

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-02
Komentar Hacker News
  • Diperkenalkan Extension.js, sebuah framework berguna untuk pengembangan ekstensi Chrome
    • Dukungan Firefox saat ini belum sepenuhnya sempurna
  • Pengembang lain juga berbagi pengalaman menghadapi kesulitan saat mengembangkan ekstensi Chrome
    • Terutama penerapan style yang cukup sulit
    • Diharapkan Extension.js akan menyelesaikan kesulitan semacam itu
  • README Extension.js juga dipuji karena dokumentasinya ditulis dengan baik
  • Seorang pengembang yang sebelumnya menahan diri menambahkan ekstensi ke aplikasi karena kompleksitas Google Play kini juga mempertimbangkan untuk menggunakan Extension.js
  • Ada usulan agar fitur komunikasi antara ekstensi dan tab juga disertakan di Extension.js
    • Membaca dari DOM atau mengirim pesan dari ekstensi ke tab aktif terasa tidak praktis
  • Muncul pertanyaan tentang perbandingan dengan framework serupa seperti Plasmo
  • Disebutkan adanya Imposter Syndrome saat mengembangkan ekstensi Chrome
    • Pembuatan proyek baru terasa sulit
    • Diharapkan Extension.js akan membantu mengatasinya
  • Untuk dukungan Safari, dikemukakan bahwa ini kemungkinan akan cukup mudah dengan alat CLI safari-web-extension-converter
  • Berdasarkan pengalaman sebelumnya dalam mengembangkan ekstensi Chrome, seorang pengembang mempertanyakan keunggulan Extension.js
    • Apakah yang dibawa lebih dari sekadar menyalin file?
    • Dukungan lintas browser? Dukungan multibahasa?
  • Pengembang yang merasa kurangnya alat bantu saat mengembangkan ekstensi Chrome menyuarakan harapan besar pada Extension.js