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

Anh Mac
Anh Mac

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

มุมมองแบบแยกใน Chrome
มุมมองแบบแยกใน Chrome ช่วยให้ผู้ใช้จัดการแท็บแบบเคียงข้างกันได้

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

สาธิต

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

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

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