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
  • Extension.js adalah CLI untuk membangun ekstensi web bagi Chrome, Edge, dan Firefox, dan pengembangan bisa dimulai hanya dengan npx extension@latest create my-extension serta npm run dev
  • Alat ini bertujuan mengurangi fragmentasi Manifest V3, perbedaan antar-browser, tidak adanya hot reload untuk content script, dan pipeline build terpisah per target menjadi alur pengembangan tanpa konfigurasi
  • Menyediakan Hot Module Replacement untuk script background, content, popup, dan options, serta mendukung React, Vue, Svelte, Preact, dan TypeScript sebagai dukungan kelas satu
  • Dengan extension build --zip, pengguna dapat membuat ZIP produksi untuk pengajuan ke Chrome Web Store, Edge Add-ons, dan Firefox AMO, serta build per browser seperti --browser=firefox
  • Dapat diterapkan juga pada ekstensi yang sudah ada dengan menambahkan extension@latest sebagai dependensi pengembangan lalu menghubungkan skrip build, dev, dan preview

Masalah yang ingin diselesaikan oleh Extension.js

  • Extension.js adalah alat CLI untuk membuat ekstensi Chrome, Edge, dan Firefox
  • Alur penggunaan dasarnya adalah membuat proyek baru lalu menjalankan server pengembangan
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Bekerja dengan npm, pnpm, yarn, dan bun
  • Dokumentasi, template, dan contoh tersedia masing-masing di Documentation, Templates, dan Examples

Pengalaman pengembangan dan fitur inti

  • Berfokus pada pengurangan masalah fragmentasi Manifest V3, perbedaan antar-browser, ketiadaan hot reload untuk content script, dan masalah pipeline build per target dalam pengembangan ekstensi browser
  • Hot Module Replacement diterapkan pada script background, content, popup, dan options
    • Termasuk juga komponen React, Vue, Svelte, dan Preact
  • Menggunakan Manifest V3 secara default dan menyediakan adaptor otomatis untuk target Chrome, Edge, dan Firefox
  • Satu CLI dapat dijalankan untuk Chrome, Edge, Firefox, serta binary berbasis Chromium atau Gecko
  • Menargetkan zero config tanpa webpack, rollup, atau plugin yang perlu dipelihara
  • Mendukung TypeScript, React, Vue, Svelte, dan Preact sebagai dukungan kelas satu
  • Dengan extension build --zip, dapat membuat build produksi yang sesuai untuk pengajuan ke Chrome Web Store dan Firefox Add-ons
  • Juga dapat ditambahkan ke ekstensi yang sudah ada sebagai satu devDependency

Perbedaan dari alat pengembangan ekstensi lain

  • Untuk pengguna yang pernah memakai Plasmo, WXT, atau CRXJS, Extension.js menjelaskan perbedaannya per fitur
  • Sampel GitHub dapat dijalankan langsung
  • Menyediakan binary browser terkelola
    • Contoh: extension install firefox akan mengunduh build Firefox yang terisolasi
  • HMR lintas browser untuk content script sudah terpasang dan tidak memerlukan plugin tambahan
  • Dapat membuat ZIP produksi untuk pengajuan ke store
    • Contoh: extension build --zip
  • Tidak bergantung pada framework tertentu
  • Dapat menentukan binary Chromium dan Gecko kustom
    • --chromium-binary
    • --gecko-binary

Framework dan browser yang didukung

  • Framework yang didukung dan contoh menjalankannya disediakan dalam template atau contoh
  • Di extension dev, extension start, dan extension preview, flag terkait browser dapat digunakan
    • Pilih browser dengan --browser <chrome | edge | firefox>
    • Tentukan binary Chromium kustom dengan --chromium-binary <path-to-binary>
    • Tentukan binary Gecko atau Firefox kustom dengan --gecko-binary <path-to-binary>
  • Browser yang didukung adalah Google Chrome, Microsoft Edge, Mozilla Firefox, yang berbasis Chromium, dan yang berbasis Gecko
  • Apple Safari ditandai sebagai Next

Build, packaging, dan browser terkelola

  • Build produksi dijalankan dengan npx extension@latest build
  • Paket ZIP untuk pengajuan ke store dibuat dengan npx extension@latest build --zip
  • Build per browser juga dimungkinkan
    • Contoh: npx extension@latest build --browser=firefox --zip
  • Tersedia flag build yang berguna
    • --zip: mengemas menjadi ZIP untuk unggah ke store
    • --zip-source: menyertakan file sumber untuk peninjauan kode sumber oleh store
    • --zip-filename <name>: mengontrol nama file output
    • --polyfill: mengaktifkan webextension polyfill lintas browser
  • Extension.js dapat mengunduh dan mengelola binary browser terisolasi untuk sesi pengembangan yang bersih
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Ekstensi yang sudah ada dan menjalankan sampel

  • Untuk ekstensi yang sudah ada, pasang sebagai dependensi pengembangan
    • npm install extension@latest --save-dev
  • Dapat digunakan dengan menghubungkan extension build, extension dev, dan extension preview ke skrip package.json
    • npm run dev: pengembangan
    • npm run build: build produksi
    • npm run preview: memeriksa output produksi
  • Sampel dari Chrome Extension Samples dapat diambil dan dijalankan langsung
  • Komunitas dan contoh tersedia di Discord, GitHub issues, dan examples
  • Lisensinya adalah MIT

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-02
Opini Hacker News

  • Proyek yang keren. Saya berpikir untuk mencobanya juga di ekstensi saya (https://github.com/herrherrmann/omnivore-list-popup)
    Sejauh ini saya menangani build ekstensi atau pengelolaan mode pengembangan dengan skrip sendiri, tetapi saya sudah melihat apakah itu bisa dibuat lebih mudah dengan web-ext
    Namun browser utama saya Firefox, dan Extension.js tampaknya belum sepenuhnya mendukung Firefox

    • Mozilla Add-On bisa dijalankan di Chrome atau Edge dengan menambahkan flag --polyfill, tetapi saat ini di Firefox ekstensi harus ditambahkan secara manual
      Ada rencana untuk menambahkan dukungan Firefox dalam waktu dekat, tetapi saat ini belum ada peluncur browser

  • Ini persis alat yang saya butuhkan sekarang. Terima kasih sudah membuat dan membagikannya, dan saya berharap dukungan Firefox berjalan baik
    Isu dukungan Firefox: https://github.com/cezaraugusto/extension.js/issues/5

    • Khususnya, akan bagus jika ini membantu menangani persyaratan yang saling bertentangan di manifest.json
      Misalnya perbedaan antara event page dan background service worker, atau kasus ketika izin yang diwajibkan atau dilarang berbeda-beda dan tidak konsisten antar-browser
    • Akan bagus jika Anda menambahkan detail lebih lanjut pada isu dukungan Firefox di GitHub. Komunitas mungkin bisa membantu menyelesaikannya

  • Agak membingungkan. Saya pernah menulis ekstensi khusus Chrome dengan JavaScript, dan awalnya hanya menyalin beberapa file dari situs dokumentasi ekstensi Chrome
    Saya tidak menyiapkan IDE secara khusus, dan juga tidak terlalu tahu apa yang harus saya lakukan
    Saya ingin memahami apa yang dilakukan alat ini selain menyalin beberapa file. Apakah ini untuk dukungan lintas-browser, atau dukungan multi-bahasa?

    • Dalam kasus seperti itu, Extension.js bisa mengelola detail konfigurasi yang mudah terlewat dalam pengembangan web biasa
      Setelah menyalin beberapa file dari dokumentasi ekstensi Chrome, Anda harus menyalakan “mode developer” secara manual di browser dan menambahkan file tersebut. Saat kode diubah, Anda harus me-refresh secara manual berbagai konteks eksekusi yang dipengaruhi ekstensi browser agar perubahan terlihat. Untuk menguji di beberapa browser, proses ini harus diulangi satu per satu
      Jika ingin memakai dependensi paket seperti TypeScript atau framework JavaScript, Anda harus bergantung pada framework abstraksi ekstensi yang ada dan mempelajari cara baru, atau membuat konfigurasi sendiri dengan alat seperti webpack, Parcel, atau esbuild. Pada titik ini, pengembangan ekstensi browser bisa menjadi rumit dan menjengkelkan
      Extension.js menyederhanakan hal ini dengan mengotomatiskan proses membundel dan menjalankan ekstensi di browser pengembangan. Ini mendukung auto-refresh di semua konteks eksekusi, termasuk area browser yang bukan HTML/CSS/JavaScript, dan juga mendukung dependensi kode seperti TypeScript dan React cukup dengan instalasi, tanpa sihir konfigurasi tambahan. Ini juga berjalan di beberapa browser sekaligus

  • Proyek yang bagus. Ekstensi Chrome pertama saya dibuat dengan https://crxjs.dev/vite-plugin/getting-started, tetapi butuh banyak usaha agar styling berfungsi dengan benar
    Mungkin karena itu pengembangan ekstensi browser pertama saya: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Masih banyak yang harus dikerjakan, jadi saya juga akan mengecek proyek ini

  • Benar-benar keren. Bahkan README-nya dibuat dengan indah
    Karena Google Play sangat berantakan, saya menunda menambahkan ekstensi ke aplikasi saya, tetapi saya berpikir untuk mencoba ini

  • Keren. Saya penasaran bagaimana perbandingannya dengan Plasmo, framework yang mirip
    https://www.plasmo.com/

    • Menurut saya perbedaan terbesar adalah Plasmo merupakan sebuah framework. Artinya, untuk membuat ekstensi baru, Anda harus mempelajari abstraksinya dan bergantung pada contoh yang disesuaikan dengan abstraksi itu
      Anda juga harus mengikuti file konfigurasi dan aturan tertentu yang tidak selalu berkaitan langsung dengan ekstensi browser itu sendiri
      Sebaliknya, Extension.js memungkinkan Anda membuat ekstensi dengan API ekstensi standar, dan hanya mengabstraksikan file konfigurasi. Anda tidak perlu mempelajari detail cara kerja khusus alat tersebut. Jadi jika contoh dari Chrome atau MDN memakai file manifest sebagai satu-satunya acuan dan berfungsi, Anda tidak perlu me-refactor-nya untuk digunakan di Extension.js, sehingga lebih mudah memulai proyek baru dan membuat prototipe
    • Plasmo terlihat sangat berguna. Saya penasaran apakah Anda pernah benar-benar memakainya untuk pengembangan ekstensi

  • Saya pernah membuat beberapa ekstensi. Salah satunya hanya untuk iseng: ketika imgur mengubah warna hati dan semua orang mengeluh, ekstensi itu mengubah warnanya
    Setiap kali membuat ekstensi Chrome, saya mengalami impostor syndrome yang cukup besar. Entah kenapa membuat proyek baru terasa sangat sulit, jadi alat seperti ini akan sangat bagus

    • Sangat setuju. Saya merasa pengembangan ekstensi seharusnya memang menyenangkan. Semoga Extension.js membantu di proyek Anda berikutnya

  • Saya suka. Akan bagus jika ada sedikit sihir juga untuk komunikasi antara ekstensi dan tab
    Setiap kali membuat ekstensi, proses membaca DOM atau mengirim pesan dari ekstensi ke tab aktif selalu terasa menyakitkan

    • Plasmo punya pustaka messaging yang layak dilihat
      https://docs.plasmo.com/framework/messaging
    • Belum ada dalam rencana langsung, tetapi sementara itu pasti ada pustaka yang bagus di npm
    • Saya penasaran apakah Anda bisa berbagi lebih banyak tentang bagian mana dari proses ini yang paling membuat frustrasi atau membingungkan

  • Saya menambahkan satu isu. Dukungan Safari sepertinya relatif sederhana jika memakai alat CLI safari-web-extension-converter dari Apple

  • Terlihat bagus. Saya akan mencobanya di ekstensi saya, Vim for Docs
    Sayang Firefox belum didukung, tetapi toh memang tidak ada alat build ekstensi yang mendukung Firefox dan browser berbasis Chromium sekaligus

    • Dukungan Firefox akan masuk dalam pembaruan berikutnya. Silakan dinantikan