Kể từ khi tiện ích của Chrome ra mắt, nền tảng này đã cho phép các nhà phát triển hiển thị chức năng tiện ích ngay trong giao diện người dùng Chrome cấp cao nhất bằng cách sử dụng thao tác. Thao tác là một nút biểu tượng có thể mở cửa sổ bật lên hoặc kích hoạt một số chức năng trong tiện ích. Trước đây, Chrome hỗ trợ 2 loại thao tác là thao tác trên trình duyệt và thao tác trên trang; Manifest V3 đã thay đổi điều này bằng cách hợp nhất chức năng của chúng trong một API chrome.action mới.
Nhật ký ngắn về các thao tác với tiện ích
Mặc dù bản thân chrome.action mới xuất hiện trong Manifest V3, nhưng chức năng cơ bản mà ứng dụng này cung cấp có từ trước
thời điểm các tiện ích có mặt ổn định vào tháng 1 năm 2010. Bản phát hành ổn định đầu tiên của nền tảng tiện ích Chrome hỗ trợ 2 loại thao tác: thao tác trên trình duyệt và thao tác trên trang.
Các thao tác trên trình duyệt cho phép các nhà phát triển tiện ích hiển thị một biểu tượng "trong thanh công cụ chính của Google Chrome, ở bên phải thanh địa chỉ" (nguồn) và giúp người dùng dễ dàng kích hoạt chức năng của tiện ích trên trang bất kỳ. Mặt khác, các hành động trên trang nhằm mục đích "đại diện cho những hành động có thể thực hiện trên trang hiện tại, nhưng không thể áp dụng cho tất cả các trang" (nguồn).
Nói cách khác, các hành động trên trình duyệt đã cung cấp cho nhà phát triển tiện ích một giao diện người dùng ổn định trên trình duyệt, trong khi các thao tác trên trang chỉ xuất hiện khi tiện ích có thể làm gì đó hữu ích trên trang hiện tại.
Cả hai loại hành động này đều không bắt buộc, vì vậy, nhà phát triển tiện ích có thể chọn không cung cấp hành động, hành động trên trang hoặc hành động trên trình duyệt (không cho phép chỉ định nhiều hành động).
Khoảng 6 năm sau, Chrome 49 đã giới thiệu mô hình giao diện người dùng mới cho các tiện ích. Để giúp người dùng biết họ có những tiện ích nào, Chrome bắt đầu hiển thị tất cả các tiện ích đang hoạt động ở bên phải thanh địa chỉ. Người dùng có thể "chèn" tiện ích vào trình đơn Chrome nếu muốn.
Để hiển thị một biểu tượng cho mỗi tiện ích, bản cập nhật này cũng mở ra 2 thay đổi quan trọng đối với cách hoạt động của tiện ích trong giao diện người dùng của Chrome. Trước tiên, tất cả tiện ích bắt đầu hiển thị biểu tượng trên thanh công cụ. Nếu tiện ích không có biểu tượng, Chrome sẽ tự động tạo một biểu tượng cho tiện ích đó. Thứ hai, các thao tác trên trang đã chuyển vào thanh công cụ cùng với các thao tác trên trình duyệt và được cung cấp một thuộc tính tương tác để phân biệt giữa trạng thái "hiển thị" và "ẩn".
Thay đổi này cho phép tiện ích hành động trên trang tiếp tục hoạt động như dự kiến, nhưng cũng làm giảm vai trò của hành động trên trang theo thời gian. Một trong những tác động của việc thiết kế lại giao diện người dùng là các thao tác trên trang đã được các thao tác của trình duyệt thêm vào một cách hiệu quả. Vì tất cả tiện ích đều xuất hiện trên thanh công cụ, nên người dùng kỳ vọng rằng việc nhấp vào biểu tượng trên thanh công cụ của tiện ích sẽ gọi tiện ích, và các thao tác trên trình duyệt trở thành hành động tương tác ngày càng quan trọng đối với các tiện ích của Chrome.
Thay đổi đối với Manifest V3
Giao diện người dùng Chrome và tiện ích tiếp tục phát triển trong những năm sau khi thiết kế lại giao diện người dùng tiện ích năm 2016, nhưng các thao tác trên trình duyệt và thao tác trên trang vẫn không thay đổi. Tức là ít nhất cho đến khi chúng tôi bắt đầu lên kế hoạch hiện đại hoá nền tảng tiện ích bằng Manifest V3.
Nhóm tiện ích đã hiểu rõ rằng các hành động trên trình duyệt và các hành động trên trang ngày càng trở nên khác biệt mà không có sự khác biệt rõ ràng. Tệ hơn nữa, sự khác biệt nhỏ về hành vi của các API này khiến nhà phát triển khó xác định nên sử dụng nền tảng nào. Chúng tôi nhận ra rằng mình có thể giải quyết những vấn đề này bằng cách kết hợp hành động trên trình duyệt và hành động trên trang thành một "hành động" duy nhất.
Nhập Action API; chrome.action trực tiếp tương tự nhất với chrome.browserAction nhưng có một số điểm khác biệt đáng chú ý.
Trước tiên, chrome.action giới thiệu một phương thức mới có tên là getUserSettings(). Phương thức này cung cấp cho các nhà phát triển tiện ích một cách để kiểm tra xem người dùng có ghim hành động của tiện ích vào thanh công cụ hay không.
let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);
"getUserSettings" có vẻ có vẻ hơi lạ đối với chức năng này so với "isđược ghim", nhưng nhật ký hành động trên Chrome cho thấy rằng giao diện người dùng của trình duyệt thay đổi nhanh hơn API tiện ích. Do đó, mục tiêu của chúng ta đối với API này là hiển thị lựa chọn ưu tiên của người dùng liên quan đến hành động trên giao diện chung nhằm giảm thiểu tình trạng rời bỏ API trong tương lai. Ngoài ra, API này cũng cho phép các nhà cung cấp trình duyệt khác hiển thị các khái niệm giao diện người dùng dành riêng cho trình duyệt trong đối tượng UserSettings mà phương thức này trả về.
Thứ hai, bạn có thể kiểm soát biểu tượng và trạng thái bật/tắt của hành động của tiện ích bằng cách sử dụng Declarative Content API (API Nội dung khai báo). Điều này rất quan trọng vì nó cho phép tiện ích phản ứng với hành vi duyệt web của người dùng mà không cần truy cập vào nội dung hay thậm chí là URL của các trang mà họ truy cập. Ví dụ: hãy xem cách một tiện ích có thể kích hoạt hành động của mình khi người dùng truy cập các trang trên example.com.
// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.example.com'},
})
],
actions: [new chrome.declarativeContent.ShowAction()]
}
]);
});
});
Mã ở trên gần giống với mã tiện ích sẽ thực hiện với thao tác trên trang. Điểm khác biệt duy nhất
là trong Manifest V3, chúng tôi đã sử dụng declarativeContent.ShowAction thay vì
declarativeContent.ShowPageAction trong Manifest V2.
Cuối cùng, trình chặn nội dung có thể sử dụng phương thức setExtensionActionOptions của API declarativeNetRequest để hiển thị số lượng yêu cầu bị tiện ích chặn đối với một thẻ nhất định. Khả năng này rất quan trọng vì cho phép trình chặn nội dung thông báo cho người dùng cuối mà không để lộ siêu dữ liệu duyệt web có khả năng mang tính nhạy cảm cho tiện ích.
Tóm tắt
Hiện đại hoá nền tảng tiện ích của Chrome là một trong những động lực chính của chúng tôi đối với Manifest V3. Trong nhiều trường hợp, điều đó có nghĩa là phải chuyển sang công nghệ mới, nhưng điều đó cũng đồng nghĩa với việc đơn giản hoá giao diện API; đó là mục tiêu của chúng tôi ở đây.
Tôi hy vọng bài đăng này đã giúp bạn hiểu rõ hơn về khía cạnh cụ thể này của nền tảng Manifest V3. Để tìm hiểu thêm về cách nhóm Chrome tiếp cận tương lai của các tiện ích trình duyệt, hãy xem các trang Tầm nhìn của nền tảng và Tổng quan về Manifest V3 trong tài liệu dành cho nhà phát triển của chúng tôi. Bạn cũng có thể thảo luận các tiện ích của Chrome với các nhà phát triển khác trên Nhóm Google chromium-extensions.