प्रोजेक्ट सेटअप
एक बेसिक ब्राउज़र एक्सटेंशन संरचना के साथ शुरू करें:Mellowtel बंडल प्राप्त करना
अपने एक्सटेंशन के लिएmellowtel.js फाइल प्राप्त करने के दो विकल्प हैं:
विकल्प 1: प्री-बंडल फाइल का उपयोग करें
शुरू करने का सबसे आसान तरीका है mellowtel-bundled रिपॉजिटरी से प्री-बंडलmellowtel.js फाइल का उपयोग करना।
- mellowtel-bundled रिपॉजिटरी पर जाएं
mellowtel.jsफाइल डाउनलोड करें- इसे अपने एक्सटेंशन डायरेक्टरी में कॉपी करें
विकल्प 2: अपना खुद का बंडल जनरेट करें
यदि आप खुद से बंडल जनरेट करना पसंद करते हैं, तो इन चरणों का पालन करें:एक अस्थायी बंडलिंग डायरेक्टरी बनाएं
Mellowtel को इंस्टॉल करने और बंडल जनरेट करने के लिए एक अस्थायी डायरेक्टरी बनाएं:esbuild के साथ Mellowtel को बंडल करें
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/पर जाएं (या अन्य ब्राउज़रों में समकक्ष) - “डेवलपर मोड” सक्षम करें
- “लोड अनपैक्ड” पर क्लिक करें और अपने एक्सटेंशन फोल्डर का चयन करें