इस साल फ़रवरी 2026 में, Chrome 145 ने स्प्लिट व्यू की नेटिव सुविधा लॉन्च की थी. इसकी मदद से, उपयोगकर्ता एक ही विंडो में टैब को अगल-बगल देख और मैनेज कर सकते हैं. इससे अलग-अलग ओएस विंडो को मैनेज करने के लिए, तीसरे पक्ष के टूल पर निर्भर रहने की ज़रूरत नहीं पड़ती. उपयोगकर्ता, ब्राउज़र कंट्रोल की मदद से स्प्लिट व्यू में टैब को मैन्युअल तरीके से जोड़ और हटा सकते हैं. हालांकि, डेवलपर के पास Chrome एक्सटेंशन में इन नए टैब लेआउट को प्रोग्राम के हिसाब से कंट्रोल करने का विकल्प नहीं था.
हमें यह बताते हुए खुशी हो रही है कि नया Split View API अब उपलब्ध है. इसे Chrome 155 से इस्तेमाल किया जा सकता है! इस नए एपीआई को WebExtensions Community Group में, Mozilla और अन्य ब्राउज़र वेंडर के साथ मिलकर बनाया गया है. इसकी मदद से एक्सटेंशन, स्प्लिट व्यू का पता लगा सकते हैं, उन्हें बना सकते हैं, और मैनेज कर सकते हैं.
डेमो
यह कैसे काम करता है
पहले, एक साथ काम करने वाले एक्सटेंशन बनाने के लिए, कई तरह के मुश्किल तरीके इस्तेमाल किए जाते थे. जैसे, कई नेटिव विंडो का साइज़ बदलना, पेजों को <iframe> एलिमेंट में एम्बेड करना या साइड पैनल का इस्तेमाल करना. अब नया स्प्लिट व्यू एपीआई, Chrome के टैब एपीआई के साथ सीधे तौर पर इंटिग्रेट हो जाता है. इससे टैब के लेआउट को मैनेज करने की नई सुविधाएं मिलती हैं.
मेनिफ़ेस्ट में दी गई अनुमतियां
स्प्लिट व्यू एपीआई, browser.tabs नेमस्पेस का हिस्सा है. इसका इस्तेमाल करने के लिए, किसी अनुमति की ज़रूरत नहीं होती.
स्प्लिट व्यू की पहचान करना
हर Tab ऑब्जेक्ट में, splitViewId प्रॉपर्टी होती है.
अगर टैब को स्प्लिट व्यू में रखा गया है, तो वह अपने साथ जोड़े गए टैब के साथ यूनीक आइडेंटिफ़ायर शेयर करता है. ऐसा न होने पर, splitViewId की डिफ़ॉल्ट वैल्यू -1 होती है.
// Querying all split views in the current windows
const tabs = await browser.tabs.query({ currentWindow: true });
const splitViews = tabs.map(tab => tab.splitViewId).filter(splitViewId => splitViewId !== -1);
सामान्य शर्तें
स्प्लिट व्यू में दो टैब को शामिल करने के लिए, उन्हें ये ज़रूरी शर्तें पूरी करनी होंगी:
- टैब एक-दूसरे के बगल में होने चाहिए या बनाए जाने चाहिए.
- टैब पहले से ही स्प्लिट व्यू में नहीं होने चाहिए.
- टैब के लिए
pinned,windowId, औरgroupIdकी स्थिति एक जैसी होनी चाहिए.
इसके उलट, जब दो टैब को अलग-अलग नहीं किया जाता है, तो वे एक-दूसरे के साथ अपनी पोज़िशन के साथ-साथ pinned, windowId, groupId की स्थिति को बनाए रखते हैं.
स्प्लिट व्यू बनाना
एक्सटेंशन, स्प्लिट व्यू बनाने के लिए इन दो तरीकों का इस्तेमाल कर सकता है:
- एक नया टैब बनाएं, जो
browser.tabs.createमें मौजूदsplitWithTabIdपैरामीटर का इस्तेमाल करके, किसी मौजूदा टैब के साथ स्प्लिट हो जाएगा. - मौजूदा दो टैब को नई
browser.tabs.createSplitसुविधा के साथ जोड़ें.
उदाहरण
splitWithTabId का इस्तेमाल करके, नया टैब बनाया जा सकता है. इससे मौजूदा टैब को स्प्लिट किया जा सकता है.
await browser.tabs.create({splitWithTabId: existingTab.id});
डिफ़ॉल्ट रूप से, नया टैब मौजूदा टैब के दाईं ओर बनाया जाएगा.
मौजूदा टैब के बाईं ओर नया टैब बनाने के लिए, इंडेक्स को उस टैब के इंडेक्स के तौर पर सेट करें:
await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});
दो मौजूदा टैब को जोड़कर भी नया स्प्लिट व्यू बनाया जा सकता है.
await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);
स्प्लिट व्यू को अलग-अलग करना
स्प्लिट व्यू को दो अलग-अलग टैब में बांटने के लिए, एक्सटेंशन browser.tabs.unsplit नए तरीके का इस्तेमाल कर सकता है.
const splitViewId = browser.tabs.createSplit([tab1.id, tab2.id]);
// Unsplitting the split view into two independent tabs
await browser.tabs.unsplit(splitViewId);
ज़्यादा जानें
हमें उम्मीद है कि इस नई सुविधा से, आपके एक्सटेंशन के लिए ज़्यादा असरदार वर्कफ़्लो तैयार करने में मदद मिलेगी. स्प्लिट व्यू की सुविधा वाले एक्सटेंशन बनाने के लिए, Tabs API का दस्तावेज़ देखें. अगर आपको कोई सवाल पूछना है या Split View API के बारे में मदद चाहिए, तो Chromium एक्सटेंशन Google ग्रुप पर जाएं.
स्प्लिट करने का आनंद लें!