ब्राउज़र एक्सटेंशन डेवलपमेंट: मैनिफ़ेस्ट V3 और जावास्क्रिप्ट एपीआई

ब्राउज़र एक्सटेंशन छोटे सॉफ़्टवेयर प्रोग्राम होते हैं जो ब्राउज़िंग अनुभव को कस्टमाइज़ करते हैं। वे नई सुविधाएँ जोड़ सकते हैं, वेबसाइट सामग्री को संशोधित कर सकते हैं, विज्ञापनों को ब्लॉक कर सकते हैं, और भी बहुत कुछ। मैनिफ़ेस्ट V3 के आगमन के साथ, एक्सटेंशन बनाने और उनके काम करने के तरीके में महत्वपूर्ण बदलाव आए हैं। यह विस्तृत गाइड मैनिफ़ेस्ट V3 और जावास्क्रिप्ट एपीआई का उपयोग करके ब्राउज़र एक्सटेंशन डेवलपमेंट का पता लगाएगी, जो आपको आधुनिक ब्राउज़रों के लिए शक्तिशाली और सुरक्षित एक्सटेंशन बनाने का ज्ञान प्रदान करेगी।

ब्राउज़र एक्सटेंशन क्या हैं?

ब्राउज़र एक्सटेंशन अनिवार्य रूप से मिनी-एप्लिकेशन होते हैं जो वेब ब्राउज़र के भीतर चलते हैं। वे ब्राउज़र की कार्यक्षमता का विस्तार करते हैं और वेब पेजों के साथ सहजता से एकीकृत होते हैं। एक्सटेंशन HTML, CSS, और जावास्क्रिप्ट जैसी मानक वेब तकनीकों का उपयोग करके लिखे जाते हैं, जो उन्हें वेब डेवलपर्स के लिए अपेक्षाकृत सुलभ बनाता है।

लोकप्रिय ब्राउज़र एक्सटेंशन के उदाहरणों में शामिल हैं:

• ऐड ब्लॉकर्स: वेब पेजों पर विज्ञापनों को ब्लॉक करते हैं, जिससे ब्राउज़िंग गति में सुधार होता है और ध्यान भंग कम होता है।
• पासवर्ड मैनेजर: पासवर्ड को सुरक्षित रूप से स्टोर और प्रबंधित करते हैं, वेबसाइटों पर स्वचालित रूप से उन्हें भरते हैं।
• नोट लेने वाले एक्सटेंशन: उपयोगकर्ताओं को सीधे वेब पेजों से नोट्स लेने और उन्हें सहेजने की अनुमति देते हैं।
• उत्पादकता उपकरण: कार्य प्रबंधन, समय ट्रैकिंग और फ़ोकस मोड जैसी सुविधाएँ प्रदान करके उत्पादकता बढ़ाते हैं।
• भाषा अनुवाद उपकरण: एक क्लिक से वेब पेजों का विभिन्न भाषाओं में अनुवाद करते हैं। उदाहरण: गूगल ट्रांसलेट एक्सटेंशन।
• वीपीएन एक्सटेंशन: भौगोलिक प्रतिबंधों को बायपास करने और गोपनीयता बढ़ाने के लिए इंटरनेट ट्रैफ़िक को प्रॉक्सी करते हैं।

मैनिफ़ेस्ट V3 का महत्व

मैनिफ़ेस्ट V3 मैनिफ़ेस्ट फ़ाइल का नवीनतम संस्करण है, जो एक JSON फ़ाइल है जो ब्राउज़र को एक्सटेंशन का वर्णन करती है। यह एक्सटेंशन का नाम, संस्करण, अनुमतियाँ, बैकग्राउंड स्क्रिप्ट और अन्य आवश्यक मेटाडेटा को रेखांकित करती है। मैनिफ़ेस्ट V3 अपने पूर्ववर्ती, मैनिफ़ेस्ट V2 की तुलना में कई महत्वपूर्ण बदलाव पेश करता है, जो मुख्य रूप से सुरक्षा और प्रदर्शन पर केंद्रित हैं।

मैनिफ़ेस्ट V3 में मुख्य बदलाव:

• सर्विस वर्कर्स: मैनिफ़ेस्ट V3 बैकग्राउंड पेजों को सर्विस वर्कर्स से बदल देता है। सर्विस वर्कर्स इवेंट-ड्रिवन स्क्रिप्ट होते हैं जो एक स्थायी पेज की आवश्यकता के बिना बैकग्राउंड में चलते हैं। वे बैकग्राउंड पेजों की तुलना में अधिक कुशल और कम संसाधन-गहन होते हैं।
• डिक्लेरेटिव नेट रिक्वेस्ट एपीआई: यह एपीआई एक्सटेंशन को नेटवर्क अनुरोधों को सीधे इंटरसेप्ट किए बिना संशोधित करने की अनुमति देता है। यह फ़िल्टरिंग लॉजिक को ब्राउज़र पर ऑफ़लोड करके सुरक्षा और प्रदर्शन को बढ़ाता है।
• सख्त कंटेंट सिक्योरिटी पॉलिसी (CSP): मैनिफ़ेस्ट V3 मनमाने कोड के निष्पादन को रोकने के लिए सख्त CSP नियम लागू करता है, जिससे सुरक्षा और बढ़ जाती है।
• प्रॉमिस-आधारित एपीआई: कई एपीआई अब प्रॉमिस-आधारित हैं, जिससे एसिंक्रोनस ऑपरेशंस को प्रबंधित करना आसान हो जाता है।

मैनिफ़ेस्ट V3 में बदलाव क्यों?

• बढ़ी हुई सुरक्षा: मैनिफ़ेस्ट V3 को ब्राउज़र एक्सटेंशन की सुरक्षा में सुधार करने और उपयोगकर्ताओं को दुर्भावनापूर्ण कोड से बचाने के लिए डिज़ाइन किया गया है।
• बेहतर प्रदर्शन: सर्विस वर्कर्स और डिक्लेरेटिव नेट रिक्वेस्ट एपीआई बेहतर प्रदर्शन और कम संसाधन खपत में योगदान करते हैं।
• अधिक गोपनीयता: मैनिफ़ेस्ट V3 का उद्देश्य उपयोगकर्ताओं को उनके डेटा और गोपनीयता पर अधिक नियंत्रण देना है।

अपना डेवलपमेंट वातावरण सेट करना

ब्राउज़र एक्सटेंशन विकसित करना शुरू करने से पहले, आपको अपना डेवलपमेंट वातावरण सेट करना होगा। इसमें एक कोड एडिटर इंस्टॉल करना, टेस्टिंग के लिए एक ब्राउज़र चुनना और एक्सटेंशन की मूल फ़ाइल संरचना को समझना शामिल है।

1. कोड एडिटर

एक कोड एडिटर चुनें जिसके साथ आप सहज हों। लोकप्रिय विकल्पों में शामिल हैं:

• विज़ुअल स्टूडियो कोड (VS Code): जावास्क्रिप्ट और अन्य वेब तकनीकों के लिए उत्कृष्ट समर्थन के साथ एक मुफ़्त और शक्तिशाली कोड एडिटर।
• सब्लाइम टेक्स्ट: प्लगइन्स की एक विस्तृत श्रृंखला के साथ एक तेज़ और अनुकूलन योग्य कोड एडिटर।
• एटम: गिटहब द्वारा विकसित एक मुफ़्त और ओपन-सोर्स कोड एडिटर।

2. टेस्टिंग के लिए ब्राउज़र

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

3. मूल फ़ाइल संरचना

एक ब्राउज़र एक्सटेंशन में आमतौर पर निम्नलिखित फाइलें होती हैं:

• manifest.json: इस फ़ाइल में एक्सटेंशन का मेटाडेटा होता है, जैसे कि उसका नाम, संस्करण, अनुमतियाँ और बैकग्राउंड स्क्रिप्ट।
• background.js (या सर्विस वर्कर स्क्रिप्ट): यह स्क्रिप्ट बैकग्राउंड में चलती है और ब्राउज़र एक्शन और कॉन्टेक्स्ट मेनू क्लिक जैसे इवेंट्स को संभालती है।
• content.js: यह स्क्रिप्ट वेब पेजों के संदर्भ में चलती है और उनकी सामग्री को संशोधित कर सकती है।
• popup.html: यह फ़ाइल एक्सटेंशन के पॉपअप के यूजर इंटरफेस को परिभाषित करती है।
• popup.js: यह स्क्रिप्ट एक्सटेंशन के पॉपअप के लॉजिक को संभालती है।
• options.html: यह फ़ाइल एक्सटेंशन के विकल्प पेज के यूजर इंटरफेस को परिभाषित करती है।
• options.js: यह स्क्रिप्ट एक्सटेंशन के विकल्प पेज के लॉजिक को संभालती है।
• आइकन: ये वे आइकन हैं जिनका उपयोग ब्राउज़र के टूलबार और एक्सटेंशन प्रबंधन पेज में एक्सटेंशन का प्रतिनिधित्व करने के लिए किया जाता है।

अपना पहला एक्सटेंशन बनाना: "नमस्ते, दुनिया!"

आइए ब्राउज़र एक्सटेंशन डेवलपमेंट के मूल सिद्धांतों को प्रदर्शित करने के लिए एक सरल "नमस्ते, दुनिया!" एक्सटेंशन बनाएं।

1. एक मैनिफ़ेस्ट फ़ाइल बनाएँ (manifest.json)

एक नई डायरेक्टरी में `manifest.json` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

{
  "manifest_version": 3,
  "name": "नमस्ते, दुनिया!",
  "version": "1.0",
  "description": "एक सरल नमस्ते, दुनिया! एक्सटेंशन",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

स्पष्टीकरण:

• `manifest_version`: मैनिफ़ेस्ट फ़ाइल के संस्करण को निर्दिष्ट करता है (मैनिफ़ेस्ट V3 के लिए 3)।
• `name`: एक्सटेंशन का नाम।
• `version`: एक्सटेंशन का संस्करण संख्या।
• `description`: एक्सटेंशन का एक संक्षिप्त विवरण।
• `permissions`: अनुमतियों की एक ऐरे जो एक्सटेंशन को चाहिए (उदाहरण के लिए, "storage")।
• `action`: एक्सटेंशन के पॉपअप के गुणों को परिभाषित करता है, जिसमें डिफ़ॉल्ट पॉपअप फ़ाइल और आइकन शामिल हैं।
• `icons`: एक्सटेंशन के आइकन के पाथ निर्दिष्ट करता है।

2. एक पॉपअप फ़ाइल बनाएँ (popup.html)

उसी डायरेक्टरी में `popup.html` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

<!DOCTYPE html>
<html>
<head>
  <title>नमस्ते, दुनिया!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>नमस्ते, दुनिया!</h1>
  <p>यह एक सरल ब्राउज़र एक्सटेंशन है।</p>
</body>
</html>

यह फ़ाइल एक्सटेंशन के पॉपअप के यूजर इंटरफेस को परिभाषित करती है, जो "नमस्ते, दुनिया!" संदेश प्रदर्शित करेगा।

3. आइकन छवियाँ बनाएँ

निम्नलिखित आकारों के साथ तीन आइकन छवियाँ बनाएँ: 16x16, 48x48, और 128x128 पिक्सेल। उन्हें अपनी एक्सटेंशन डायरेक्टरी के भीतर एक `images` डायरेक्टरी में `icon16.png`, `icon48.png`, और `icon128.png` के रूप में सहेजें।

4. एक्सटेंशन को अपने ब्राउज़र में लोड करें

क्रोम:

1. क्रोम खोलें और `chrome://extensions` पर जाएँ।
2. ऊपरी दाएँ कोने में "डेवलपर मोड" सक्षम करें।
3. "लोड अनपैक्ड" पर क्लिक करें और अपनी एक्सटेंशन फ़ाइलों वाली डायरेक्टरी का चयन करें।

फ़ायरफ़ॉक्स:

1. फ़ायरफ़ॉक्स खोलें और `about:debugging#/runtime/this-firefox` पर जाएँ।
2. "लोड अस्थायी ऐड-ऑन..." पर क्लिक करें और `manifest.json` फ़ाइल का चयन करें।

आपका "नमस्ते, दुनिया!" एक्सटेंशन अब इंस्टॉल हो जाना चाहिए और ब्राउज़र के टूलबार में दिखाई देना चाहिए। पॉपअप खोलने और "नमस्ते, दुनिया!" संदेश देखने के लिए एक्सटेंशन आइकन पर क्लिक करें।

जावास्क्रिप्ट एपीआई के साथ काम करना

ब्राउज़र एक्सटेंशन जावास्क्रिप्ट एपीआई का उपयोग करके ब्राउज़र और वेब पेजों के साथ इंटरैक्ट कर सकते हैं। ये एपीआई विभिन्न कार्यात्मकताओं तक पहुँच प्रदान करते हैं, जैसे:

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

उदाहरण: स्टोरेज एपीआई का उपयोग करना

आइए एक एक्सटेंशन बनाएं जो स्टोरेज एपीआई का उपयोग करके उपयोगकर्ता का नाम संग्रहीत और पुनर्प्राप्त करता है।

1. मैनिफ़ेस्ट फ़ाइल अपडेट करें (manifest.json)

सुनिश्चित करें कि आपकी `manifest.json` में `permissions` ऐरे में `"storage"` शामिल है:

{
  "manifest_version": 3,
  "name": "स्टोरेज उदाहरण",
  "version": "1.0",
  "description": "एक एक्सटेंशन जो स्टोरेज एपीआई का उपयोग करता है",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. एक पॉपअप फ़ाइल बनाएँ (popup.html)

निम्नलिखित सामग्री के साथ अपनी `popup.html` बनाएँ या अपडेट करें:

<!DOCTYPE html>
<html>
<head>
  <title>स्टोरेज उदाहरण</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>स्टोरेज उदाहरण</h1>
  <label for="name">अपना नाम दर्ज करें:</label>
  <input type="text" id="name">
  <button id="save">सहेजें</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

3. एक पॉपअप स्क्रिप्ट बनाएँ (popup.js)

`popup.js` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // स्टोरेज से सहेजा गया नाम लोड करें
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `नमस्ते, ${data.name}!`;
    }
  });

  // बटन क्लिक होने पर नाम को स्टोरेज में सहेजें
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `नमस्ते, ${name}!`;
    });
  });
});

स्पष्टीकरण:

• यह सुनिश्चित करने के लिए कि कोड निष्पादित करने से पहले DOM पूरी तरह से लोड हो गया है, स्क्रिप्ट `DOMContentLoaded` ईवेंट को सुनती है।
• यह इनपुट फ़ील्ड, सेव बटन और ग्रीटिंग पैराग्राफ के संदर्भ प्राप्त करती है।
• यह `chrome.storage.sync.get()` का उपयोग करके स्टोरेज से सहेजे गए नाम को लोड करती है।
• यह `chrome.storage.sync.set()` का उपयोग करके सेव बटन पर क्लिक करने पर नाम को स्टोरेज में सहेजती है।
• यह सहेजे गए या दर्ज किए गए नाम के साथ ग्रीटिंग पैराग्राफ को अपडेट करती है।

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

उदाहरण: टैब्स एपीआई का उपयोग करना

आइए एक एक्सटेंशन बनाएं जो पॉपअप में वर्तमान टैब का URL प्रदर्शित करता है।

1. मैनिफ़ेस्ट फ़ाइल अपडेट करें (manifest.json)

अपनी `manifest.json` में `permissions` ऐरे में `"tabs"` अनुमति जोड़ें:

{
  "manifest_version": 3,
  "name": "टैब्स उदाहरण",
  "version": "1.0",
  "description": "एक एक्सटेंशन जो टैब्स एपीआई का उपयोग करता है",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. एक पॉपअप फ़ाइल बनाएँ (popup.html)

निम्नलिखित सामग्री के साथ अपनी `popup.html` बनाएँ या अपडेट करें:

<!DOCTYPE html>
<html>
<head>
  <title>टैब्स उदाहरण</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>टैब्स उदाहरण</h1>
  <p>वर्तमान टैब URL:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

3. एक पॉपअप स्क्रिप्ट बनाएँ (popup.js)

`popup.js` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // वर्तमान टैब का URL प्राप्त करें
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

स्पष्टीकरण:

• स्क्रिप्ट `DOMContentLoaded` ईवेंट को सुनती है।
• यह वर्तमान विंडो में वर्तमान में सक्रिय टैब प्राप्त करने के लिए `chrome.tabs.query()` का उपयोग करती है।
• यह टैब का URL प्राप्त करती है और इसे `url` पैराग्राफ में प्रदर्शित करती है।

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

बैकग्राउंड स्क्रिप्ट और सर्विस वर्कर्स

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

सर्विस वर्कर्स की मुख्य विशेषताएं:

• इवेंट-ड्रिवन: सर्विस वर्कर्स ब्राउज़र एक्शन, अलार्म और कंटेंट स्क्रिप्ट से संदेश जैसे इवेंट्स का जवाब देते हैं।
• एसिंक्रोनस: सर्विस वर्कर्स मुख्य थ्रेड को ब्लॉक करने से बचने के लिए एसिंक्रोनस एपीआई का उपयोग करते हैं।
• निष्क्रिय होने पर समाप्त: जब सर्विस वर्कर्स सक्रिय रूप से इवेंट्स को नहीं संभाल रहे होते हैं, तो उन्हें समाप्त कर दिया जाता है, जिससे संसाधनों का संरक्षण होता है।

उदाहरण: सर्विस वर्कर का उपयोग करना

आइए एक एक्सटेंशन बनाएं जो ब्राउज़र शुरू होने पर एक सूचना प्रदर्शित करता है।

1. मैनिफ़ेस्ट फ़ाइल अपडेट करें (manifest.json)

अपनी `manifest.json` को निम्नलिखित सामग्री के साथ अपडेट करें:

{
  "manifest_version": 3,
  "name": "सर्विस वर्कर उदाहरण",
  "version": "1.0",
  "description": "एक एक्सटेंशन जो सर्विस वर्कर का उपयोग करता है",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

स्पष्टीकरण:

• `"background"` प्रॉपर्टी सर्विस वर्कर स्क्रिप्ट (`background.js`) का पाथ निर्दिष्ट करती है।
• `"permissions"` ऐरे में `"notifications"` शामिल है, जो सूचनाएं प्रदर्शित करने के लिए आवश्यक है।

2. एक सर्विस वर्कर स्क्रिप्ट बनाएँ (background.js)

`background.js` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

chrome.runtime.onStartup.addListener(() => {
  // ब्राउज़र शुरू होने पर एक सूचना प्रदर्शित करें
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'ब्राउज़र शुरू हुआ',
    message: 'ब्राउज़र शुरू हो गया है।',
  });
});

स्पष्टीकरण:

• स्क्रिप्ट `chrome.runtime.onStartup` ईवेंट को सुनती है, जो ब्राउज़र शुरू होने पर ट्रिगर होता है।
• यह निर्दिष्ट गुणों के साथ एक सूचना प्रदर्शित करने के लिए `chrome.notifications.create()` का उपयोग करती है।

अपने ब्राउज़र में एक्सटेंशन को पुनः लोड करें। अब, जब आप अपना ब्राउज़र पुनः आरंभ करेंगे, तो आपको एक्सटेंशन से एक सूचना दिखाई देगी।

कंटेंट स्क्रिप्ट्स

कंटेंट स्क्रिप्ट जावास्क्रिप्ट फाइलें होती हैं जो वेब पेजों के संदर्भ में चलती हैं। वे वेब पेजों के DOM तक पहुंच सकती हैं और उन्हें संशोधित कर सकती हैं, जिससे आप वेबसाइटों के व्यवहार और उपस्थिति को अनुकूलित कर सकते हैं।

कंटेंट स्क्रिप्ट्स की मुख्य विशेषताएं:

• DOM तक पहुंच: कंटेंट स्क्रिप्ट वेब पेजों के DOM तक पहुंच सकती हैं और उनमें हेरफेर कर सकती हैं।
• वेब पेज स्क्रिप्ट से अलगाव: कंटेंट स्क्रिप्ट एक अलग वातावरण में चलती हैं, जिससे वेब पेज स्क्रिप्ट के साथ टकराव को रोका जा सकता है।
• बैकग्राउंड स्क्रिप्ट के साथ संचार: कंटेंट स्क्रिप्ट संदेश पासिंग का उपयोग करके बैकग्राउंड स्क्रिप्ट के साथ संवाद कर सकती हैं।

उदाहरण: कंटेंट स्क्रिप्ट का उपयोग करना

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

1. मैनिफ़ेस्ट फ़ाइल अपडेट करें (manifest.json)

अपनी `manifest.json` को निम्नलिखित सामग्री के साथ अपडेट करें:

{
  "manifest_version": 3,
  "name": "कंटेंट स्क्रिप्ट उदाहरण",
  "version": "1.0",
  "description": "एक एक्सटेंशन जो कंटेंट स्क्रिप्ट का उपयोग करता है",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

स्पष्टीकरण:

• `"content_scripts"` प्रॉपर्टी वेब पेजों में इंजेक्ट की जाने वाली कंटेंट स्क्रिप्ट की एक ऐरे निर्दिष्ट करती है।
• `"matches"` उन URLs को निर्दिष्ट करता है जिनमें कंटेंट स्क्रिप्ट को इंजेक्ट किया जाना चाहिए (`` सभी URLs से मेल खाता है)।
• `"js"` कंटेंट स्क्रिप्ट (`content.js`) का पाथ निर्दिष्ट करता है।
• `"permissions"` ऐरे में `"activeTab"` और `"scripting"` शामिल हैं, जो स्क्रिप्ट इंजेक्ट करने के लिए आवश्यक हैं।

2. एक कंटेंट स्क्रिप्ट बनाएँ (content.js)

`content.js` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

document.body.style.backgroundColor = 'lightblue';

3. एक सर्विस वर्कर बनाएँ (background.js)

`background.js` नाम की एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

स्पष्टीकरण:

• कंटेंट स्क्रिप्ट बस `body` तत्व का बैकग्राउंड रंग हल्के नीले रंग में सेट करती है।
• सर्विस वर्कर क्लिक ईवेंट को सुनता है और वर्तमान टैब के भीतर एक फ़ंक्शन निष्पादित करता है, जो बैकग्राउंड रंग बदलता है।

अपने ब्राउज़र में एक्सटेंशन को पुनः लोड करें। अब, जब आप कोई भी वेब पेज खोलेंगे, तो बैकग्राउंड का रंग हल्का नीला होगा।

ब्राउज़र एक्सटेंशन को डीबग करना

ब्राउज़र एक्सटेंशन को डीबग करना विकास प्रक्रिया का एक अनिवार्य हिस्सा है। क्रोम और फ़ायरफ़ॉक्स एक्सटेंशन को डीबग करने के लिए उत्कृष्ट डेवलपर टूल प्रदान करते हैं।

क्रोम में डीबगिंग:

1. क्रोम खोलें और `chrome://extensions` पर जाएँ।
2. ऊपरी दाएँ कोने में "डेवलपर मोड" सक्षम करें।
3. अपने एक्सटेंशन के लिए "निरीक्षण दृश्य बैकग्राउंड पेज" पर क्लिक करें। यह बैकग्राउंड स्क्रिप्ट के लिए क्रोम देवटूल्स खोलेगा।
4. कंटेंट स्क्रिप्ट को डीबग करने के लिए, उस वेब पेज को खोलें जहाँ कंटेंट स्क्रिप्ट इंजेक्ट की गई है, और फिर उस पेज के लिए क्रोम देवटूल्स खोलें। आपको अपनी कंटेंट स्क्रिप्ट "स्रोत" पैनल में सूचीबद्ध दिखनी चाहिए।

फ़ायरफ़ॉक्स में डीबगिंग:

1. फ़ायरफ़ॉक्स खोलें और `about:debugging#/runtime/this-firefox` पर जाएँ।
2. सूची में अपना एक्सटेंशन खोजें और "निरीक्षण करें" पर क्लिक करें। यह एक्सटेंशन के लिए फ़ायरफ़ॉक्स डेवलपर टूल खोलेगा।
3. कंटेंट स्क्रिप्ट को डीबग करने के लिए, उस वेब पेज को खोलें जहाँ कंटेंट स्क्रिप्ट इंजेक्ट की गई है, और फिर उस पेज के लिए फ़ायरफ़ॉक्स डेवलपर टूल खोलें। आपको अपनी कंटेंट स्क्रिप्ट "डीबगर" पैनल में सूचीबद्ध दिखनी चाहिए।

सामान्य डीबगिंग तकनीकें:

• कंसोल लॉगिंग: कंसोल में संदेश प्रिंट करने के लिए `console.log()` का उपयोग करें।
• ब्रेकपॉइंट्स: निष्पादन को रोकने और वेरिएबल्स का निरीक्षण करने के लिए अपने कोड में ब्रेकपॉइंट सेट करें।
• सोर्स मैप्स: अपने कोड को उसके मूल रूप में डीबग करने के लिए सोर्स मैप्स का उपयोग करें, भले ही इसे छोटा या ट्रांसपाइल किया गया हो।
• त्रुटि हैंडलिंग: त्रुटियों को पकड़ने और लॉग करने के लिए त्रुटि हैंडलिंग लागू करें।

अपना एक्सटेंशन प्रकाशित करना

एक बार जब आप अपना एक्सटेंशन विकसित और परीक्षण कर लेते हैं, तो आप इसे क्रोम वेब स्टोर या फ़ायरफ़ॉक्स ऐड-ऑन मार्केटप्लेस पर प्रकाशित कर सकते हैं।

क्रोम वेब स्टोर पर प्रकाशित करना:

1. क्रोम वेब स्टोर पर एक डेवलपर खाता बनाएँ।
2. अपने एक्सटेंशन को एक `.zip` फ़ाइल में पैकेज करें।
3. `.zip` फ़ाइल को क्रोम वेब स्टोर पर अपलोड करें।
4. आवश्यक मेटाडेटा प्रदान करें, जैसे कि एक्सटेंशन का नाम, विवरण और स्क्रीनशॉट।
5. समीक्षा के लिए अपना एक्सटेंशन सबमिट करें।

फ़ायरफ़ॉक्स ऐड-ऑन मार्केटप्लेस पर प्रकाशित करना:

1. फ़ायरफ़ॉक्स ऐड-ऑन मार्केटप्लेस पर एक डेवलपर खाता बनाएँ।
2. अपने एक्सटेंशन को एक `.zip` फ़ाइल में पैकेज करें।
3. `.zip` फ़ाइल को फ़ायरफ़ॉक्स ऐड-ऑन मार्केटप्लेस पर अपलोड करें।
4. आवश्यक मेटाडेटा प्रदान करें, जैसे कि एक्सटेंशन का नाम, विवरण और स्क्रीनशॉट।
5. समीक्षा के लिए अपना एक्सटेंशन सबमिट करें।

प्रकाशन के लिए सर्वोत्तम अभ्यास:

• अपने एक्सटेंशन का एक स्पष्ट और संक्षिप्त विवरण लिखें।
• अपने एक्सटेंशन की विशेषताओं को प्रदर्शित करने के लिए उच्च-गुणवत्ता वाले स्क्रीनशॉट और वीडियो प्रदान करें।
• सबमिट करने से पहले अपने एक्सटेंशन का अच्छी तरह से परीक्षण करें।
• उपयोगकर्ता समीक्षाओं और प्रतिक्रिया का तुरंत जवाब दें।
• अपने एक्सटेंशन को नवीनतम ब्राउज़र संस्करणों और सुरक्षा पैच के साथ अद्यतित रखें।

सुरक्षा विचार

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

मुख्य सुरक्षा विचार:

• अनुमतियों को न्यूनतम करें: केवल उन अनुमतियों का अनुरोध करें जिनकी आपके एक्सटेंशन को वास्तव में आवश्यकता है।
• उपयोगकर्ता इनपुट को मान्य करें: क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों को रोकने के लिए सभी उपयोगकर्ता इनपुट को सैनिटाइज और मान्य करें।
• HTTPS का उपयोग करें: दूरस्थ सर्वर के साथ संवाद करने के लिए हमेशा HTTPS का उपयोग करें।
• कंटेंट सिक्योरिटी पॉलिसी (CSP): मनमाने कोड के निष्पादन को रोकने के लिए एक सख्त CSP लागू करें।
• नियमित रूप से अपने एक्सटेंशन को अपडेट करें: अपने एक्सटेंशन को नवीनतम सुरक्षा पैच के साथ अद्यतित रखें।

इन सुरक्षा दिशानिर्देशों का पालन करके, आप यह सुनिश्चित करने में मदद कर सकते हैं कि आपका ब्राउज़र एक्सटेंशन उपयोगकर्ताओं के लिए सुरक्षित है।

निष्कर्ष

मैनिफ़ेस्ट V3 और जावास्क्रिप्ट एपीआई का उपयोग करके ब्राउज़र एक्सटेंशन डेवलपमेंट ब्राउज़िंग अनुभव को अनुकूलित करने और वेब ब्राउज़रों में नई सुविधाएँ जोड़ने का एक शक्तिशाली तरीका प्रदान करता है। इस गाइड में उल्लिखित प्रमुख अवधारणाओं, एपीआई और सर्वोत्तम प्रथाओं को समझकर, आप शक्तिशाली और सुरक्षित एक्सटेंशन बना सकते हैं जो उत्पादकता बढ़ाते हैं, सुरक्षा में सुधार करते हैं, और दुनिया भर के उपयोगकर्ताओं के लिए एक बेहतर ब्राउज़िंग अनुभव प्रदान करते हैं। जैसे-जैसे वेब का विकास जारी है, ब्राउज़र एक्सटेंशन ऑनलाइन इंटरैक्शन के भविष्य को आकार देने में एक महत्वपूर्ण भूमिका निभाएंगे। मैनिफ़ेस्ट V3 और जावास्क्रिप्ट एपीआई के विशाल भंडार द्वारा प्रस्तुत अवसरों को अपनाएं ताकि नवीन और मूल्यवान एक्सटेंशन का निर्माण किया जा सके।