Show HN: बिना बिल्ड कॉन्फ़िगरेशन के वेब एक्सटेंशन बनाने वाला CLI टूल

Extension.js परिचय

• Extension.js एक प्लग-एंड-प्ले शैली का क्रॉस-ब्राउज़र एक्सटेंशन डेवलपमेंट टूल है, जिसमें किसी सेटअप की ज़रूरत नहीं होती।
• यह TypeScript, WebAssembly, React और आधुनिक JavaScript को डिफ़ॉल्ट रूप से सपोर्ट करता है, इसलिए आप क्रॉस-ब्राउज़र एक्सटेंशन बना सकते हैं।

नया एक्सटेंशन बनाना

• नीचे दिए गए कमांड से नया एक्सटेंशन आसानी से बनाया जा सकता है

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

• कमांड चलाने के बाद जब नया ब्राउज़र इंस्टेंस खुलता है, तो आप तुरंत डेवलपमेंट शुरू कर सकते हैं।

Chrome Extension Samples का उपयोग करना

• Chrome Extension Samples रिपॉजिटरी के सैंपल्स से तेजी से डेवलपमेंट शुरू किया जा सकता है
  1. टर्मिनल खोलें
  2. उस डायरेक्टरी में जाएँ जहाँ प्रोजेक्ट बनाना है
  3. नीचे दिया गया कमांड चलाएँ

     npx extension dev <sample-name>
     

  • <sample-name> को Chrome Extension Samples में इस्तेमाल करने वाले सैंपल नाम से बदलें
• उदाहरण: page-redder सैंपल रन करें

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

Microsoft Edge में Chrome Extension Samples का उपयोग

• Extension.js कई ब्राउज़र को सपोर्ट करता है, जिसमें Microsoft Edge भी शामिल है
• Edge-संगत एक्सटेंशन शुरू करने का तरीका:
  1. टर्मिनल खोलें
  2. अपनी पसंदीदा प्रोजेक्ट डायरेक्टरी पर जाएँ
  3. नीचे दिया गया कमांड चलाएँ

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

  • <sample-name> को इस्तेमाल किए जाने वाले सैंपल नाम से बदलें
• उदाहरण: magic8ball सैंपल को Edge पर चलाएँ

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

Edge पर Mozilla ऐड-ऑन चलाना

• Firefox और Edge के बीच का अंतर कम करने के लिए Edge पर Mozilla ऐड-ऑन चलाया जा सकता है
  1. प्रोजेक्ट डायरेक्टरी पर जाएँ
  2. नीचे दिया गया कमांड चलाएँ

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

  • Mozilla ऐड-ऑन को लेकर उसे Edge के लिए ऐडजस्ट करें
• उदाहरण: MDN WebExtensions Examples के Apply CSS सैंपल को Edge पर चलाएँ

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

मौजूदा एक्सटेंशन में Extension.js का उपयोग

• अगर मौजूदा एक्सटेंशन पहले से पैकेज मैनेजर उपयोग कर रहा है, तो Extension.js इंस्टॉल करने के बाद स्क्रिप्ट बनाकर रन किया जा सकता है
  1. devDependency के रूप में extension इंस्टॉल करें

     npm install extension --save-dev
     

  2. npm scripts को Extension.js कमांड से लिंक करें

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

• डेवलपमेंट के लिए npm run dev, प्रोडक्शन रन के लिए npm run start, और प्रोडक्शन बिल्ड के लिए npm run build इस्तेमाल करें

डेवलपमेंट के लिए खास ब्राउज़र चुनना

• डेस्कटॉप ब्राउज़र सपोर्ट स्थिति

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

• ☑️ = काम करने की अच्छी संभावना, लेकिन ब्राउज़र रनर उपलब्ध नहीं
• मोबाइल ब्राउज़र सपोर्ट स्थिति

Firefox Android	iOS Safari
⛔️	⛔️

• किसी खास ब्राउज़र को टार्गेट करने के लिए dev/start कमांड में --browser फ्लैग पास करें
  • उदाहरण: npx extension dev path/to/extension --browser=edge
• टिप: --browser="all" पास करने पर उपलब्ध सभी ब्राउज़र एक साथ लोड होते हैं

GN⁺ की राय

• Extension.js क्रॉस-ब्राउज़र एक्सटेंशन डेवलपमेंट के लिए एक मजबूत टूल दिखता है। खासकर यह बिना किसी सेटअप के तुरंत काम करता है और कई ब्राउज़र को आसान तरीके से सपोर्ट कर सकता है, इसलिए डेवलपमेंट टाइम काफी घट सकता है।
• Chrome Extension Samples या MDN WebExtensions Examples जैसे मौजूदा सैंपलों का उपयोग करना भी बड़ा प्लस पॉइंट है। लगता है कि शुरुआत नए डेवलपर्स के लिए भी आसान हो जाएगी।
• हालांकि Firefox या Safari जैसी कुछ ब्राउज़र अभी पूरी तरह सपोर्टेड नहीं लगतीं, इसलिए सावधानी की ज़रूरत है। अगर आप सिर्फ किसी खास ब्राउज़र को टार्गेट कर रहे हैं, तो उसके लिए अलग नेटीव डेवलपमेंट टूल पर भी विचार करना ठीक होगा।
• existing Plasmo, WebExtensions API जैसे समान टूल्स से तुलना में इसके pros/cons क्या हैं, यह जानने की जिज्ञासा है। खासकर Manifest V3 जैसी लेटेस्ट स्पेक्स के साथ इसकी कम्पैटिबिलिटी परखना ज़रूरी लगता है।

[GN⁺]

Hacker News टिप्पणी

• Chrome extension बनाने के लिए उपयोगी फ्रेमवर्क Extension.js का परिचय दिया गया
  • अभी Firefox सपोर्ट अभी तक पूरी तरह परफेक्ट नहीं है
• अन्य डेवलपर्स ने भी Chrome extension बनाते समय आने वाली कठिनाइयाँ साझा कीं
  • खासकर स्टाइल अप्लाई करना कठिन था
  • उम्मीद है कि Extension.js इन समस्याओं को हल करेगा
• Extension.js का README डॉक्यूमेंट भी अच्छी तरह लिखा हुआ है और उसकी तारीफ की गई
• Google Play की जटिलता के कारण app में extension जोड़ने से हिचकिचाने वाले एक डेवलपर भी Extension.js का उपयोग करने पर विचार कर रहे हैं
• extension और tab के बीच communication फीचर Extension.js में हो, इसकी मांग भी सामने आई
  • DOM से रीड करना या extension से active tab में message भेजना असुविधाजनक था
• Plasmo जैसे समान फ्रेमवर्क के साथ तुलना पर सवाल पूछा गया
• Chrome extension बनाते समय आने वाले Imposer syndrome (इम्पोस्टर सिंड्रोम) का ज़िक्र हुआ
  • नया प्रोजेक्ट बनाना मुश्किल लगता है
  • उम्मीद है Extension.js इसमें मदद करेगा
• Safari सपोर्ट safari-web-extension-converter CLI टूल से काफ़ी आसान हो सकता है, ऐसा कहा गया
• पहले Chrome extension बना चुके अनुभव के आधार पर, Extension.js के फायदों को लेकर जिज्ञासा जताई गई
  • सिर्फ़ फाइल कॉपी करने से यह ज्यादा क्या कर सकता है?
  • क्या इसमें cross-browser सपोर्ट और multi-language सपोर्ट है?
• Chrome extension development में पर्याप्त tooling की कमी महसूस करने वाले डेवलपर ने भी Extension.js से अपेक्षा व्यक्त की