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

Oliver Dunk
Amy Steam

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

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

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

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

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

เพื่อนร่วมกันสำหรับผู้ใช้ทั่วทั้งเว็บ

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

แผงด้านข้างจะช่วยผู้ใช้อย่างไร
นโยบายวัตถุประสงค์เดียวจะมีผลกับแผงด้านข้างด้วย ตรวจสอบว่าแผงด้านข้างมีฟังก์ชันการทำงานที่เกี่ยวข้องโดยตรงกับส่วนขยายอื่นๆ ที่เหลือและสิ่งที่ผู้ใช้พยายามจะทำ
แผงด้านข้างของฉันจะปรากฏก็ต่อเมื่อมีความเกี่ยวข้องใช่ไหม
แผงด้านข้าง 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-เห็นด้วย ซึ่งเหมาะที่จะดูวิธีใช้งาน API จริง

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

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

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