AD

Chrome Manifest V3 के दौर में खुद बनाएं अपना Custom Extension: बिगिनर्स के लिए स्टेप-बाय-स्टेप गाइड

The Jayhooo Infotech 7/21/2026 03:04:00 PM
Chrome Manifest V3 के दौर में खुद बनाएं अपना Custom Extension: बिगिनर्स के लिए स्टेप-बाय-स्टेप गाइड

गूगल क्रोम का नया अपडेट और आपका ब्राउज़िंग अनुभव

हाल के दिनों में तकनीकी जगत में गूगल क्रोम के 'Manifest V3' (MV3) अपडेट को लेकर काफी चर्चा रही है। गूगल ने अपने क्रोम ब्राउज़र से पुराने 'Manifest V2' को धीरे-धीरे पूरी तरह से हटाना शुरू कर दिया है। इस बदलाव का सीधा असर उन एड-ब्लॉकर्स और प्राइवेसी टूल्स पर पड़ा है जिन्हें हम रोजाना इस्तेमाल करते हैं। कई लोकप्रिय एक्सटेंशन्स ने काम करना बंद कर दिया है या उनके काम करने के तरीके में बड़े बदलाव आए हैं।

लेकिन क्या आप जानते हैं कि इस नए Manifest V3 आर्किटेक्चर का उपयोग करके आप खुद का एक कस्टम क्रोम एक्सटेंशन बना सकते हैं? जी हां, अपनी जरूरत के हिसाब से वेब पेजों से ध्यान भटकाने वाले एलिमेंट्स (जैसे कि साइडबार, पॉप-अप या विज्ञापन) को छुपाने के लिए आप खुद का एक लाइटवेट 'Focus Mode' एक्सटेंशन तैयार कर सकते हैं। इस ट्यूटोरियल में हम यही सीखने वाले हैं।

Manifest V3 क्या है और यह क्यों महत्वपूर्ण है?

सरल शब्दों में कहें तो 'Manifest' एक ऐसी कॉन्फ़िगरेशन फाइल होती है जो ब्राउज़र को बताती है कि एक्सटेंशन का नाम क्या है, उसे कौन-सी अनुमतियां (Permissions) चाहिए और वह कौन-सी स्क्रिप्ट चलाएगा।

Manifest V3 गूगल क्रोम का नया एक्सटेंशन प्लेटफॉर्म है जिसे सुरक्षा, गोपनीयता और परफॉर्मेंस को बेहतर बनाने के लिए डिज़ाइन किया गया है। पुराने Manifest V2 में एक्सटेंशन बैकग्राउंड में लगातार चलते रहते थे जिससे रैम (RAM) और बैटरी की खपत ज्यादा होती थी। MV3 में इसे बदलकर 'Service Workers' का इस्तेमाल किया गया है, जो केवल जरूरत पड़ने पर ही एक्टिव होते हैं। इसके अलावा, सुरक्षा के लिहाज से अब एक्सटेंशन किसी बाहरी सर्वर से कोड डाउनलोड करके रन नहीं कर सकते, सारा कोड एक्सटेंशन पैकेज के अंदर ही होना चाहिए।

हम क्या बनाने जा रहे हैं? (The Real-World Example)

हम एक व्यावहारिक 'Smart Focus Mode' क्रोम एक्सटेंशन बनाएंगे। जब आप किसी वेबसाइट पर पढ़ाई या काम कर रहे होंगे, तब इस एक्सटेंशन के एक सिंगल क्लिक से वेब पेज के अनचाहे और ध्यान भटकाने वाले हिस्से (जैसे साइडबार या रेकमेंडेशन बॉक्स) गायब हो जाएंगे।

आवश्यकताएं (Prerequisites)

  • HTML और JavaScript की बुनियादी समझ।
  • कोई भी टेक्स्ट एडिटर (जैसे VS Code या Notepad++)।
  • आपके कंप्यूटर में इंस्टॉल किया हुआ Google Chrome ब्राउज़र।

स्टेप-बाय-स्टेप गाइड: अपना पहला क्रोम एक्सटेंशन बनाएं

स्टेप 1: प्रोजेक्ट फोल्डर तैयार करें

अपने कंप्यूटर पर कहीं भी एक नया फोल्डर बनाएं और इसका नाम Smart-Focus-Extension रख लें। हमारी सभी फाइलें इसी फोल्डर के अंदर रहेंगी।

स्टेप 2: Manifest फाइल बनाएं (manifest.json)

अपने टेक्स्ट एडिटर में एक नई फाइल बनाएं और उसे manifest.json नाम से सेव करें। यह हमारे एक्सटेंशन का दिमाग है। इसमें निम्नलिखित कोड पेस्ट करें:

{
  "manifest_version": 3,
  "name": "Smart Focus Mode",
  "version": "1.0",
  "description": "वेबसाइट्स से ध्यान भटकाने वाले एलिमेंट्स को छुपाएं।",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

कोड का मतलब समझें:
यहाँ manifest_version: 3 दर्शाता है कि हम नए प्लेटफॉर्म का उपयोग कर रहे हैं। permissions में हमने activeTab और scripting की अनुमति मांगी है ताकि हम केवल उसी टैब पर अपना कोड चला सकें जो वर्तमान में खुला है।

स्टेप 3: यूजर इंटरफेस बनाएं (popup.html)

जब यूजर क्रोम के टूलबार में आपके एक्सटेंशन के आइकन पर क्लिक करेगा, तो एक छोटा सा पॉप-अप खुलेगा। इसके लिए अपने फोल्डर में popup.html नाम की फाइल बनाएं और यह कोड डालें:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 150px;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 10px;
    }
    button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 4px;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h3>Focus Mode</h3>
  <button id='toggleBtn'>Clean Page</button>
  <script src='popup.js'></script>
</body>
</html>

स्टेप 4: लॉजिक स्क्रिप्ट लिखें (popup.js)

अब हमें उस बटन को काम पर लगाना है। जब यूजर 'Clean Page' बटन पर क्लिक करेगा, तो एक्टिव वेब पेज पर एक स्क्रिप्ट चलेगी जो साइडबार या विज्ञापनों को छुपा देगी। popup.js नाम की फाइल बनाएं और नीचे दिया गया कोड लिखें:

document.getElementById('toggleBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: cleanWebPage
  });
});

function cleanWebPage() {
  // यहाँ उन कॉमन CSS Selectors की लिस्ट है जो अक्सर विज्ञापनों या साइडबार के लिए उपयोग होते हैं
  const distractors = ['aside', '#sidebar', '.sidebar', '#ads', '.ads-container', '#right-col'];
  
  distractors.forEach(selector => {
    const elements = document.querySelectorAll(selector);
    elements.forEach(el => {
      el.style.display = 'none';
    });
  });
  
  alert('पेज अब साफ और ध्यान केंद्रित करने के लिए तैयार है!');
}

यह कोड कैसे काम करता है?
जब आप बटन दबाते हैं, तो यह एक्सटेंशन सक्रिय टैब की पहचान करता है। इसके बाद, chrome.scripting.executeScript की मदद से यह cleanWebPage फंक्शन को उस वेबसाइट पर रन कर देता है। यह फंक्शन वेबसाइट के CSS स्ट्रक्चर में जाकर साइडबार या विज्ञापन वाले हिस्सों को ढूंढकर उन्हें display: none कर देता है जिससे वे स्क्रीन से गायब हो जाते हैं।

अपने एक्सटेंशन को गूगल क्रोम में कैसे लोड करें?

अब आपका कस्टम क्रोम एक्सटेंशन पूरी तरह से तैयार है। इसे अपने ब्राउज़र में इंस्टॉल करने के लिए इन आसान स्टेप्स का पालन करें:

  1. गूगल क्रोम ब्राउज़र खोलें और एड्रेस बार में chrome://extensions/ टाइप करके एंटर दबाएं।
  2. पेज के ऊपरी दाहिने कोने (Top Right) में दिए गए Developer mode के टॉगल बटन को ऑन करें।
  3. अब बाईं ओर दिखाई देने वाले Load unpacked बटन पर क्लिक करें।
  4. उस फोल्डर (Smart-Focus-Extension) को सिलेक्ट करें जिसे आपने स्टेप 1 में बनाया था।

बधाई हो! आपका खुद का 'Smart Focus Mode' एक्सटेंशन अब क्रोम के टूलबार में दिखाई देने लगेगा। किसी भी ब्लॉग या समाचार वेबसाइट पर जाएं, एक्सटेंशन पर क्लिक करें और 'Clean Page' बटन दबाकर इसका जादू देखें।

निष्कर्ष

गूगल का Manifest V3 अपडेट भले ही शुरुआत में डेवलपर्स के लिए थोड़ा चुनौतीपूर्ण रहा हो, लेकिन इसने ब्राउज़र सुरक्षा और स्पीड को एक नए स्तर पर पहुंचा दिया है। खुद का एक्सटेंशन बनाना न केवल एक मजेदार कोडिंग प्रोजेक्ट है, बल्कि यह आपको वेब टेक्नोलॉजीज जैसे DOM मैनिपुलेशन और ब्राउज़र APIs को करीब से समझने का मौका देता है। अब आप इस कोड को और कस्टमाइज़ कर सकते हैं और अपनी पसंदीदा वेबसाइटों के हिसाब से नए फीचर्स जोड़ सकते हैं।

अक्सर पूछे जाने वाले प्रश्न (FAQs)

Q1. क्या Manifest V3 एक्सटेंशन सभी क्रोमियम ब्राउज़रों पर काम करेंगे?

हाँ, गूगल क्रोम के अलावा माइक्रोसॉफ्ट एज (Microsoft Edge), ब्रेव (Brave), और ओपेरा (Opera) जैसे सभी क्रोमियम-आधारित ब्राउज़रों पर Manifest V3 एक्सटेंशन पूरी तरह से काम करेंगे।

Q2. क्या बिना कोडिंग सीखे भी क्रोम एक्सटेंशन बनाया जा सकता है?

बेसिक एक्सटेंशन बनाने के लिए आपको HTML और थोड़ी सी JavaScript की आवश्यकता होती है। हालांकि, आज के समय में आप ChatGPT या अन्य AI टूल्स की मदद से आसानी से कोड जनरेट करवाकर अपना खुद का एक्सटेंशन तैयार कर सकते हैं।

Q3. क्या खुद का बनाया हुआ एक्सटेंशन सुरक्षित होता है?

हाँ, क्योंकि आपने इसका कोड खुद लिखा है और यह आपके कंप्यूटर पर लोकल रूप से लोड किया गया है। यह किसी भी थर्ड-पार्टी सर्वर पर आपका डेटा नहीं भेजता, इसलिए यह पूरी तरह सुरक्षित है।

Q4. क्या मैं इस एक्सटेंशन को क्रोम वेब स्टोर पर पब्लिश कर सकता हूँ?

हाँ, आप एक डेवलपर अकाउंट बनाकर (जिसके लिए गूगल $5 की वन-टाइम फीस लेता है) अपने एक्सटेंशन को क्रोम वेब स्टोर पर अपलोड कर सकते हैं ताकि अन्य लोग भी इसका उपयोग कर सकें।

Tags

Post a Comment

0 Comments

You Can Contact on WhatsApp - 9509503477