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

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

खास जानकारी

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

इस गाइड में, हम आपको बताएंगे कि ये काम कैसे किए जाते हैं:

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

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

इस गाइड में यह माना गया है कि आपके पास वेब डेवलपमेंट का बुनियादी अनुभव है. हमारा सुझाव है कि एक्सटेंशन डेवलपमेंट वर्कफ़्लो के बारे में जानने के लिए, 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"
  }
}

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

एक 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 नाम की एक फ़ाइल बनाएं और नीचे दिया गया कोड शामिल करें:

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

स्क्रिप्टिंग एपीआई का इस्तेमाल करके, स्टाइल शीट डालें या हटाएं. मेनिफ़ेस्ट में "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, फ़ोकस-mode.css, और इमेज फ़ोल्डर.

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

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

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

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

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

इसे यहां से होना चाहिए:

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

इसके लिए:

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

💡 संभावित बढ़ोतरी

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

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

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

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

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

और जगहों की सैर करना

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

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