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

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

खास जानकारी

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

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

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

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

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

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

शुरू करने के लिए, 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,
    });
  }
});

चरण 5: स्टाइल शीट जोड़ें या हटाएं

अब पेज का लेआउट बदलें. 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" अनुमति का एलान:

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

हो गया: Scripting API ने अनुमति की चेतावनी को ट्रिगर नहीं किया.

आखिर में, 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() इवेंट एक ही कोड चलाता है. इसलिए, कोई और कोड नहीं चलाया जा सकता कोड आवश्यक है.

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

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

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

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

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

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

• Chrome एक्सटेंशन के दस्तावेज़ में आपका स्वागत है
• 'Chrome वेब स्टोर' में पब्लिश करें
• स्क्रिप्टिंग एपीआई

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

इसे इससे जाना चाहिए:

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

इसके लिए:

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

○ पैसे चुकाकर ली जाने वाली सेवाओं को बेहतर बनाया जा सकता है

आज आपको मिली जानकारी के आधार पर, इनमें से कोई भी काम करने की कोशिश करें:

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

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

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

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

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

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

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