Mods-Modifications? यदि आप गेमिंग में रुचि रखते हैं, तो आप जानते हैं कि मॉडेड गेम खेलने जैसा कुछ नहीं है। यह आपका पसंदीदा गेम है, लेकिन अतिरिक्त शक्ति, सुविधाओं और मनोरंजन के साथ। अब, अपने वेब ब्राउज़िंग अनुभव में वही उत्साह लाने की कल्पना करें। यह बिल्कुल वही है जो ब्राउज़र एक्सटेंशन करते हैं - वे आपके ब्राउज़र के लिए मॉड की तरह हैं, इसे उन तरीकों से सुपरचार्ज करते हैं जिनके बारे में आपने कभी सोचा भी नहीं होगा।

क्रोम एक्सटेंशन के साथ, आप अपने ब्राउज़र को अपनी आवश्यकताओं के अनुरूप बदल सकते हैं - चाहे वह विशिष्ट यूआरएल को अवरुद्ध करना हो, नई सुविधाएँ जोड़ना हो, या यहाँ तक कि इसे पूरी तरह से ताज़ा रूप देना हो। और सबसे अच्छा हिस्सा? आप ये एक्सटेंशन स्वयं बना सकते हैं. इस गाइड में, मैं आपको अपना स्वयं का Chrome एक्सटेंशन बनाने की चरण-दर-चरण प्रक्रिया के बारे में बताऊंगा।

वेब एक्सटेंशन के साथ शुरुआत करना आपके विचार से कहीं अधिक आसान है! यदि आप जावास्क्रिप्ट जानते हैं, तो यह बहुत आसान है—बस एक नई एपीआई सीखने की बात है। आख़िरकार, इसके मूल में अभी भी जावास्क्रिप्ट है।

यह लेख इसके लिए एक पूरक है: क्रोम एक्सटेंशन हैंडबुक: मेमोरी-हैवी से प्रोडक्शन-रेडी

विषयसूची

• वेब एक्सटेंशन 101
• मेनिफेस्ट को तोड़ना:
• एक सरल छवि डाउनलोडर का निर्माण
• डाउनलोड फ़ंक्शन:
• हम अपने एक्सटेंशन का परीक्षण करने के लिए तैयार हैं
• एक्सटेंशन लोड हो रहा है
• निष्कर्ष

वेब एक्सटेंशन 101

वेब एक्सटेंशन मॉड की तरह हैं, लेकिन ब्राउज़र के लिए। आप पूरी तरह से अनुकूलित कर सकते हैं कि ब्राउज़र कैसे व्यवहार करता है - एडब्लॉक के बारे में सोचें - या मोज़िला थीम की तरह यह कैसा दिखता है।

आरंभ करने के लिए, एक नया फ़ोल्डर बनाएं!

आपको बस एक मैनिफ़ेस्ट.जेसन की आवश्यकता है। यह मुख्य कार्य है लेकिन वेब एक्सटेंशन के लिए। यह पहली फ़ाइल है जिसे ब्राउज़र खोजता है!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

मैनिफ़ेस्ट में आपके एक्सटेंशन के लिए सभी मेटाडेटा शामिल हैं। यह इस प्रकार है कि ब्राउज़र आपके एक्सटेंशन को कैसे समझते हैं और यह क्या कर सकता है।

प्रकट को तोड़ना:

• "प्रकट_संस्करण": 3, यह ब्राउज़र को आपके द्वारा उपयोग किया जा रहा एपीआई संस्करण बताता है। संस्करण 2 पिछला होने के साथ, संस्करण 3 (वी3) नवीनतम एपीआई है। यह अधिक सुरक्षित और उपयोगी है, और क्रोम सहित अधिकांश ब्राउज़र केवल संस्करण 3 पर चले गए हैं।

एक मुख्य अंतर लगातार पृष्ठभूमि स्क्रिप्ट से सेवा कर्मियों की ओर बढ़ना है। V2 में पृष्ठभूमि स्क्रिप्ट एक्सटेंशन के पूरे जीवनकाल के दौरान चलती है (जब उपयोगकर्ता ब्राउज़ कर रहा है), इसलिए "निरंतर" पहलू। V3 में, वे केवल तभी चलते हैं जब आवश्यक हो!

• सामग्री स्क्रिप्ट: सामग्री स्क्रिप्ट को वेबपेज में ही इंजेक्ट किया जाता है। हमारे छोटे एक्सटेंशन में, content.js को "मिलान" से मेल खाने वाले किसी भी URL में इंजेक्ट किया जाएगा: [""]। इसलिए, जब आप किसी यूआरएल को ब्राउज़ करते हैं या एक नया टैब खोलते हैं, तो content.js को पेज में इंजेक्ट किया जाएगा और चलाया जाएगा।

पृष्ठभूमि स्क्रिप्ट के विपरीत, सामग्री स्क्रिप्ट की DOM तक पहुंच होती है।

यह एक साधारण प्लगइन की मूल संरचना है। जैसे-जैसे आप अधिक विस्तार परियोजनाएँ बनाते हैं, आप अनुमतियों और अतिरिक्त कार्यक्षमता के बारे में जानेंगे। एक परिचय के लिए, यह सरल विवरण पर्याप्त है।

एक सरल छवि डाउनलोडर का निर्माण

तैयार?

यह एक्सटेंशन मेरे द्वारा कुछ समय पहले लिए गए कंप्यूटर विज़न कोर्स से प्रेरित है। हमें Google खोज से छवियां डाउनलोड करने के लिए एक टूल लागू करने की आवश्यकता थी।

ध्यान दें: मैं इस एक्सटेंशन को हर समय चालू रखने का सुझाव नहीं देता, जब तक कि आप हर बार ब्राउज़ करते समय छवियां डाउनलोड नहीं करना चाहते।

अपने मेनिफेस्ट.जेसन के समान फ़ोल्डर में, content.js बनाएं और निम्नलिखित पेस्ट करें:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

याद रखें, एक सामग्री स्क्रिप्ट को एक वेबपेज में इंजेक्ट किया जाता है। उदाहरण के लिए, जब आप example.com पर नेविगेट करते हैं, तो प्रोसेसऑलइमेज चलेंगे।

यह बस सभी छवि तत्वों को पकड़ लेता है और उन्हें एक डाउनलोड फ़ंक्शन में भेज देता है:

const images = document.querySelectorAll('img');

डाउनलोड फ़ंक्शन:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

नोट: यह केवल स्थिर छवियों के लिए काम करेगा। गतिशील और आलसी-लोड की गई छवियां दूषित हो सकती हैं - यह कुछ ऐसा है जिसे आप भविष्य के पुनरावृत्तियों में संभाल सकते हैं।

हम अपने विस्तार का परीक्षण करने के लिए तैयार हैं

मैं ब्रेव का उपयोग कर रहा हूं, जो क्रोम पर आधारित है, लेकिन प्रक्रिया सभी ब्राउज़रों में समान है।

परीक्षण करने के लिए, आपको अपने चुने हुए ब्राउज़र में डेवलपर मोड सक्षम करना होगा।

एक्सटेंशन लोड हो रहा है

यह एक्सटेंशन, अपरिवर्तित, मोज़िला में भी काम करना चाहिए क्योंकि हम क्रोम नेमस्पेस पर निर्भर नहीं हैं।

बहादुर:

              एड्रेस बार में Brave://extensions/ टाइप करें।        

                डेवलपर मोड सक्षम करें।      

                फ़ोल्डर का चयन करके एक्सटेंशन लोड करें।
             

 क्रोम और एज: ब्रेव के समान चरणों का पालन करें।

        (क्रोम://एक्सटेंशन/ या एज://एक्सटेंशन/)

निष्कर्ष

मॉड्स—संशोधन मज़ेदार हैं! यह एक्सटेंशन सरल हो सकता है, लेकिन यह आपको आरंभ करने के लिए बुनियादी बातें दिखाता है। मोज़िला के एमडीएन के पास वेब एक्सटेंशन (सामान्य वेब एक्सटेंशन और ब्राउज़र-विशिष्ट दोनों) के बारे में आपके ज्ञान को बढ़ाने के लिए एक आदर्श संसाधन है।

याद रखें: अवांछित डाउनलोड से बचने के लिए जब आपका काम पूरा हो जाए तो एक्सटेंशन बंद कर दें या इसे अनइंस्टॉल कर दें।

या इससे भी बेहतर…

एक चुनौती: इनपुट प्राप्त करने का एक तरीका ढूंढें (संकेत: क्लिक, आइकन और पृष्ठभूमि स्क्रिप्ट) और प्रक्रिया छवियों को केवल तभी चलाएं जब उपयोगकर्ता एक बटन पर क्लिक करता है।