ऐक्टिव टैब में स्क्रिप्ट इंजेक्ट करना

एक्सटेंशन टूलबार आइकॉन पर क्लिक करके, मौजूदा पेज की स्टाइल को आसान बनाएं.

खास जानकारी

इस ट्यूटोरियल में एक ऐसा एक्सटेंशन बनाया गया है जो Chrome एक्सटेंशन और Chrome Web Store के दस्तावेज़ वाले पेजों की स्टाइल को आसान बनाता है, ताकि उन्हें आसानी से पढ़ा जा सके.

इस गाइड में, हम आपको ये काम करने का तरीका बताएंगे:

  • एक्सटेंशन के सेवा वर्कर को इवेंट कोऑर्डिनेटर के तौर पर इस्तेमाल करें.
  • "activeTab" अनुमति की मदद से, उपयोगकर्ता की निजता को सुरक्षित रखें.
  • जब उपयोगकर्ता एक्सटेंशन टूलबार आइकॉन पर क्लिक करता है, तब कोड चलाएं.
  • Scripting API का इस्तेमाल करके, स्टाइल शीट डालें और हटाएं.
  • कोड को लागू करने के लिए, कीबोर्ड शॉर्टकट का इस्तेमाल करें.

शुरू करने से पहले

इस गाइड में यह माना गया है कि आपके पास वेब डेवलपमेंट का बुनियादी अनुभव है. हमारा सुझाव है कि एक्सटेंशन डेवलपमेंट वर्कफ़्लो के बारे में जानने के लिए, Hello World लेख पढ़ें.

एक्सटेंशन बनाना

शुरू करने के लिए, focus-mode नाम की एक नई डायरेक्ट्री बनाएं. इसमें एक्सटेंशन की फ़ाइलें होंगी. अगर आप चाहें, तो GitHub से पूरा सोर्स कोड डाउनलोड किया जा सकता है.

पहला चरण: एक्सटेंशन का डेटा और आइकॉन जोड़ना

manifest.json नाम की फ़ाइल बनाएं और उसमें यह कोड शामिल करें.

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

इन मेनिफ़ेस्ट कुंजियों के बारे में ज़्यादा जानने के लिए, "हर टैब पर स्क्रिप्ट चलाना" ट्यूटोरियल देखें. इसमें एक्सटेंशन के metadata और आइकॉन के बारे में ज़्यादा जानकारी दी गई है.

images फ़ोल्डर बनाएं. इसके बाद, उसमें आइकॉन डाउनलोड करें.

दूसरा चरण: एक्सटेंशन को शुरू करना

एक्सटेंशन, एक्सटेंशन के सेवा वर्कअर का इस्तेमाल करके, बैकग्राउंड में ब्राउज़र इवेंट की निगरानी कर सकते हैं. सर्विस वर्कर, JavaScript के खास एनवायरमेंट होते हैं. ये इवेंट मैनेज करते हैं और ज़रूरत न होने पर बंद हो जाते हैं.

manifest.json फ़ाइल में सर्विस वर्कर को रजिस्टर करके शुरुआत करें:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

background.js नाम की फ़ाइल बनाएं और नीचे दिया गया कोड जोड़ें:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

हमारा सेवा वर्कर, सबसे पहले runtime.onInstalled() इवेंट के लिए सुनेगा. इस तरीके से, एक्सटेंशन को शुरुआती स्थिति सेट करने या इंस्टॉल होने पर कुछ टास्क पूरे करने की अनुमति मिलती है. ऐप्लिकेशन की स्थिति को सेव करने के लिए, एक्सटेंशन Storage API और IndexedDB का इस्तेमाल कर सकते हैं. हालांकि, इस मामले में हम सिर्फ़ दो स्थितियों को हैंडल कर रहे हैं. इसलिए, हम ऐक्शन के बैज के टेक्स्ट का इस्तेमाल करके यह ट्रैक करेंगे कि एक्सटेंशन 'चालू है' या 'बंद है'.

तीसरा चरण: एक्सटेंशन ऐक्शन चालू करना

एक्सटेंशन ऐक्शन, एक्सटेंशन के टूलबार आइकॉन को कंट्रोल करता है. इसलिए, जब भी उपयोगकर्ता एक्सटेंशन आइकॉन पर क्लिक करेगा, तो यह कुछ कोड चलाएगा (जैसे कि इस उदाहरण में) या कोई पॉप-अप दिखाएगा. manifest.json फ़ाइल में एक्सटेंशन ऐक्शन का एलान करने के लिए, यह कोड जोड़ें:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

उपयोगकर्ता की निजता की सुरक्षा के लिए, activeTab की अनुमति का इस्तेमाल करना

activeTab अनुमति से, एक्सटेंशन को चालू टैब पर कोड चलाने की कुछ समय के लिए अनुमति मिलती है. इससे, मौजूदा टैब की संवेदनशील प्रॉपर्टी को ऐक्सेस करने की अनुमति भी मिलती है.

यह अनुमति तब चालू होती है, जब उपयोगकर्ता एक्सटेंशन को इस्तेमाल करता है. इस मामले में, उपयोगकर्ता एक्सटेंशन ऐक्शन पर क्लिक करके, एक्सटेंशन को चालू करता है.

💡 उपयोगकर्ता के किन अन्य इंटरैक्शन से, मेरे एक्सटेंशन में activeTab की अनुमति चालू होती है?

  • कीबोर्ड शॉर्टकट का कॉम्बिनेशन दबाना.
  • कॉन्टेक्स्ट मेन्यू का कोई आइटम चुनना.
  • ऑमनीबॉक्स से मिला सुझाव स्वीकार करना.
  • एक्सटेंशन का पॉप-अप खोलना.

"activeTab" अनुमति की मदद से, उपयोगकर्ता जान-बूझकर फ़ोकस किए गए टैब पर एक्सटेंशन चलाने का विकल्प चुन सकते हैं. इससे, उपयोगकर्ता की निजता सुरक्षित रहती है. इसका एक और फ़ायदा यह है कि इससे अनुमति से जुड़ी चेतावनी नहीं मिलती.

"activeTab" अनुमति का इस्तेमाल करने के लिए, इसे मेनिफ़ेस्ट के अनुमति कलेक्शन में जोड़ें:

{
  ...
  "permissions": ["activeTab"],
  ...
}

चौथा चरण: मौजूदा टैब की स्थिति ट्रैक करना

जब उपयोगकर्ता एक्सटेंशन ऐक्शन पर क्लिक करता है, तो एक्सटेंशन यह जांच करेगा कि यूआरएल, दस्तावेज़ वाले पेज से मैच करता है या नहीं. इसके बाद, यह मौजूदा टैब की स्थिति की जांच करेगा और अगली स्थिति सेट करेगा. background.js में यह कोड जोड़ें:

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

पांचवां चरण: स्टाइल शीट जोड़ना या हटाना

अब पेज का लेआउट बदलने का समय आ गया है. focus-mode.css नाम की फ़ाइल बनाएं और इसमें यह कोड शामिल करें:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Scripting API का इस्तेमाल करके, स्टाइल शीट डालें या हटाएं. मेनिफ़ेस्ट में "scripting" अनुमति का एलान करके शुरू करें:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

आखिर में, पेज का लेआउट बदलने के लिए, background.js में यह कोड जोड़ें:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 क्या स्टाइल शीट के बजाय कोड इंजेक्ट करने के लिए, Scripting API का इस्तेमाल किया जा सकता है?

हां. JavaScript इंजेक्ट करने के लिए, scripting.executeScript() का इस्तेमाल किया जा सकता है.

ज़रूरी नहीं: कीबोर्ड शॉर्टकट असाइन करना

फ़ोकस मोड को आसानी से चालू या बंद करने के लिए, शॉर्टकट जोड़ें. मेनिफ़ेस्ट में "commands" कुंजी जोड़ें.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" कुंजी, action.onClicked() इवेंट के जैसे ही कोड चलाती है. इसलिए, किसी अतिरिक्त कोड की ज़रूरत नहीं होती.

यह जांचना कि यह काम कर रहा है या नहीं

पुष्टि करें कि आपके प्रोजेक्ट का फ़ाइल स्ट्रक्चर इस तरह का हो:

फ़ोकस मोड फ़ोल्डर का कॉन्टेंट: manifest.json, background.js, focus-mode.css, और इमेज फ़ोल्डर.

अपने एक्सटेंशन को स्थानीय तौर पर लोड करना

अनपैक किए गए एक्सटेंशन को डेवलपर मोड में लोड करने के लिए, नमस्ते दुनिया में दिया गया तरीका अपनाएं.

दस्तावेज़ वाले पेज पर एक्सटेंशन की जांच करना

सबसे पहले, इनमें से कोई पेज खोलें:

इसके बाद, एक्सटेंशन ऐक्शन पर क्लिक करें. अगर आपने कीबोर्ड शॉर्टकट सेट अप किया है, तो Ctrl + B या Cmd + B दबाकर इसकी जांच की जा सकती है.

इसे इस तरह से बदलना चाहिए:

फ़ोकस मोड का एक्सटेंशन बंद है
फ़ोकस मोड एक्सटेंशन बंद है

इस पर:

फ़ोकस मोड एक्सटेंशन चालू है
फ़ोकस मोड एक्सटेंशन चालू है

🎯 संभावित सुधार

आज जो कुछ भी सीखा है उसके आधार पर, इनमें से कोई एक काम करें:

  • सीएसएस स्टाइलशीट को बेहतर बनाएं.
  • कोई दूसरा कीबोर्ड शॉर्टकट असाइन करें.
  • अपने पसंदीदा ब्लॉग या दस्तावेज़ों की साइट का लेआउट बदलना.

कम्यूनिटी को बढ़ाते रहें.

इस ट्यूटोरियल को पूरा करने के लिए बधाई 🎉. इस सीरीज़ के अन्य ट्यूटोरियल को पूरा करके, अपनी स्किल को बेहतर बनाएं:

Extension आपको क्या सीखने को मिलेगा
किताब पढ़ने में लगने वाला समय पेजों के किसी खास सेट में, अपने-आप एलिमेंट डालने के लिए.
Tabs Manager ब्राउज़र टैब को मैनेज करने वाला पॉप-अप बनाने के लिए.

एक्सप्लोर करते रहें

हमें उम्मीद है कि आपको यह Chrome एक्सटेंशन बनाने में मज़ा आया होगा. साथ ही, आपको एक्सटेंशन डेवलप करने के बारे में सीखना जारी रखने में भी खुशी होगी. हमारा सुझाव है कि आप ये लर्निंग पाथ अपनाएं:

  • डेवलपर गाइड में, बेहतर एक्सटेंशन बनाने से जुड़े दस्तावेज़ों के दर्जनों लिंक मौजूद हैं.
  • एक्सटेंशन के पास, ओपन वेब पर उपलब्ध एपीआई के अलावा, बेहतर एपीआई का ऐक्सेस होता है. Chrome के एपीआई से जुड़ा दस्तावेज़, हर एपीआई के बारे में बताता है.