ब्राउज़र प्लगइन्स के लिए Mellowtel Pascoli मॉड्यूल गाइड

इस सुविधा के लिए Mellowtel संस्करण 1.6.2 या उच्चतर की आवश्यकता है। यह पिछले संस्करणों की तुलना में एक ब्रेकिंग परिवर्तन है।

Mellowtel एक वैकल्पिक सुविधा प्रदान करता है जो आपको अधिक अनुरोधों को संभालने और इसलिए अधिक कमाने की अनुमति देता है। इस सुविधा को “Pascoli” कहा जाता है।

इंस्टॉलेशन

सबसे पहले, अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक npm पैकेज इंस्टॉल करें:

npm का उपयोग करते हुए

npm install @mellowtel/module-pascoli

yarn का उपयोग करते हुए

yarn add @mellowtel/module-pascoli

pnpm का उपयोग करते हुए

pnpm add @mellowtel/module-pascoli

नीचे आपके ब्राउज़र प्लगइन में Pascoli सुविधा को सक्षम करने के निर्देश दिए गए हैं, जिसमें स्टैंडर्ड और Plasmo फ्रेमवर्क दोनों कार्यान्वयन के विकल्प शामिल हैं।

स्टैंडर्ड कार्यान्वयन

1. `pascoli.html` नामक एक HTML फ़ाइल बनाएं

pascoli.html नामक एक फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें। सुनिश्चित करें कि यह फ़ाइल आपके अंतिम बिल्ड (/dist) निर्देशिका में शामिल हो। यदि आपने प्रारंभिक webpack कॉन्फ़िग सेटअप का पालन किया है, तो आप इस फ़ाइल को public निर्देशिका में pascoli.html के रूप में जोड़ सकते हैं।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" />
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: transparent;
        }
    </style>
    <script type="module" crossorigin src="/pascoli.js"></script>
</head>
<body>
</body>
</html>

सुनिश्चित करें कि स्क्रिप्ट टैग के src एट्रिब्यूट को आपके अंतिम बिल्ड में pascoli.js फ़ाइल के सही स्थान की ओर इंगित करने के लिए संशोधित करें

2. `pascoli.js` नामक एक JavaScript फ़ाइल बनाएं

src निर्देशिका में, या जहाँ भी आपके js फाइलें हैं, pascoli.js नामक एक फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें। सुनिश्चित करें कि यह फ़ाइल आपके अंतिम बिल्ड (/dist) निर्देशिका में शामिल हो। यदि आपने प्रारंभिक webpack कॉन्फ़िग सेटअप का पालन किया है, तो आप इस फ़ाइल को अपने webpack कॉन्फ़िग में entry ऑब्जेक्ट में जोड़ सकते हैं।

import ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. अपने webpack कॉन्फ़िग को अपडेट करें

सुनिश्चित करें कि आपके अंतिम बिल्ड निर्देशिका में pascoli.html और pascoli.js फाइलें शामिल हैं। अपने webpack कॉन्फ़िग में निम्नलिखित जोड़ें ताकि pascoli.js बिल्ड में शामिल हो:

module.exports = {
    mode: 'development', // प्रोडक्शन बिल्ड के लिए 'production' का उपयोग करें
    entry: {
        // background: path.join(__dirname, 'src', 'background.js'),
        // popup: path.join(__dirname, 'src', 'popup.js'),
        // content_script: path.join(__dirname, 'src', 'content_script.js'), ...
        pascoli: path.join(__dirname, 'src', 'pascoli.js'),
    },
    // ...
}

यदि आपने प्रारंभिक webpack कॉन्फ़िग सेटअप का पालन किया है और इसे public निर्देशिका में जोड़ा है, तो pascoli.html भी स्वचालित रूप से आपकी बिल्ड निर्देशिका में शामिल हो जाएगा।

4. manifest.json को अपडेट करें

अपने manifest.json में pascoli.html फ़ाइल को web_accessible_resources के रूप में जोड़ें:

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Plasmo फ्रेमवर्क कार्यान्वयन

यदि आप Plasmo फ्रेमवर्क का उपयोग कर रहे हैं, तो इन वैकल्पिक चरणों का पालन करें:

1. PascoliPage घटक बनाएं

अपने tabs निर्देशिका में pascoli.tsx नामक एक फ़ाइल बनाएं। यदि आपके पास tabs निर्देशिका नहीं है, तो एक बनाएं। Plasmo फ्रेमवर्क में tabs पर अधिक जानकारी यहाँ पाई जा सकती है। pascoli.tsx फ़ाइल में निम्नलिखित कोड जोड़ें:

import { useEffect } from "react"
import ModulePascoli from "@mellowtel/module-pascoli"

function PascoliPage() {
    useEffect(() => {
        const initPascoli = async () => {
            const modulePascoli = new ModulePascoli();
            await modulePascoli.init();
        }

        initPascoli().catch(console.error)
    }, [])

    return (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. Plasmo के लिए package.json को अपडेट करें

अपने package.json फ़ाइल में निम्नलिखित जोड़ें:

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

initContentScript को अपडेट करें

दोनों कार्यान्वयनों के लिए, Pascoli फ़ाइल के सही पथ को शामिल करने के लिए अपने content script में initContentScript विधि को संशोधित करें:

// स्टैंडर्ड कार्यान्वयन के लिए
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

Plasmo फ्रेमवर्क के लिए, आप निम्नलिखित का उपयोग कर सकते हैं:

// Plasmo फ्रेमवर्क के लिए
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

​इंस्टॉलेशन

​npm का उपयोग करते हुए

​yarn का उपयोग करते हुए

​pnpm का उपयोग करते हुए

​स्टैंडर्ड कार्यान्वयन

​1. pascoli.html नामक एक HTML फ़ाइल बनाएं

​2. pascoli.js नामक एक JavaScript फ़ाइल बनाएं

​3. अपने webpack कॉन्फ़िग को अपडेट करें

​4. manifest.json को अपडेट करें

​Plasmo फ्रेमवर्क कार्यान्वयन

​1. PascoliPage घटक बनाएं

​2. Plasmo के लिए package.json को अपडेट करें

​initContentScript को अपडेट करें

इंस्टॉलेशन

npm का उपयोग करते हुए

yarn का उपयोग करते हुए

pnpm का उपयोग करते हुए

स्टैंडर्ड कार्यान्वयन

1. `pascoli.html` नामक एक HTML फ़ाइल बनाएं

2. `pascoli.js` नामक एक JavaScript फ़ाइल बनाएं

3. अपने webpack कॉन्फ़िग को अपडेट करें

4. manifest.json को अपडेट करें

Plasmo फ्रेमवर्क कार्यान्वयन

1. PascoliPage घटक बनाएं

2. Plasmo के लिए package.json को अपडेट करें

initContentScript को अपडेट करें