افزونه‌های چندوظیفگی را با API جدید Tabs Split View بهبود بخشید

آن مک
Anh Mac

اوایل امسال در فوریه ۲۰۲۶، کروم ۱۴۵ قابلیت Split View بومی را معرفی کرد که به کاربران امکان مشاهده و مدیریت تب‌ها در کنار هم در یک پنجره را می‌دهد و نیاز به تکیه بر ابزارهای شخص ثالث برای مدیریت پنجره‌های جداگانه سیستم عامل را از بین می‌برد. در حالی که کاربران می‌توانند به صورت دستی از طریق کنترل‌های مرورگر، تب‌ها را از یک Split View اضافه و حذف کنند، توسعه‌دهندگان نمی‌توانستند به صورت برنامه‌نویسی شده طرح‌بندی این تب‌های جدید را در افزونه‌های کروم کنترل کنند.

نمای تقسیم‌شده در کروم.
قابلیت Split View در کروم به کاربران اجازه می‌دهد تب‌ها را در کنار هم مدیریت کنند.

ما مفتخریم که API جدید Split View را که از Chrome 155 در دسترس است، معرفی کنیم! این API جدید که با همکاری نزدیک موزیلا و سایر فروشندگان مرورگر در گروه انجمن WebExtensions توسعه یافته است، به افزونه‌ها اجازه می‌دهد تا Split Viewهای داخلی را شناسایی، ایجاد و مدیریت کنند.

نسخه آزمایشی

چگونه کار می‌کند؟

پیش از این، افزونه‌هایی که تجربه‌های پهلو به پهلو ایجاد می‌کردند، به راه‌حل‌های ناپایداری مانند تغییر اندازه چندین پنجره بومی، جاسازی صفحات در عناصر <iframe> یا استفاده از پنل‌های جانبی متکی بودند. اکنون، API جدید Split View مستقیماً با API Tabs کروم ادغام می‌شود تا قابلیت‌های مدیریت طرح‌بندی تب‌های جدید را فعال کند.

مجوزهای مانیفست

API مربوط به Split View بخشی از فضای نام 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);

محدودیت‌های عمومی

برای اینکه دو تب بتوانند به یک نمای تقسیم‌شده متصل شوند، باید شرایط زیر را داشته باشند:

  1. تب‌ها باید مجاور یکدیگر باشند (یا ایجاد شوند).
  2. تب‌ها نباید از قبل در حالت نمای تقسیم‌شده باشند.
  3. تب‌ها باید وضعیت pinned ، windowId و groupId یکسانی داشته باشند.

برعکس، وقتی دو تب از هم جدا نمی‌شوند، حالت‌های pinned ، windowId groupId یکسانی را به همراه موقعیت نسبی آنها نسبت به یکدیگر حفظ می‌کنند.

ایجاد نماهای تقسیم‌شده

دو روش وجود دارد که یک افزونه می‌تواند از طریق آنها یک نمای تقسیم‌شده جدید ایجاد کند:

  1. با استفاده از پارامتر جدید splitWithTabId در browser.tabs.create ، یک تب جدید ایجاد کنید که با یک تب موجود تقسیم شود.
  2. دو تب موجود را با متد جدید 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 دیدن کنید.

جدایی مبارک!