เพิ่มประสิทธิภาพส่วนขยายการทำงานแบบมัลติทาสก์ด้วย Tabs Split View API ใหม่

Anh Mac Software Engineer

เมื่อช่วงต้นปีนี้ในเดือนกุมภาพันธ์ 2026 Chrome 145 ได้เปิดตัว การแยกหน้าจอแบบเนทีฟ ซึ่งช่วยให้ผู้ใช้ดูและจัดการแท็บแบบคู่ขนาน ภายในหน้าต่างเดียวกันได้ จึงไม่จำเป็นต้องพึ่งพาเครื่องมือของบุคคลที่สามเพื่อจัดการ หน้าต่าง OS แยกต่างหาก แม้ว่าผู้ใช้จะเพิ่มและนำแท็บออกจากมุมมองแยกด้วยตนเองผ่านตัวควบคุมเบราว์เซอร์ได้ แต่เดิมนักพัฒนาซอฟต์แวร์ไม่สามารถควบคุมเลย์เอาต์แท็บใหม่เหล่านี้ในส่วนขยาย Chrome ได้โดยอัตโนมัติ

เรายินดีที่จะประกาศเปิดตัว Split View API ใหม่ ซึ่งจะพร้อมใช้งานตั้งแต่ Chrome 155 เป็นต้นไป API ใหม่นี้ได้รับการพัฒนาโดยความร่วมมืออย่างใกล้ชิดกับ Mozilla และผู้ให้บริการเบราว์เซอร์รายอื่นๆ ในกลุ่มชุมชน WebExtensions ซึ่งช่วยให้ส่วนขยายตรวจหา สร้าง และจัดการมุมมองแบบแยกในตัวได้

สาธิต

วิธีการทำงาน

ก่อนหน้านี้ ส่วนขยายที่สร้างประสบการณ์การใช้งานแบบคู่ต้องอาศัยวิธีแก้ปัญหาที่ซับซ้อน เช่น การปรับขนาดหน้าต่างดั้งเดิมหลายหน้า การฝังหน้าเว็บในองค์ประกอบ <iframe> หรือการใช้แผงด้านข้าง ตอนนี้ API มุมมองแยกใหม่ผสานรวมโดยตรง กับ API แท็บ ของ Chrome เพื่อปลดล็อก ความสามารถในการจัดการเลย์เอาต์แท็บใหม่

สิทธิ์ในไฟล์ Manifest

Split View API เป็นส่วนหนึ่งของเนมสเปซ 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);

ข้อจำกัดทั่วไป

แท็บ 2 แท็บต้องมีคุณสมบัติตรงตาม ข้อกำหนดต่อไปนี้จึงจะเข้าร่วมมุมมองแบบแยกได้

1. แท็บต้องอยู่ติดกัน (หรือสร้างให้ติดกัน)
2. แท็บต้องไม่อยู่ในมุมมองแบบแยกอยู่แล้ว
3. แท็บต้องมีสถานะ pinned, windowId และ groupId เหมือนกัน

ในทางกลับกัน เมื่อรวม 2 แท็บเข้าด้วยกัน แท็บเหล่านั้นจะยังคงมีสถานะ pinned, windowId, groupId เหมือนเดิม รวมถึงตำแหน่งที่สัมพันธ์กันของแต่ละแท็บ

การสร้างมุมมองแบบแยก

ส่วนขยายสร้างมุมมองแบบแยกใหม่ได้ 2 วิธีดังนี้

1. สร้างแท็บใหม่ที่จะแยกกับแท็บที่มีอยู่โดยใช้พารามิเตอร์ splitWithTabId ใหม่ใน browser.tabs.create
2. จับคู่ 2 แท็บที่มีอยู่ด้วยbrowser.tabs.createSplitวิธีใหม่

ตัวอย่าง

คุณสร้างแท็บใหม่ได้โดยใช้ splitWithTabId เพื่อแยกกับแท็บที่มีอยู่

await browser.tabs.create({splitWithTabId: existingTab.id});

โดยค่าเริ่มต้น ระบบจะสร้างแท็บใหม่ทางขวาของแท็บที่มีอยู่

หากต้องการสร้างแท็บใหม่ทางซ้ายของแท็บที่มีอยู่ ให้ตั้งค่าดัชนีเป็นดัชนีของแท็บนั้น

  await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});

นอกจากนี้ คุณยังสร้างมุมมองแบบแยกใหม่ได้ด้วยการจับคู่ 2 แท็บที่มีอยู่

  await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);

ยกเลิกการแยกมุมมอง

หากต้องการแยกมุมมองแบบแยกออกเป็น 2 แท็บอิสระ ส่วนขยายสามารถใช้วิธี ใหม่ 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 Group

ขอให้สนุกกับการแยก