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

टैब मैनेजर बनाना.

खास जानकारी

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

Tabs Manager एक्सटेंशन का पॉप-अप
Tabs Manager extension

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

  • Action API का इस्तेमाल करके, एक्सटेंशन का पॉप-अप बनाना.
  • Tabs API का इस्तेमाल करके, खास टैब के लिए क्वेरी करना.
  • होस्ट की सीमित अनुमतियों के ज़रिए, उपयोगकर्ता की निजता को सुरक्षित रखना.
  • टैब पर फ़ोकस बदलना.
  • टैब को एक ही विंडो में ले जाना और उन्हें ग्रुप में शामिल करना.
  • 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"
  }
}

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

`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>

इसके बाद, पॉप-अप को स्टाइल करें. 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 API के कई तरीकों का इस्तेमाल, बिना किसी अनुमति के लिए अनुरोध किए किया जा सकता है. हालांकि, हमें टैब के title और URL का ऐक्सेस चाहिए. इन संवेदनशील प्रॉपर्टी के लिए अनुमति की ज़रूरत होती है. हम "tabs" अनुमति के लिए अनुरोध कर सकते हैं, लेकिन इससे सभी टैब की संवेदनशील प्रॉपर्टी का ऐक्सेस मिल जाएगा. हम सिर्फ़ किसी खास साइट के टैब मैनेज कर रहे हैं. इसलिए, हम होस्ट की सीमित अनुमतियों के लिए अनुरोध करेंगे.

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

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

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

`"tabs"` अनुमति और होस्ट की अनुमतियों, दोनों के नुकसान हैं."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 के किसी भी 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

टैब को ग्रुप में शामिल करना

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, popup.js, popup.css, popup.html, और images फ़ोल्डर.

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

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

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

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

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

Tabs Manager एक्सटेंशन का पॉप-अप
Tabs Manager extension popup

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

टैब मैनेजर में ग्रुप किए गए टैब
Grouped tabs using the Tabs Manager extension

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

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

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

एक्सटेंशन बनाना जारी रखें!

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

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

एक्सप्लोर करना जारी रखें

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

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