> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# अपने Chrome/Edge एक्सटेंशन में Mellowtel को इंटीग्रेट करें

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

पूरा करने का अनुमानित समय: 5-7 मिनट।

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

यदि इंटीग्रेशन उपयोगकर्ताओं की पसंद और सेटिंग्स का सम्मान करता है, तो Mellowtel ब्राउज़र नीतियों के साथ अनुपालन करता है।

आधिकारिक Mellowtel प्लगइन्स Chrome और Edge पर उपलब्ध हैं। जल्द ही हम इन्हें अन्य प्रमुख ब्राउज़रों पर भी सबमिट करेंगे।

Chrome: [https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc)

Edge: [https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi](https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi)

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

यदि, इसके बजाय, आपके पास Chrome पर एक प्लगइन है जो AI बैंडविड्थ शेयरिंग स्पेस में काम करता है और यह प्लगइन का एकल उद्देश्य है, तो आप अपने प्लगइन में सीधे Mellowtel को इंटीग्रेट कर सकते हैं।

इसके विपरीत, Edge, Firefox, या Safari में यह नीति नहीं है, इसलिए डेवलपर्स अपने उत्पादों में सीधे लाइब्रेरी को इंटीग्रेट कर सकते हैं और सुनिश्चित कर सकते हैं कि वे अपने उपयोगकर्ताओं से पूछें कि वे उन्हें समर्थन देना चाहते हैं या नहीं और हमेशा उन्हें प्लगइन से ही किसी भी समय अपनी सेटिंग्स बदलने का आसान तरीका दें।

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

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

# आवश्यकताएँ

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

1. आपका प्लगइन [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) का उपयोग कर रहा है।
2. आपका कोड एक संकलित तरीके से व्यवस्थित है, Webpack, Rollup, या अन्य बंडलर्स का उपयोग करके।
   यदि आपने बंडलर सेटअप नहीं किया है, तो पहले [यहां](/browser-plugins/static-to-webpack) गाइड का पालन करें।

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

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

```npm theme={null}
npm install mellowtel
```

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

  ```yarn theme={null}
  yarn add mellowtel
  ```
</Accordion>

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

आप अपने एक्सटेंशन में लाइब्रेरी को दो तरीकों से लागू कर सकते हैं।

यदि आप पहली बार वेब स्टोर पर एक्सटेंशन जारी करने जा रहे हैं तो विकल्प 1 का पालन करें।
यदि आपके पास पहले से ही वेब स्टोर पर एक्सटेंशन प्रकाशित है तो "कैसे निर्णय लें?" पढ़ें।

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

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

यह ऐसा दिखता है:

<Frame caption="सभी वेबसाइटों पर आपका डेटा पढ़ने और बदलने की अनुमति मांगने वाली अलर्ट विंडो">
  <img src="https://mintcdn.com/mellowtel/-NaMUO-H7VMwBlS7/images/alert_web_store.png?fit=max&auto=format&n=-NaMUO-H7VMwBlS7&q=85&s=c26c3ab1b347d62e376b28ec4c0766a7" width="898" height="282" data-path="images/alert_web_store.png" />
</Frame>

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

# विकल्प 1

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

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

अपने [manifest.json](https://developer.chrome.com/docs/extensions/reference/manifest) फ़ाइल में `permissions` और `host_permissions` सेक्शन को इस तरह से संशोधित करें:

```json theme={null}
{

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

}
```

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

अपने [सेवा कर्मी](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) फ़ाइल में, आपको `mellowtel` पैकेज को इंपोर्ट करना होगा।
नोट: सेवा कर्मी को `पृष्ठभूमि स्क्रिप्ट` के रूप में भी जाना जाता है।

आप अपने सेवा कर्मी फ़ाइल में निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं, अपने `configuration_key` को अपनी कुंजी से बदलकर।

```javascript theme={null}
import Mellowtel from "mellowtel";

let mellowtel;

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

<Accordion title="सेवा कर्मी कोड ब्रेकडाउन">
  mellowtel पैकेज इंपोर्ट करें

  ```javascript theme={null}
      import Mellowtel from "mellowtel";
  ```

  आप `Mellowtel(configuration_key, options?)` का उपयोग करके Mellowtel ऑब्जेक्ट का एक नया उदाहरण बना सकते हैं। Mellowtel ऑब्जेक्ट Mellowtel के SDK के बाकी हिस्सों के लिए आपका एंट्रीपॉइंट है। इस फ़ंक्शन को कॉल करते समय आपकी `configuration_key` की आवश्यकता होती है, क्योंकि यह आपके एक्सटेंशन को Mellowtel के लिए पहचानता है। आप अपनी `configuration_key` [डैशबोर्ड](https://www.mellowtel.com/mellowtel-dashboard/#home) में पा सकते हैं।

  ```javascript theme={null}
  mellowtel = new Mellowtel("<configuration_key>");
  ```

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

  ```javascript theme={null}
  await mellowtel.initBackground();
  ```
</Accordion>

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

आपको [सामग्री स्क्रिप्ट्स](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) में भी mellowtel पैकेज को इंपोर्ट करना होगा।

यह सामग्री स्क्रिप्ट `all_frames` और `<all_urls>` पर `document_start` पर चलनी चाहिए।

हम सुझाव देते हैं कि आप एक नई सामग्री स्क्रिप्ट बनाएं (जैसे content\_start\_mellowtel.js) जहां आप निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं।
अपने `configuration_key` को अपनी कुंजी से बदलें।

```javascript theme={null}
import Mellowtel from "mellowtel";

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

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

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

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

Mellowtel को सक्रिय करने के लिए, उपयोगकर्ताओं को सेवा के लिए स्पष्ट रूप से ऑप्ट-इन करना होगा।

आप ऑप्ट-इन/ऑप्ट-आउट लॉजिक को दो तरीकों से लागू कर सकते हैं:

1. Mellowtel द्वारा प्रदान किए गए पूर्व-निर्मित पृष्ठ के साथ अनुशंसित कार्यान्वयन का उपयोग करके।

2. अपने स्वयं के कस्टम ऑप्ट-इन/ऑप्ट-आउट तत्व बनाकर और [यहां](https://docs.mellowtel.com/concepts/opt-in-out#2-custom-elements) दिखाए गए तरीकों का उपयोग करके

<Info>
  यदि अपने स्वयं के ऑप्ट-इन/ऑप्ट-आउट तत्व बनाने का चयन करते हैं, तो <a href="/mellowtel-elements/quickstart" target="_blank">**Mellowtel Elements**</a> का उपयोग करने पर विचार करें - पूर्व-निर्मित UI घटक जो उपयोगकर्ता की सहमति और सेटिंग्स को न्यूनतम इंटीग्रेशन प्रयास के साथ संभालते हैं।
</Info>

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

```javascript theme={null}
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()` को बटन क्लिक या किसी अन्य प्रासंगिक घटना पर कॉल कर सकते हैं:

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

बढ़िया! अब आप अपने एक्सटेंशन को वेब स्टोर पर भेजने के लिए तैयार हैं। [यहां गाइड का पालन करें](/browser-plugins/submit-to-chrome-store) यह देखने के लिए कि अपने एक्सटेंशन को कैसे सबमिट करें।

# विकल्प 2

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

यदि आप विकल्प 1 को लागू नहीं कर सकते हैं, तो कृपया हमसे [Discord](https://discord.com/invite/txAZp4MSDe) पर संपर्क करें।