यह गाइड बताता है कि कैसे Mellowtel को अपने ब्राउज़र एक्सटेंशन में बिना Webpack या Vite जैसे बंडलरों का उपयोग किए एकीकृत करें। इसके बजाय, आप एकल प्री-बंडल फ़ाइल का उपयोग करेंगे जो कंटेंट स्क्रिप्ट्स और सर्विस वर्कर्स दोनों में काम करती है।Documentation Index
Fetch the complete documentation index at: https://docs.mellowtel.com/llms.txt
Use this file to discover all available pages before exploring further.
प्रोजेक्ट सेटअप
एक बुनियादी ब्राउज़र एक्सटेंशन संरचना के साथ शुरू करें:Mellowtel बंडल प्राप्त करना
आपके एक्सटेंशन के लिएmellowtel.js फ़ाइल प्राप्त करने के दो विकल्प हैं:
विकल्प 1: प्री-बंडल फ़ाइल का उपयोग करें
शुरू करने का सबसे आसान तरीका है mellowtel-bundled repository से प्री-बंडलmellowtel.js फ़ाइल का उपयोग करना।
- mellowtel-bundled repository पर जाएं
mellowtel.jsफ़ाइल डाउनलोड करें- इसे अपने एक्सटेंशन डायरेक्टरी में कॉपी करें
विकल्प 2: अपना खुद का बंडल जनरेट करें
यदि आप स्वयं बंडल जनरेट करना पसंद करते हैं, तो इन चरणों का पालन करें:एक अस्थायी बंडलिंग डायरेक्टरी बनाएं
Mellowtel को इंस्टॉल करने और बंडल जनरेट करने के लिए एक अस्थायी डायरेक्टरी बनाएं:Mellowtel को esbuild के साथ बंडल करें
mellowtel-bundling डायरेक्टरी के अंदर से, एकल बंडल बनाएं जो सर्विस वर्कर्स और कंटेंट स्क्रिप्ट्स दोनों में काम करता है:
node_modules/mellowtel/dist/index.jsसे Mellowtel स्रोत लेता है- सभी निर्भरताओं को एकल फ़ाइल में बंडल करता है
- सार्वभौमिक संगतता के लिए IIFE फॉर्मेट का उपयोग करता है
- डिफ़ॉल्ट एक्सपोर्ट को वैश्विक रूप से उपलब्ध कराने के लिए एक फुटर जोड़ता है
- ब्राउज़र वातावरण के लिए ऑप्टिमाइज़ करता है और आउटपुट को मिनिफाई करता है
- बंडलिंग डायरेक्टरी में
mellowtel.jsबनाता है
अपने एक्सटेंशन में बंडल कॉपी करें
esbuild कमांड चलाने के बाद, जनरेट की गई फ़ाइल को अपने एक्सटेंशन डायरेक्टरी में कॉपी करें:अपने मैनिफेस्ट को कॉन्फ़िगर करें (दोनों विकल्प)
ऊपर दिए गए किसी भी विकल्प को चुनने के बावजूद, अपनेmanifest.json को Mellowtel बंडल को कंटेंट स्क्रिप्ट्स में शामिल करने के लिए कॉन्फ़िगर करें:
"type": "module"फ़ील्ड आपके सर्विस वर्कर में ES मॉड्यूल इम्पोर्ट्स को सक्षम करता है।- कंटेंट स्क्रिप्ट्स एरे में,
mellowtel.jsको पहले लोड किया जाना चाहिए ताकि जब आपका कंटेंट स्क्रिप्ट चले तो Mellowtel वैश्विक वेरिएबल उपलब्ध हो।
अपने एक्सटेंशन में Mellowtel का उपयोग करें
अपने सर्विस वर्कर (background.js) के लिए, बंडल की गई फ़ाइल इम्पोर्ट करें:अपने एक्सटेंशन का परीक्षण करें
अपने एक्सटेंशन का परीक्षण करने के लिए:- Chrome में
chrome://extensions/पर जाएं (या अन्य ब्राउज़रों में समकक्ष) - “डेवलपर मोड” सक्षम करें
- “लोड अनपैक्ड” पर क्लिक करें और अपने एक्सटेंशन फ़ोल्डर का चयन करें