Skip to main content
यह गाइड बताता है कि कैसे Mellowtel को अपने ब्राउज़र एक्सटेंशन में बिना Webpack या Vite जैसे बंडलर्स का उपयोग किए एकीकृत करें। इसके बजाय, आप एक प्री-बंडल फाइल का उपयोग करेंगे जो कंटेंट स्क्रिप्ट्स और सर्विस वर्कर्स दोनों में काम करती है।

प्रोजेक्ट सेटअप

एक बेसिक ब्राउज़र एक्सटेंशन संरचना के साथ शुरू करें:

Mellowtel बंडल प्राप्त करना

अपने एक्सटेंशन के लिए mellowtel.js फाइल प्राप्त करने के दो विकल्प हैं:

विकल्प 1: प्री-बंडल फाइल का उपयोग करें

शुरू करने का सबसे आसान तरीका है mellowtel-bundled रिपॉजिटरी से प्री-बंडल mellowtel.js फाइल का उपयोग करना।
  1. mellowtel-bundled रिपॉजिटरी पर जाएं
  2. mellowtel.js फाइल डाउनलोड करें
  3. इसे अपने एक्सटेंशन डायरेक्टरी में कॉपी करें

विकल्प 2: अपना खुद का बंडल जनरेट करें

यदि आप खुद से बंडल जनरेट करना पसंद करते हैं, तो इन चरणों का पालन करें:

एक अस्थायी बंडलिंग डायरेक्टरी बनाएं

Mellowtel को इंस्टॉल करने और बंडल जनरेट करने के लिए एक अस्थायी डायरेक्टरी बनाएं:
यह एक अलग फोल्डर बनाता है जिसमें Mellowtel पैकेज होता है जिसे आप केवल बंडलिंग के लिए उपयोग करेंगे।

esbuild के साथ Mellowtel को बंडल करें

mellowtel-bundling डायरेक्टरी के अंदर से, एक सिंगल बंडल बनाएं जो सर्विस वर्कर्स और कंटेंट स्क्रिप्ट्स दोनों में काम करता है:
यह कमांड:
  • node_modules/mellowtel/dist/index.js से Mellowtel स्रोत लेता है
  • सभी डिपेंडेंसी को एक सिंगल फाइल में बंडल करता है
  • यूनिवर्सल संगतता के लिए IIFE फॉर्मेट का उपयोग करता है
  • डिफ़ॉल्ट एक्सपोर्ट को ग्लोबली उपलब्ध कराने के लिए एक फुटर जोड़ता है
  • ब्राउज़र पर्यावरण के लिए ऑप्टिमाइज़ करता है और आउटपुट को मिनिफाई करता है
  • बंडलिंग डायरेक्टरी में mellowtel.js बनाता है

बंडल को अपने एक्सटेंशन में कॉपी करें

esbuild कमांड चलाने के बाद, जनरेट की गई फाइल को अपने एक्सटेंशन डायरेक्टरी में कॉपी करें:
अब आप अस्थायी बंडलिंग डायरेक्टरी को हटा सकते हैं क्योंकि आपको केवल आउटपुट फाइल की आवश्यकता थी:
आपके एक्सटेंशन फोल्डर में अब बंडल किया हुआ Mellowtel फाइल है जो उपयोग के लिए तैयार है।

अपने मैनिफेस्ट को कॉन्फ़िगर करें (दोनों विकल्प)

ऊपर दिए गए किसी भी विकल्प को चुनने के बावजूद, अपने manifest.json को कॉन्फ़िगर करें ताकि Mellowtel बंडल को कंटेंट स्क्रिप्ट्स में शामिल किया जा सके:
महत्वपूर्ण:
  • "type": "module" फ़ील्ड आपके सर्विस वर्कर में ES मॉड्यूल इम्पोर्ट्स को सक्षम करता है।
  • कंटेंट स्क्रिप्ट्स एरे में, mellowtel.js को पहले लोड किया जाना चाहिए ताकि जब आपका कंटेंट स्क्रिप्ट चले तो Mellowtel ग्लोबल वेरिएबल उपलब्ध हो।

अपने एक्सटेंशन में Mellowtel का उपयोग करें

अपने सर्विस वर्कर (background.js) के लिए, बंडल की गई फाइल को इम्पोर्ट करें:
कंटेंट स्क्रिप्ट्स के लिए, Mellowtel एक ग्लोबल वेरिएबल के रूप में उपलब्ध है (कोई इम्पोर्ट की आवश्यकता नहीं, क्योंकि यह मैनिफेस्ट के माध्यम से लोड होता है):

अपने एक्सटेंशन का परीक्षण करें

अपने एक्सटेंशन का परीक्षण करने के लिए:
  1. Chrome में chrome://extensions/ पर जाएं (या अन्य ब्राउज़रों में समकक्ष)
  2. “डेवलपर मोड” सक्षम करें
  3. “लोड अनपैक्ड” पर क्लिक करें और अपने एक्सटेंशन फोल्डर का चयन करें
यह दृष्टिकोण आपको Mellowtel का उपयोग करने के लाभ देता है बिना Webpack या Vite जैसे पूर्ण बिल्ड सिस्टम को सेटअप करने की जटिलता के।