इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

खास जानकारी

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

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

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

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

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

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

शुरू करने के लिए, 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 फ़ोल्डर बनाएं और उसमें आइकॉन डाउनलोड करें.

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

Action API, एक्सटेंशन के इस्तेमाल को कंट्रोल करता है (टूलबार आइकॉन). जब उपयोगकर्ता एक्सटेंशन कार्रवाई पर क्लिक करता है, तो यह या तो कुछ कोड चलाएगा या पॉप-अप खोलेगा, जैसा कि इस मामले में है. सबसे पहले, 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>

सलाह: स्क्रिप्ट टैग में type="module" जोड़कर, टॉप लेवल इंतज़ार का इस्तेमाल किया जा सकता है.

इसके बाद, आपको पॉप-अप को स्टाइल देना होगा. 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.

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

सबसे पहले, एक्सटेंशन टैब के नामों (शामिल किए गए एचटीएमएल पेजों के टाइटल) को वर्णमाला के क्रम में क्रम से लगाएगा. इसके बाद, जब सूची में मौजूद किसी आइटम पर क्लिक किया जाता है, तो 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

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

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

TabGroups एपीआई की मदद से एक्सटेंशन, ग्रुप को नाम दे सकता है और बैकग्राउंड का रंग चुन सकता है. हाइलाइट किया गया कोड जोड़कर, मेनिफ़ेस्ट में "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, पॉप-अप.js, पॉप-अप.css, पॉप-अप.html, और इमेज फ़ोल्डर.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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