टैब मैनेज करें

अपना पहला टैब मैनेजर बनाएं.

खास जानकारी

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

टैब मैनेजर एक्सटेंशन का पॉप-अप
टैब मैनेजर एक्सटेंशन

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

  • Action API का इस्तेमाल करके, एक्सटेंशन का पॉप-अप बनाएं.
  • Tabs API का इस्तेमाल करके, खास टैब के लिए क्वेरी करें.
  • होस्ट की सीमित अनुमतियों की मदद से, उपयोगकर्ता की निजता बनाए रखें.
  • टैब का फ़ोकस बदलना.
  • टैब को एक ही विंडो में ले जाएं और उन्हें ग्रुप में बांटें.
  • TabGroups एपीआई का इस्तेमाल करके, टैब ग्रुप के नाम बदलें.

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

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

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

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

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

manifest.json नाम की एक फ़ाइल बनाएं और यह कोड जोड़ें:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "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 फ़ोल्डर बनाएं. इसके बाद, उसमें आइकॉन डाउनलोड करें.

दूसरा चरण: पॉप-अप बनाएं और उसकी स्टाइल बदलें

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

{
  "action": {
    "default_popup": "popup.html"
  }
}

पॉप-अप, किसी वेब पेज की तरह होता है. इसमें एक अपवाद है: यह इनलाइन JavaScript नहीं चला सकता. popup.html फ़ाइल बनाएं और यह कोड जोड़ें:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

इसके बाद, आप पॉप-अप की स्टाइल करेंगे. popup.css फ़ाइल बनाएं और यह कोड जोड़ें:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

तीसरा चरण: टैब मैनेज करना

Tabs API का इस्तेमाल करके, एक्सटेंशन को ब्राउज़र खोलें.

अनुमति के लिए अनुरोध करना

Tabs एपीआई में कई तरीकों का इस्तेमाल, बिना किसी अनुमति के किया जा सकता है. हालांकि, हमें टैब के title और URL का ऐक्सेस चाहिए; इन संवेदनशील प्रॉपर्टी के लिए अनुमति की ज़रूरत होती है. हम "tabs" को ऐक्सेस करने की अनुमति मांग सकते हैं. हालांकि, इससे सभी टैब की संवेदनशील प्रॉपर्टी का ऐक्सेस मिल जाएगा. हम सिर्फ़ किसी खास साइट के टैब मैनेज कर रहे हैं. इसलिए, हम होस्ट की सीमित अनुमतियों का अनुरोध करेंगे.

होस्ट की अनुमतियों को सीमित करें. इससे हम कुछ खास साइटों को खास अनुमति देकर, उपयोगकर्ता की निजता को सुरक्षित रख पाते हैं. ऐसा करने से, title और URL प्रॉपर्टी का ऐक्सेस मिलेगा. साथ ही, कुछ अन्य सुविधाएं भी मिलेंगी. manifest.json फ़ाइल में हाइलाइट किए गए कोड को जोड़ें:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 टैब की अनुमतियों और होस्ट की अनुमतियों में मुख्य अंतर क्या हैं?

"tabs" अनुमति और होस्ट करने की अनुमतियों में कुछ कमियां हैं.

"tabs" की अनुमति से, एक्सटेंशन को सभी टैब पर संवेदनशील जानकारी पढ़ने की सुविधा मिलती है. समय के साथ, इस जानकारी का इस्तेमाल उपयोगकर्ता के ब्राउज़िंग इतिहास को इकट्ठा करने के लिए किया जा सकता है. इसलिए, अगर इस अनुमति का अनुरोध किया जाता है, तो इंस्टॉल के समय Chrome, चेतावनी का यह मैसेज दिखाएगा:

टैब की अनुमति से जुड़ी चेतावनी का डायलॉग बॉक्स

होस्ट की अनुमतियों की मदद से, किसी एक्सटेंशन को मिलते-जुलते टैब की संवेदनशील प्रॉपर्टी को पढ़ने और उसके बारे में क्वेरी करने की अनुमति मिलती है. साथ ही, इन टैब पर स्क्रिप्ट इंजेक्ट करने की सुविधा भी मिलती है. ऐप्लिकेशन इंस्टॉल करते समय, उपयोगकर्ताओं को चेतावनी वाला यह मैसेज दिखेगा:

होस्ट की अनुमति से जुड़ी चेतावनी का डायलॉग बॉक्स

ये चेतावनी उपयोगकर्ताओं के लिए खतरनाक हो सकती है. शामिल होने का बेहतर अनुभव पाने के लिए, हमारा सुझाव है कि आप वैकल्पिक अनुमतियां लागू करें.

टैब पर क्वेरी करें

tabs.query() तरीके का इस्तेमाल करके, अलग-अलग यूआरएल से टैब वापस लाए जा सकते हैं. popup.js बनाएं फ़ाइल और यह कोड जोड़ें:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 क्या पॉप-अप में सीधे तौर पर Chrome API का इस्तेमाल किया जा सकता है?

पॉप-अप और अन्य एक्सटेंशन पेज किसी भी Chrome API को कॉल कर सकते हैं, क्योंकि उन्हें Chrome स्कीमा के बारे में ज़्यादा जानें. उदाहरण के लिए, chrome-extension://EXTENSION_ID/popup.html.

टैब पर फ़ोकस करें

सबसे पहले, एक्सटेंशन टैब के नामों (शामिल HTML पेजों के शीर्षक) को वर्णमाला के क्रम में व्यवस्थित करेगा. इसके बाद, जब किसी सूची आइटम पर क्लिक किया जाएगा, तो वह tabs.update() की मदद से उस टैब पर फ़ोकस करें और windows.update() का इस्तेमाल करके विंडो को सामने लाएं. popup.js फ़ाइल में यह कोड जोड़ें:

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 इस कोड में इस्तेमाल किया गया दिलचस्प JavaScript

  • Collator का इस्तेमाल, टैब के कलेक्शन को उपयोगकर्ता की पसंदीदा भाषा के हिसाब से क्रम में लगाने के लिए किया जाता है.
  • वह टेंप्लेट टैग जिसका इस्तेमाल करके HTML एलिमेंट को परिभाषित करें, जिसे प्रत्येक आइटम बनाने के लिए document.createElement() का उपयोग करने के बजाय क्लोन किया जा सकता है.
  • यूआरएल बनाने और पार्स करने के लिए इस्तेमाल किया जाने वाला यूआरएल कंस्ट्रक्टर.
  • स्प्रेड सिंटैक्स का इस्तेमाल, append() कॉल में एलिमेंट के सेट को आर्ग्युमेंट में बदलने के लिए किया जाता है.

टैब को ग्रुप में बांटें

TabGroups API, एक्सटेंशन को ग्रुप को नाम देने और कोई बैकग्राउंड चुनने की अनुमति देता है रंग. हाइलाइट किया गया कोड जोड़कर, मेनिफ़ेस्ट में "tabGroups" की अनुमति जोड़ें:

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js में, इस कोड को जोड़कर ऐसा बटन बनाएं जो tabs.group() का इस्तेमाल करके सभी टैब को ग्रुप में कर देगा और उन्हें वर्तमान विंडो में ले जा सकते हैं.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

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

पुष्टि करें कि आपके प्रोजेक्ट की फ़ाइल का स्ट्रक्चर, नीचे दिए गए डायरेक्ट्री ट्री से मेल खाता हो:

टैब मैनेजर फ़ोल्डर का कॉन्टेंट: Manifest.json, pop.js, pop.css, लागत.html, और images फ़ोल्डर.

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

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

दस्तावेज़ों के कुछ पेज खोलें

इन दस्तावेज़ों को अलग-अलग विंडो में खोलें:

पॉप-अप पर क्लिक करें. यह कुछ ऐसा दिखना चाहिए:

टैब मैनेजर एक्सटेंशन का पॉप-अप
टैब मैनेजर एक्सटेंशन का पॉप-अप

"टैब ग्रुप करें" पर क्लिक करें बटन. यह कुछ ऐसा दिखना चाहिए:

टैब मैनेजर में ग्रुप किए गए टैब
टैब मैनेजर के एक्सटेंशन का इस्तेमाल करके, ग्रुप में शामिल किए गए टैब

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

आज आपको मिली जानकारी के आधार पर, इनमें से किसी एक को लागू करें:

  • पॉप-अप स्टाइल शीट को पसंद के मुताबिक बनाएं.
  • टैब ग्रुप का रंग और टाइटल बदलें.
  • किसी अन्य दस्तावेज़ साइट के टैब प्रबंधित करें.
  • ग्रुप किए गए टैब को ग्रुप से बाहर करने के लिए सहायता जोड़ें.

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

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

Extension आपको क्या सीखने को मिलेगा
पढ़ने में लगने वाला समय हर पेज पर अपने-आप एलिमेंट शामिल करने के लिए.
फ़ोकस मोड एक्सटेंशन कार्रवाई पर क्लिक करने के बाद मौजूदा पेज पर कोड चलाने के लिए.

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

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

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