ออกแบบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นด้วย Side Panel API ใหม่

Oliver Dunk

Amy Steam

เมื่อปีที่แล้วในเดือนพฤษภาคม 2022 เราได้เพิ่มแผงด้านข้างลงใน Chrome นี่คือแพลตฟอร์มคู่ใหม่ที่ช่วยให้ผู้ใช้ใช้เครื่องมือควบคู่ไปกับเนื้อหาที่กำลังเรียกดูได้ วันนี้เรายินดีที่จะประกาศว่าส่วนขยายของคุณจะเริ่มแสดงเนื้อหาในแผงด้านข้างได้ตั้งแต่ Chrome 114 เป็นต้นไป

ส่วนขยายพจนานุกรมที่แสดงคำจำกัดความของคำที่เลือก ดูโค้ดได้ในที่เก็บ chrome-extensions-samples

ดีต่อผู้ใช้ ง่ายต่อการใช้งานสำหรับนักพัฒนาแอป

เราได้เห็นนักพัฒนาแอปจำนวนมากนำประสบการณ์การใช้งานคล้ายแถบด้านข้างไปใช้ในส่วนขยายของตนแล้ว ซึ่งเป็น เหตุผลที่เรารู้สึกตื่นเต้นที่จะทำให้เป็นมาตรฐานของแพลตฟอร์ม Side Panel API ใหม่ช่วยให้คุณ สามารถนำเสนอ UI ที่คงอยู่ซึ่งจะเปิดขึ้นข้างๆ หน้าเว็บที่ผู้ใช้กำลังเข้าชม ผู้ใช้จะได้รับประโยชน์จาก การจัดวางและเลย์เอาต์ที่สอดคล้องกันระหว่างส่วนขยาย นอกจากนี้ ความสามารถในการแสดง UI โดยไม่ต้องขอสิทธิ์ของโฮสต์ยังเป็นข้อดีด้านความเป็นส่วนตัวที่สำคัญสำหรับผู้ใช้ และยังช่วยลดจำนวนคำเตือนที่แสดงสำหรับส่วนขยายของคุณในเวลาที่ติดตั้งอีกด้วย

Side Panel API ช่วยลดความยุ่งยากในการแทรกเนื้อหาลงในหน้าเว็บที่ไม่น่าเชื่อถือ นอกจากนี้ ยังช่วยลดข้อกำหนดในการรักษาความเข้ากันได้ ในเว็บไซต์ต่างๆ และการกลั่นกรองรายงานข้อบกพร่องเกี่ยวกับการหยุดชะงักโดยไม่ตั้งใจที่เกิดจากส่วนขยายของคุณได้อย่างมาก

เป็นเพื่อนร่วมทางของผู้ใช้ทั่วทั้งเว็บ

เมื่อสร้างประสบการณ์การใช้งานแผงด้านข้างใหม่เป็นส่วนหนึ่งของส่วนขยาย คุณต้องคำนึงถึงสิ่งหนึ่ง นั่นคือ คุณจะช่วยให้ผู้ใช้ทำงานต่างๆ บนเว็บให้เสร็จได้อย่างไร คำถามบางส่วนที่คุณควรพิจารณามีดังนี้

แผงด้านข้างช่วยผู้ใช้ได้อย่างไร: นโยบายวัตถุประสงค์เดียวจะมีผลกับแผงด้านข้างด้วย ตรวจสอบว่าแผงด้านข้างมีฟังก์ชันการทำงานที่เกี่ยวข้องโดยตรงกับส่วนอื่นๆ ของส่วนขยายและสิ่งที่ผู้ใช้พยายามทำ
แผงด้านข้างจะปรากฏเฉพาะเมื่อเกี่ยวข้องใช่ไหม: Side Panel API ช่วยให้คุณเลือกได้ว่าผู้ใช้จะเห็นแผงด้านข้างในเว็บไซต์ใด วิธีนี้จะช่วยให้คุณหลีกเลี่ยงการแสดงโฆษณาเมื่อไม่เกี่ยวข้องกับผู้ใช้หรือเนื้อหาที่ผู้ใช้กำลังเรียกดู
การออกแบบสอดคล้องกับส่วนอื่นๆ ของส่วนขยายไหม: แผงด้านข้างควรมีการออกแบบที่ดึงดูดสายตาซึ่งตรงกับโลโก้ สี ไอคอน และแบบอักษรของส่วนขยายและข้อมูลสินค้าใน Store ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกันและจดจำได้ไม่ว่าจะใช้ส่วนขยายของคุณที่ใดก็ตาม
ผู้ใช้จะค้นพบแผงด้านข้างของฉันได้อย่างไร: แจ้งให้ผู้ใช้ใหม่ทราบวิธีใช้แผงด้านข้างโดยจัดทำเอกสารหรือการฝึกอบรมที่เพียงพอภายในส่วนขยาย ซึ่งจะช่วยให้คุณรักษาผู้ใช้ไว้และหลีกเลี่ยงรีวิวที่ไม่ดีในข้อมูลสินค้าใน Store โปรดทราบว่าคุณสามารถเริ่มสอนผู้ใช้ก่อนที่จะติดตั้งส่วนขยายได้โดยการใส่วิดีโอ YouTube ที่แสดงวิธีการทำงานของส่วนขยายในข้อมูลสินค้าใน Store

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

ภาพรวมของ API

หากต้องการให้ส่วนขยายปรากฏในแผงด้านข้าง ให้ขอสิทธิ์ "sidePanel" ใน manifest และเพิ่มคีย์ "side_panel" ที่มี "default_path" ซึ่งชี้ไปยังหน้าเว็บภายในส่วนขยาย

manifest.json:

{
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
  ...
}

ในหน้าแผงด้านข้าง คุณสามารถโหลดสคริปต์และเรียกใช้ API ของส่วนขยายได้เช่นเดียวกับในหน้าส่วนขยายอื่นๆ ระบบจะนำไอคอนสำหรับแผงด้านข้างมาจากไอคอนของส่วนขยาย อย่าลืมตั้งค่าไอคอนดังกล่าวเพื่อเพิ่มความสวยงาม

ความสามารถเพิ่มเติม

คุณลิงก์แผงด้านข้างกับไอคอนการดำเนินการได้เพื่อให้เปิดได้ง่ายทุกเมื่อ โดยทำดังนี้

service-worker.js:

await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

หากต้องการให้แผงด้านข้างแสดงในบางหน้าเท่านั้น คุณสามารถควบคุมและป้องกันไม่ให้แผงด้านข้างปรากฏในหน้าอื่นๆ ที่ไม่เกี่ยวข้องกับผู้ใช้ได้โดยทำดังนี้

service-worker.js:

chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
  if (!tab.url) return;

  const url = new URL(tab.url);

  if (url.origin === 'https://example.com') {
    chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
  } else {
    chrome.sidePanel.setOptions({ tabId, enabled: false });
  }
});

ดูข้อมูลเพิ่มเติม

เราได้เผยแพร่เอกสารประกอบของ Side Panel API ซึ่งคุณสามารถเริ่มอ่านได้ตั้งแต่วันนี้ นอกจากนี้ เรายังเพิ่มตัวอย่างลงในที่เก็บ chrome-extensions-samples ซึ่งเป็นแหล่งข้อมูลที่ยอดเยี่ยมในการดูวิธีใช้ API ในทางปฏิบัติ

ดังที่กล่าวไปแล้ว เราได้แก้ไขหน้านโยบายและแนวทางปฏิบัติแนะนำเพื่อแชร์ข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างแผงด้านข้างที่มอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้

คุณสามารถติดตามข่าวสารเกี่ยวกับส่วนขยาย Chrome ได้โดยไปที่หน้า "มีอะไรใหม่" และหากมีคำถามหรือต้องการความช่วยเหลือเกี่ยวกับ Side Panel API โปรดไปที่กลุ่ม Google ของส่วนขยาย Chromium