Show HN: बिना build configuration के web extensions बनाने वाला CLI टूल

 (github.com/cezaraugusto)
4 पॉइंट द्वारा GN⁺ 2024-05-02 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Extension.js Chrome, Edge और Firefox के लिए web extensions build करने वाला CLI है, जिससे सिर्फ npx extension@latest create my-extension और npm run dev के साथ development शुरू किया जा सकता है
  • इसका लक्ष्य Manifest V3 fragmentation, browser-specific differences, content scripts में hot reload की कमी, और हर target के लिए अलग build pipeline जैसी समस्याओं को zero-config development flow में कम करना है
  • यह background, content, popup और options scripts के लिए Hot Module Replacement देता है, और React, Vue, Svelte, Preact components व TypeScript को first-class support करता है
  • extension build --zip से Chrome Web Store, Edge Add-ons और Firefox AMO में submit करने के लिए production ZIP बनाया जा सकता है, और --browser=firefox जैसे browser-specific builds भी संभव हैं
  • मौजूदा extensions में भी extension@latest को development dependency के तौर पर जोड़कर और build, dev, preview scripts को connect करके इसे अपनाया जा सकता है

Extension.js किन समस्याओं को हल करना चाहता है

  • Extension.js Chrome, Edge और Firefox extensions बनाने के लिए एक CLI tool है
  • basic usage flow नया project create करने के बाद development server चलाने का है
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • यह npm, pnpm, yarn, bun के साथ काम करता है
  • Documentation, templates और examples क्रमशः Documentation, Templates, Examples पर उपलब्ध हैं

Development experience और मुख्य features

  • Browser extension development में आने वाली Manifest V3 fragmentation, browser-specific differences, content script hot reload की कमी, और हर target के लिए build pipeline की समस्याओं को कम करने पर focus करता है
  • Hot Module Replacement background, content, popup और options scripts पर लागू होता है
    • इसमें React, Vue, Svelte, Preact components भी शामिल हैं
  • Manifest V3 को default के रूप में इस्तेमाल करता है और Chrome, Edge, Firefox targets के लिए automatic adapters देता है
  • एक ही CLI से Chrome, Edge, Firefox और Chromium या Gecko आधारित binaries को target करके run किया जा सकता है
  • webpack, rollup या maintain करने लायक plugins के बिना zero config का लक्ष्य रखता है
  • TypeScript, React, Vue, Svelte, Preact को first-class support करता है
  • extension build --zip से Chrome Web Store और Firefox Add-ons submissions के हिसाब से production build बनाया जा सकता है
  • मौजूदा extensions में भी इसे एक devDependency के रूप में जोड़ा जा सकता है

दूसरे extension development tools से अंतर

  • Plasmo, WXT, CRXJS इस्तेमाल कर चुके users के लिए Extension.js के फर्क को feature-wise दिखाता है
  • GitHub samples को सीधे run किया जा सकता है
  • managed browser binaries देता है
    • उदाहरण: extension install firefox एक isolated Firefox build download करता है
  • content scripts के लिए cross-browser HMR built-in है और अलग plugin जोड़ने की जरूरत नहीं है
  • store submission के लिए production ZIP बनाया जा सकता है
    • उदाहरण: extension build --zip
  • किसी framework पर निर्भर नहीं है
  • custom Chromium और Gecko binaries specify किए जा सकते हैं
    • --chromium-binary
    • --gecko-binary

Supported frameworks और browsers

  • supported frameworks और run examples templates या examples के रूप में उपलब्ध हैं
  • extension dev, extension start, extension preview में browser-related flags इस्तेमाल किए जा सकते हैं
    • --browser <chrome | edge | firefox> से browser चुना जाता है
    • --chromium-binary <path-to-binary> से custom Chromium binary specify की जाती है
    • --gecko-binary <path-to-binary> से custom Gecko या Firefox binary specify की जाती है
  • supported browsers हैं Google Chrome, Microsoft Edge, Mozilla Firefox, Chromium-based और Gecko-based
  • Apple Safari को Next के रूप में दिखाया गया है

Build, packaging और managed browsers

  • production build npx extension@latest build से run होता है
  • store submission के लिए ZIP package npx extension@latest build --zip से generate होता है
  • browser-specific builds भी संभव हैं
    • उदाहरण: npx extension@latest build --browser=firefox --zip
  • उपयोगी build flags दिए गए हैं
    • --zip: store upload के लिए ZIP में package करता है
    • --zip-source: store के source code review के लिए source files शामिल करता है
    • --zip-filename <name>: output filename control करता है
    • --polyfill: cross-browser webextension polyfill enable करता है
  • Extension.js साफ development session के लिए isolated browser binaries download और manage कर सकता है
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

मौजूदा extensions और sample run करना

  • मौजूदा extensions में इसे development dependency के रूप में install किया जाता है
    • npm install extension@latest --save-dev
  • package.json scripts में extension build, extension dev, extension preview जोड़कर इस्तेमाल किया जा सकता है
    • npm run dev: development
    • npm run build: production build
    • npm run preview: production output check
  • Chrome Extension Samples के samples को सीधे लाकर run किया जा सकता है
  • Community और examples Discord, GitHub issues, examples पर उपलब्ध हैं
  • license MIT है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-05-02
Hacker News टिप्पणियां

  • शानदार प्रोजेक्ट है। सोच रहा हूं इसे अपने extension (https://github.com/herrherrmann/omnivore-list-popup) में भी आजमाऊं
    अब तक extension build या development mode management को मैं खुद scripts से संभालता था, लेकिन देख रहा था कि क्या इसे पहले से मौजूद web-ext से आसानी से बनाया जा सकता है
    हालांकि मेरा मुख्य browser Firefox है, और लगता है Extension.js अभी Firefox को पूरी तरह support नहीं करता

    • Mozilla Add-On को --polyfill flag लगाकर Chrome या Edge में चलाया जा सकता है, लेकिन फिलहाल Firefox में extension को manually add करना पड़ता है
      निकट भविष्य में Firefox support जोड़ने की योजना है, लेकिन अभी browser launcher नहीं है

  • अभी बिल्कुल इसी tool की जरूरत थी। इसे बनाकर share करने के लिए धन्यवाद, और उम्मीद है Firefox support अच्छे से आएगा
    Firefox support issue: https://github.com/cezaraugusto/extension.js/issues/5

    • खास तौर पर अगर यह manifest.json की conflicting requirements को handle करने में मदद करे तो अच्छा होगा
      जैसे event pages और background service workers का फर्क, या हर browser में मांगी/प्रतिबंधित permissions का inconsistent होना
    • अच्छा होगा अगर GitHub के Firefox support issue में और details जोड़ दें। community समाधान में मदद कर सकती है

  • थोड़ा confusion है। मैंने पहले ही Chrome-only extension JavaScript में लिखा है, और शुरुआत बस Chrome extension docs site से कुछ files copy करने जैसी थी
    IDE setup अलग से नहीं किया था, और सच कहूं तो यह भी ठीक से नहीं पता कि क्या करना चाहिए
    मैं समझना चाहता हूं कि यह tool कुछ files copy करने से ज्यादा क्या करता है। क्या यह cross-browser support है, या multi-language support?

    • ऐसे case में Extension.js सामान्य web development में छूट जाने वाली configuration details manage कर सकता है
      Chrome extension docs से कुछ files copy करने के बाद browser में “developer mode” manually on करना और files add करनी पड़ती हैं। code बदलने पर changes देखने के लिए browser extension जिन अलग-अलग execution contexts को affect करता है, उन्हें manually refresh करना पड़ता है। कई browsers में test करना हो तो यही process हर browser के लिए repeat करनी पड़ती है
      TypeScript या JavaScript framework जैसी package dependencies इस्तेमाल करनी हों तो existing extension abstraction framework पर निर्भर होकर नया तरीका सीखना पड़ता है, या webpack, Parcel, esbuild जैसे tools से खुद configuration बनानी पड़ती है। इस point पर browser extension development जटिल और frustrating हो सकता है
      Extension.js development browser में extension को bundle करके run करने की process automate कर इसे simple बनाता है। यह HTML/CSS/JavaScript के अलावा browser areas तक, सभी execution contexts के लिए auto refresh support करता है, और TypeScript तथा React जैसी code dependencies को भी बिना अलग configuration magic के, सिर्फ install करने पर support करता है। यह कई browsers में भी साथ-साथ चलता है

  • अच्छा प्रोजेक्ट है। अपना पहला Chrome extension मैंने https://crxjs.dev/vite-plugin/getting-started से बनाया था, लेकिन styles सही से चलाने में काफी मेहनत लगी
    शायद इसलिए भी कि यह मेरा पहला browser extension development था: https://chromewebstore.google.com/detail/bettermenu-for-door...
    अभी बहुत काम बाकी है, इसलिए इस project को भी check करूंगा

  • वाकई कमाल है। README भी खूबसूरती से बना है
    Google Play इतना messy है कि मैं app में extension जोड़ने को टाल रहा था, लेकिन इसे एक बार try करने का सोच रहा हूं

    • Chrome extensions Google Play पर नहीं, बल्कि Chrome Web Store(https://chromewebstore.google.com) पर publish किए जाते हैं

  • बढ़िया। curious हूं कि इसकी Plasmo जैसे similar framework से तुलना कैसी है
    https://www.plasmo.com/

    • मेरे हिसाब से सबसे बड़ा फर्क यह है कि Plasmo एक framework है। यानी नया extension बनाने के लिए उसकी abstraction सीखनी पड़ती है, और उसी abstraction के हिसाब से बने examples पर निर्भर रहना पड़ता है
      browser extension से सीधे तौर पर जरूरी न होने वाली configuration files और specific rules भी follow करने पड़ते हैं
      दूसरी तरफ Extension.js standard extension API से extension बनाने देता है, और सिर्फ configuration files को abstract करता है। tool-specific internal details सीखने की जरूरत नहीं होती। इसलिए अगर Chrome या MDN के examples manifest file को single source of truth मानकर काम करते हैं, तो Extension.js में इस्तेमाल करने के लिए उन्हें refactor करने की जरूरत नहीं पड़ती, जिससे नया project शुरू करना और prototype बनाना आसान हो जाता है
    • Plasmo काफी useful लगता है। curious हूं कि क्या आपने इसे सच में extension development में इस्तेमाल किया है

  • मैंने कुछ extensions बनाए हैं। एक मजाकिया था: जब imgur ने heart का color बदल दिया था और सब नाराज थे, तब उसे वापस बदलने वाला extension
    Chrome extension बनाते समय हर बार impostor syndrome बहुत जोर से आता है। अजीब तरह से नया project बनाना बहुत मुश्किल लगता है, इसलिए ऐसा tool हो तो वाकई अच्छा होगा

    • पूरी तरह सहमत। extension development तो मजेदार होना चाहिए, है न? उम्मीद है अगले project में Extension.js मदद करेगा

  • पसंद आया। अच्छा होगा अगर extension और tabs के बीच communication पर भी थोड़ा magic छिड़क दें
    extension बनाते समय हर बार DOM पढ़ना या extension से active tab को message भेजना हमेशा दर्दनाक लगता है

    • Plasmo में एक messaging library है जिसे देखना चाहिए
      https://docs.plasmo.com/framework/messaging
    • अभी immediate plan में नहीं है, लेकिन इस बीच npm पर जरूर कोई अच्छी library होगी
    • जानना चाहूंगा कि इस process में खास तौर पर क्या चीज frustrating या confusing लगती है

  • मैंने एक issue add किया है। Safari support Apple के safari-web-extension-converter CLI tool का इस्तेमाल करके relatively simple होना चाहिए

  • अच्छा लग रहा है। इसे अपने extension Vim for Docs में एक बार आजमाऊंगा
    Firefox support न होना अफसोस की बात है, लेकिन वैसे भी ऐसा कोई extension build tool नहीं है जो Firefox और Chromium-based browsers दोनों को support करता हो

    • Firefox support अगले update में आएगा। इंतजार कीजिए