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

โอลิเวอร์ ดังก์

Twitter GitHub หน้าแรก

Amy Steam

GitHub

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

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

ดีกว่าสำหรับผู้ใช้ และง่ายขึ้นสำหรับนักพัฒนาซอฟต์แวร์

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

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

อุปกรณ์ที่ใช้ร่วมกันกับผู้ใช้ทั่วทั้งอินเทอร์เน็ต

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

แผงด้านข้างจะช่วยผู้ใช้ได้อย่างไร

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

แผงด้านข้างของฉันจะปรากฏเฉพาะเมื่อมีความเกี่ยวข้องใช่ไหม

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 ด้วย ซึ่งเป็นที่ที่ยอดเยี่ยมสำหรับดูวิธีใช้ API ในทางปฏิบัติ

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

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

---

รูปภาพโดย Vardan Papikyan ใน Unsplash