Một năm trước, vào tháng 5 năm 2022, chúng tôi đã thêm bảng điều khiển bên vào Chrome. Đây là một nền tảng đồng hành mới cho phép người dùng sử dụng các công cụ cùng với nội dung mà họ đang duyệt xem. Hôm nay, chúng tôi rất vui được thông báo rằng tiện ích của bạn có thể bắt đầu hiển thị nội dung trong bảng điều khiển bên, kể từ Chrome 114.
Tốt hơn cho người dùng, dễ dàng hơn cho nhà phát triển
Chúng tôi đã thấy nhiều nhà phát triển triển khai trải nghiệm dạng thanh bên cho tiện ích của họ. Đó là lý do chúng tôi rất vui mừng khi biến nó thành một tiêu chuẩn cho nền tảng. Với API Bảng điều khiển bên mới, giờ đây, bạn có thể cung cấp giao diện người dùng ổn định mở cùng với một trang mà người dùng đang truy cập. Người dùng sẽ được hưởng lợi nhờ vị trí và bố cục nhất quán giữa các phần mở rộng. Ngoài ra, khả năng hiển thị giao diện người dùng mà không cần yêu cầu quyền của máy chủ lưu trữ là một lợi ích đáng kể về quyền riêng tư cho người dùng, cùng với lợi ích bổ sung là giảm số lượng cảnh báo hiển thị cho tiện ích của bạn tại thời điểm cài đặt.
API bảng điều khiển bên giúp loại bỏ các vấn đề liên quan đến việc chèn nội dung vào một trang không đáng tin cậy. Điều này cũng làm giảm đáng kể yêu cầu duy trì khả năng tương thích trên nhiều trang web và sàng lọc thông qua các báo cáo lỗi về tình trạng gián đoạn do vô tình gây ra do tiện ích của bạn.
Người bạn đồng hành với người dùng trên web
Khi xây dựng trải nghiệm bảng điều khiển bên mới trong tiện ích của mình, bạn cần ghi nhớ một điều: bạn đang hỗ trợ người dùng hoàn thành các thao tác trên web bằng cách nào? Sau đây là một vài câu hỏi mà bạn nên cân nhắc:
- Bảng điều khiển bên giúp ích gì cho người dùng?
- Chính sách một mục đích cũng áp dụng cho bảng điều khiển bên. Hãy đảm bảo bảng điều khiển bên cung cấp chức năng liên quan trực tiếp đến phần còn lại của tiện ích và mục tiêu mà người dùng đang cố gắng đạt được.
- Có phải bảng điều khiển bên của tôi chỉ xuất hiện khi phù hợp không?
- API bảng điều khiển bên cho phép bạn chọn trang web mà người dùng của bạn sẽ nhìn thấy bảng điều khiển bên. Bằng cách này, bạn có thể tránh hiển thị thẻ không liên quan đến người dùng hoặc không liên quan đến nội dung mà người dùng đang duyệt.
- Thiết kế có nhất quán với phần mở rộng còn lại không?
- Bảng điều khiển bên phải có thiết kế bắt mắt, phù hợp với biểu trưng, màu sắc, biểu tượng và phông chữ của tiện ích cũng như trang thông tin trên Cửa hàng Play. Nhờ đó, người dùng có được trải nghiệm nhất quán và dễ nhận ra ở bất cứ đâu họ sử dụng tiện ích của bạn.
- Người dùng tìm thấy bảng điều khiển bên của tôi bằng cách nào?
- Cho người dùng mới biết cách sử dụng bảng điều khiển bên bằng cách cung cấp đầy đủ tài liệu hoặc nội dung đào tạo trong tiện ích. Việc này sẽ giúp bạn giữ chân người dùng và tránh những bài đánh giá không tốt trong trang thông tin của bạn trên Cửa hàng Play. Hãy nhớ rằng, bạn có thể bắt đầu hướng dẫn người dùng trước khi họ cài đặt tiện ích bằng cách thêm video trên YouTube cho thấy cách hoạt động của tiện ích trong trang thông tin trên Cửa hàng Play!
Chúng tôi cũng đã cập nhật Chính sách chương trình, trong đó có nội dung cập nhật đối với các phần Các phương pháp hay nhất và Nguyên tắc về chất lượng để phản ánh một số điểm cần cân nhắc này. Những thay đổi này nhấn mạnh rằng bảng điều khiển bên sẽ đóng vai trò là một người bạn đồng hành hữu ích cho trải nghiệm duyệt web của người dùng bằng cách cung cấp các chức năng bổ sung. Họ cũng làm rõ rằng bảng điều khiển bên không được có những chi tiết thừa không cần thiết.
Tổng quan về API
Để tiện ích của bạn xuất hiện trong bảng điều khiển bên, hãy yêu cầu quyền "sidePanel" trong tệp kê khai và thêm khoá "side_panel" có "default_path" trỏ đến một trang trong tiện ích của bạn:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Trên trang bảng điều khiển bên, bạn có thể tải tập lệnh và API tiện ích cuộc gọi giống như trên bất kỳ trang tiện ích nào khác. Biểu tượng cho bảng điều khiển bên sẽ được lấy từ biểu tượng của tiện ích – đừng quên đặt biểu tượng này để tinh tế hơn.
Chức năng bổ sung
Bạn có thể liên kết bảng điều khiển bên với biểu tượng hành động để có thể dễ dàng mở bảng điều khiển bên bất cứ lúc nào:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Nếu chỉ muốn bảng điều khiển bên xuất hiện trên các trang cụ thể, bạn có thể kiểm soát và ngăn bảng điều khiển bên xuất hiện ở những nơi không liên quan đến người dùng:
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 });
}
});
Tìm hiểu thêm
Chúng tôi đã xuất bản tài liệu về API bảng điều khiển bên mà bạn có thể bắt đầu đọc ngay hôm nay. Chúng tôi cũng đã thêm mẫu vào kho lưu trữ chrome-extensions-samples, đây là một nơi tuyệt vời để xem cách API này có thể được sử dụng trong thực tế.
Như đã đề cập, các trang chính sách và phương pháp hay nhất của chúng tôi cũng đã được sửa đổi để chia sẻ thêm về cách xây dựng bảng điều khiển bên mang lại trải nghiệm tốt nhất cho người dùng.
Bạn có thể theo dõi tin tức về tiện ích của Chrome bằng cách truy cập Trang Tính năng mới của chúng tôi. Nếu có thắc mắc hoặc cần trợ giúp về API Bảng điều khiển bên, bạn có thể truy cập vào Nhóm Google dành cho các tiện ích Chromium.
Ảnh chụp của Vardan Papikyan trên Unsplash