เมื่อ 1 ปีก่อนในเดือนพฤษภาคม 2022 เราได้เพิ่มแผงด้านข้างลงใน Chrome นี่เป็นแพลตฟอร์มใหม่ที่ช่วยให้ผู้ใช้ใช้เครื่องมือควบคู่ไปกับเนื้อหาที่กำลังเรียกดูได้ วันนี้เรายินดีที่จะประกาศว่าส่วนขยายของคุณจะเริ่มแสดงเนื้อหาในแผงด้านข้างได้ตั้งแต่ Chrome 114 เป็นต้นไป
ดีต่อผู้ใช้และนักพัฒนาแอป
เราได้เห็นนักพัฒนาแอปจำนวนมากนำประสบการณ์การใช้งานแบบแถบด้านข้างไปใช้กับส่วนขยายแล้ว เราจึงยินดีอย่างยิ่งที่จะกำหนดให้แถบด้านข้างเป็นมาตรฐานของแพลตฟอร์ม 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 Group ของส่วนขยาย Chromium
รูปภาพโดย Vardan Papikyan ใน Unsplash