यहां आप देखेंगे कि अपने Chrome/Edge एक्सटेंशन प्रोजेक्ट में Mellowtel लाइब्रेरी को कैसे लागू करें। पूरा करने का अनुमानित समय: 5-7 मिनट।

ब्राउज़र नीतियों के साथ अनुपालन

यदि इंटीग्रेशन उपयोगकर्ताओं की पसंद और सेटिंग्स का सम्मान करता है, तो Mellowtel ब्राउज़र नीतियों के साथ अनुपालन करता है। आधिकारिक Mellowtel प्लगइन्स Chrome और Edge पर उपलब्ध हैं। जल्द ही हम इन्हें अन्य प्रमुख ब्राउज़रों पर भी सबमिट करेंगे। Chrome: https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc Edge: https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi Chrome पर, कुछ डेवलपर्स को समीक्षा के दौरान एकल उद्देश्य नीति के साथ समस्याएं हो सकती हैं, जो कहती है कि एक प्लगइन के पास केवल एक स्पष्ट रूप से बताई गई कार्यक्षमता होनी चाहिए (लेकिन अक्सर इसे बहु-विशेषता एक्सटेंशनों में असंगत रूप से व्याख्यायित किया जाता है)। ऐसे मामलों में, हम डेवलपर्स को सलाह देते हैं कि वे अपना व्यक्तिगत लिंक साझा करें और उपयोगकर्ताओं से आधिकारिक Mellowtel Chrome प्लगइन को इंस्टॉल करने के लिए कहें, जिसका एकल उद्देश्य डेवलपर्स को उन उपयोगकर्ताओं के माध्यम से कमाई करने की अनुमति देना है जो अपनी निष्क्रिय संसाधनों को साझा करके उनका समर्थन करना चाहते हैं। डेवलपर्स अपने लिंक Mellowtel डैशबोर्ड से बना सकते हैं और उपयोगकर्ताओं को आधिकारिक Mellowtel Chrome प्लगइन पर रीडायरेक्ट कर सकते हैं। यदि, इसके बजाय, आपके पास Chrome पर एक प्लगइन है जो AI बैंडविड्थ शेयरिंग स्पेस में काम करता है और यह प्लगइन का एकल उद्देश्य है, तो आप अपने प्लगइन में सीधे Mellowtel को इंटीग्रेट कर सकते हैं। इसके विपरीत, Edge, Firefox, या Safari में यह नीति नहीं है, इसलिए डेवलपर्स अपने उत्पादों में सीधे लाइब्रेरी को इंटीग्रेट कर सकते हैं और सुनिश्चित कर सकते हैं कि वे अपने उपयोगकर्ताओं से पूछें कि वे उन्हें समर्थन देना चाहते हैं या नहीं और हमेशा उन्हें प्लगइन से ही किसी भी समय अपनी सेटिंग्स बदलने का आसान तरीका दें।

अनुशंसित ब्राउज़र

वर्तमान में, हम Edge प्लगइन्स में Mellowtel को इंटीग्रेट करने की सलाह देते हैं क्योंकि हम अभी भी लाइब्रेरी के Firefox और Safari संस्करणों को अनुकूलित करने पर काम कर रहे हैं।

आवश्यकताएँ

शुरू करने से पहले, सुनिश्चित करें कि:

आपका प्लगइन Manifest V3 का उपयोग कर रहा है।
आपका कोड एक संकलित तरीके से व्यवस्थित है, Webpack, Rollup, या अन्य बंडलर्स का उपयोग करके। यदि आपने बंडलर सेटअप नहीं किया है, तो पहले यहां गाइड का पालन करें।

npm पैकेज इंस्टॉल करें

npm पैकेज इंस्टॉल करने के लिए, आप अपने टर्मिनल में निम्नलिखित कमांड चला सकते हैं:

npm install mellowtel

Yarn

यदि आप अपने पैकेज मैनेजर के रूप में yarn का उपयोग कर रहे हैं, तो आप निम्नलिखित कमांड चला सकते हैं:

yarn add mellowtel

इंटीग्रेशन का निर्णय लें

आप अपने एक्सटेंशन में लाइब्रेरी को दो तरीकों से लागू कर सकते हैं। यदि आप पहली बार वेब स्टोर पर एक्सटेंशन जारी करने जा रहे हैं तो विकल्प 1 का पालन करें। यदि आपके पास पहले से ही वेब स्टोर पर एक्सटेंशन प्रकाशित है तो “कैसे निर्णय लें?” पढ़ें।

कैसे निर्णय लें?

जब आप वेब स्टोर से अपना एक्सटेंशन इंस्टॉल करते हैं, तो क्या एक अलर्ट विंडो पॉप अप होती है जो “सभी वेबसाइटों पर आपका डेटा पढ़ने और बदलने” की अनुमति मांगती है? यह ऐसा दिखता है:

यदि ऐसा होता है, तो आप विकल्प 1 का पालन कर सकते हैं। यदि नहीं होता है, तो आपको विकल्प 2 का पालन करना होगा।

विकल्प 1

यदि आप पहली बार वेब स्टोर पर एक्सटेंशन जारी कर रहे हैं या आप लाइब्रेरी को एक एक्सटेंशन में इंपोर्ट कर रहे हैं जो सभी वेबसाइटों पर काम करने की अनुमति मांगता है, तो आप विकल्प 1 का पालन कर सकते हैं।

अपना मैनिफेस्ट सेट करें

अपने manifest.json फ़ाइल में permissions और host_permissions सेक्शन को इस तरह से संशोधित करें:

{

  "permissions": [
    "storage",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]

}

अपनी सेवा कर्मी (पृष्ठभूमि स्क्रिप्ट) सेट करें

अपने सेवा कर्मी फ़ाइल में, आपको mellowtel पैकेज को इंपोर्ट करना होगा। नोट: सेवा कर्मी को पृष्ठभूमि स्क्रिप्ट के रूप में भी जाना जाता है। आप अपने सेवा कर्मी फ़ाइल में निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं, अपने configuration_key को अपनी कुंजी से बदलकर।

import Mellowtel from "mellowtel";

let mellowtel;

(async () => {
    mellowtel = new Mellowtel("<configuration_key>"); // अपनी कॉन्फ़िगरेशन कुंजी से बदलें
    await mellowtel.initBackground();
})();

सेवा कर्मी कोड ब्रेकडाउन

mellowtel पैकेज इंपोर्ट करें

    import Mellowtel from "mellowtel";

आप Mellowtel(configuration_key, options?) का उपयोग करके Mellowtel ऑब्जेक्ट का एक नया उदाहरण बना सकते हैं। Mellowtel ऑब्जेक्ट Mellowtel के SDK के बाकी हिस्सों के लिए आपका एंट्रीपॉइंट है। इस फ़ंक्शन को कॉल करते समय आपकी configuration_key की आवश्यकता होती है, क्योंकि यह आपके एक्सटेंशन को Mellowtel के लिए पहचानता है। आप अपनी configuration_key डैशबोर्ड में पा सकते हैं।

mellowtel = new Mellowtel("<configuration_key>");

Mellowtel को initBackground मेथड को कॉल करके इनिशियलाइज़ करें। यह मेथड Mellowtel ऑब्जेक्ट को इनिशियलाइज़ करेगा और आवश्यक श्रोताओं को सेट करेगा।

await mellowtel.initBackground();

अपनी सामग्री स्क्रिप्ट सेट करें

आपको सामग्री स्क्रिप्ट्स में भी mellowtel पैकेज को इंपोर्ट करना होगा। यह सामग्री स्क्रिप्ट all_frames और <all_urls> पर document_start पर चलनी चाहिए। हम सुझाव देते हैं कि आप एक नई सामग्री स्क्रिप्ट बनाएं (जैसे content_start_mellowtel.js) जहां आप निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं। अपने configuration_key को अपनी कुंजी से बदलें।

import Mellowtel from "mellowtel";

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // अपनी कॉन्फ़िगरेशन कुंजी से बदलें
    await mellowtel.initContentScript();
})();

फिर याद रखें कि इस सामग्री स्क्रिप्ट को भी अपने manifest.json फ़ाइल में content_scripts सेक्शन में जोड़ें, किसी भी अन्य सामग्री स्क्रिप्ट के साथ जो आपके पास पहले से है। आप निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं, अपने चुने हुए नाम के साथ name_of_your_content_script.js को बदलकर।

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["<name_of_your_content_script.js>"], // <-- यहां अपनी सामग्री स्क्रिप्ट के नाम से बदलें
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

ऑप्ट-इन/ऑप्ट-आउट लॉजिक सेट करें

Mellowtel को सक्रिय करने के लिए, उपयोगकर्ताओं को सेवा के लिए स्पष्ट रूप से ऑप्ट-इन करना होगा। आप ऑप्ट-इन/ऑप्ट-आउट लॉजिक को दो तरीकों से लागू कर सकते हैं:

Mellowtel द्वारा प्रदान किए गए पूर्व-निर्मित पृष्ठ के साथ अनुशंसित कार्यान्वयन का उपयोग करके।
अपने स्वयं के कस्टम ऑप्ट-इन/ऑप्ट-आउट तत्व बनाकर और यहां दिखाए गए तरीकों का उपयोग करके

यदि अपने स्वयं के ऑप्ट-इन/ऑप्ट-आउट तत्व बनाने का चयन करते हैं, तो Mellowtel Elements का उपयोग करने पर विचार करें - पूर्व-निर्मित UI घटक जो उपयोगकर्ता की सहमति और सेटिंग्स को न्यूनतम इंटीग्रेशन प्रयास के साथ संभालते हैं।

यदि आप अनुशंसित कार्यान्वयन का उपयोग करते हैं, तो अपनी सेवा कर्मी फ़ाइल खोलें (जिसे पृष्ठभूमि स्क्रिप्ट के रूप में भी जाना जाता है) और निम्नलिखित कोड जोड़ें:

chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("एक्सटेंशन इंस्टॉल या अपडेट किया गया");
    // यदि आप पहली इंस्टॉल और अपडेट को अलग तरह से संभालना चाहते हैं
    /**
    if(details.reason === "install"){
        // पहली इंस्टॉल को संभालने के लिए एक फ़ंक्शन कॉल करें
    } else if(details.reason === "update") {
        // अपडेट को संभालने के लिए एक फ़ंक्शन कॉल करें
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});

सेटिंग्स लिंक जनरेट करें

अपने उपयोगकर्ताओं को उनके बैंडविड्थ पर पूरा नियंत्रण देने के लिए, यह आवश्यक है कि आप उन्हें किसी भी समय अपनी सेटिंग्स बदलने का एक आसानी से सुलभ तरीका छोड़ें। आप generateSettingsLink() मेथड का उपयोग करके एक लिंक जनरेट कर सकते हैं। यह मेथड एक लिंक लौटाएगा जो Mellowtel सेटिंग्स पृष्ठ को खोलेगा जहां उपयोगकर्ता किसी भी समय यह तय कर सकते हैं कि वे ऑप्ट-इन करना चाहते हैं या ऑप्ट-आउट। यह लिंक पॉपअप, विकल्प पृष्ठ या किसी अन्य स्थान पर रखा जाना चाहिए जहां उपयोगकर्ता इसे आसानी से एक्सेस कर सकें। उदाहरण के लिए, आप इसे openSettings() फ़ंक्शन में इस तरह रख सकते हैं। आप openSettings() को बटन क्लिक या किसी अन्य प्रासंगिक घटना पर कॉल कर सकते हैं:

async function openSettings() {
    try {
        // सेटिंग्स लिंक जनरेट करें और प्रबंधित करें
        const settingsLink = await mellowtel.generateSettingsLink();
        // डिबगिंग के लिए जनरेट किया गया लिंक लॉग करें
        console.log("जनरेट किया गया सेटिंग्स लिंक:", settingsLink);
        // आप अब इस लिंक को पॉपअप, विकल्प पृष्ठ, या किसी UI तत्व में उपयोग कर सकते हैं
    } catch (error) {
        console.error("सेटिंग्स लिंक जनरेट करने में त्रुटि:", error);
    }
}

बढ़िया! अब आप अपने एक्सटेंशन को वेब स्टोर पर भेजने के लिए तैयार हैं। यहां गाइड का पालन करें यह देखने के लिए कि अपने एक्सटेंशन को कैसे सबमिट करें।

विकल्प 2

विकल्प 2 आपके एक्सटेंशन को संभावित रूप से अक्षम कर सकता है यदि इसे सही ढंग से लागू नहीं किया गया है। इसलिए यह सभी उपयोगकर्ताओं के लिए उपलब्ध नहीं है

यदि आप विकल्प 1 को लागू नहीं कर सकते हैं, तो कृपया हमसे Discord पर संपर्क करें।

​ब्राउज़र नीतियों के साथ अनुपालन

​अनुशंसित ब्राउज़र

​आवश्यकताएँ

​npm पैकेज इंस्टॉल करें

​इंटीग्रेशन का निर्णय लें

​कैसे निर्णय लें?

​विकल्प 1

​अपना मैनिफेस्ट सेट करें

​अपनी सेवा कर्मी (पृष्ठभूमि स्क्रिप्ट) सेट करें

​अपनी सामग्री स्क्रिप्ट सेट करें

​ऑप्ट-इन/ऑप्ट-आउट लॉजिक सेट करें

​सेटिंग्स लिंक जनरेट करें

​विकल्प 2

ब्राउज़र नीतियों के साथ अनुपालन

अनुशंसित ब्राउज़र

आवश्यकताएँ

npm पैकेज इंस्टॉल करें

इंटीग्रेशन का निर्णय लें

कैसे निर्णय लें?

विकल्प 1

अपना मैनिफेस्ट सेट करें

अपनी सेवा कर्मी (पृष्ठभूमि स्क्रिप्ट) सेट करें

अपनी सामग्री स्क्रिप्ट सेट करें

ऑप्ट-इन/ऑप्ट-आउट लॉजिक सेट करें

सेटिंग्स लिंक जनरेट करें

विकल्प 2