Thao tác với tiện ích trong Manifest V3

Kể từ khi ra mắt tiện ích của Chrome, nền tảng này đã cho phép các nhà phát triển cung cấp 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 các thao tác. Hành động là nút biểu tượng có thể mở cửa sổ bật lên hoặc kích hoạt chức năng nào đó trong tiện ích. Trước đây, Chrome hỗ trợ 2 loại hành động, hành động trên trình duyệt và hành động trên trang; Manifest V3 đã thay đổi điều này bằng cách hợp nhất trong một API chrome.action mới.

Lịch sử ngắn về các hành động với tiện ích

Mặc dù chrome.action là một tính năng mới trong Manifest V3 nhưng chức năng cơ bản mà nó cung cấp từ trước đến thời điểm tiện ích được cung cấp ổn định lần đầu tiên vào tháng 1 năm 2010. Phiên bản ổn định đầu tiên bản phát hành nền tảng tiện ích của Chrome hỗ trợ hai loại tác vụ khác nhau: trình duyệt hành độnghành động trên trang.

Các thao tác trên trình duyệt cho phép nhà phát triển tiện ích hiển thị 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à cung cấp cho người dùng một cách dễ dàng để kích hoạt chức năng tiện ích trên bất kỳ trang nào. Mặt khác, hành động trên trang được nhắm đến "thể hiện những hành động có thể thực hiện trên trang hiện tại, nhưng không áp dụng được cho tất cả các trang" (nguồn).

Một hành động trên trang (bên trái) sẽ xuất hiện trong thanh địa chỉ, cho biết tiện ích có thể thực hiện thao tác nào đó trên trang này. Một thao tác trên trình duyệt (bên phải) luôn hiển thị.

Nói cách khác, các hành động trên trình duyệt mang lại cho nhà phát triển tiện ích một nền tảng giao diện người dùng ổn định trong trình duyệt trong khi hành động 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 cung cấp cả hai hành động là Không tác vụ, tác vụ trang hoặc tác vụ của trình duyệt (không được phép chỉ định nhiều tác vụ).

Gần 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. Để trợ giúp người dùng hiểu được 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 lên bên phải thanh địa chỉ. Người dùng có thể "tràn" các tiện ích vào trình đơn Chrome nếu họ muốn.

Các biểu tượng tiện ích đã ẩn sẽ xuất hiện trong trình đơn Chrome.

Để hiển thị biểu tượng cho mỗi tiện ích, bản cập nhật này cũng dẫn đến hai 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 đều bắt đầu hiển thị các 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, hành động 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 tính năng tương tác để phân biệt giữa "chương trình" của mình và "ẩn" các trạng thái.

Thao tác tắt trang (bên trái) sẽ hiển thị hình ảnh thang màu xám trong thanh công cụ trong khi thao tác được bật (bên phải) xuất hiện với màu đầy đủ.

Thay đổi này cho phép các phần mở rộng về 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 hành động trên trang được thu nạp hiệu quả bởi các hành động của trình duyệt. Vì tất cả các tiện ích đều xuất hiện trên thanh công cụ, nên người dùng đã truy cập mong đợi rằng việc nhấp vào biểu tượng thanh công cụ của tiện ích sẽ gọi tiện ích đó và các hành động của trình duyệt trở thành một lượt tương tác ngày càng quan trọng đối với tiện ích của Chrome.

Các thay đổi đối với Manifest V3

Giao diện người dùng và tiện ích của Chrome tiếp tục phát triển trong những năm sau khi giao diện người dùng tiện ích ra mắt năm 2016 thiết kế lại, nhưng các thao tác trên trình duyệt và thao tác trên trang hầu như không thay đổi. Tức là, ít nhất cho đến chúng tôi đã bắt đầu lên kế hoạch về cách hiện đại hoá nền tảng tiện ích bằng Manifest V3.

Nhóm tiện ích đã thấy rõ rằng hành động trên trình duyệt và hành động trên trang ngày càng sự khác biệt mà không có ý nghĩa. Thậm chí, những khác biệt nhỏ về hành vi khiến nhà phát triển gặp nhiều khó khăn để xác định xem cần dùng một tuỳ chọn 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 các 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 tương tự trực tiếp nhất với chrome.browserAction, nhưng có một vài đ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 nhà phát triển tiện ích một cách để kiểm tra xem người dùng đã ghim hành động của tiện ích vào thanh công cụ.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

"getUserSettings" có vẻ là một cái tên lạ cho chức năng này so với, chẳng hạn "được ghim", nhưng lịch sử thao tác trong Chrome cho thấy giao diện người dùng của trình duyệt thay đổi nhanh hơn các API tiện ích. Do đó, mục tiêu của chúng tôi đối với API này là hiển thị các lựa chọn ưu tiên của người dùng liên quan đến hành động trên để giảm thiểu tình trạng rời bỏ API trong tương lai. Điều 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 do hàm 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 trong hành động của tiện ích bằng Khai báo Content API. Điều này rất quan trọng vì nó cho phép các tiện ích tương tác với thao tác duyệt web của người dùng mà không cần truy cập vào nội dung hoặc thậm chí cả URL của trang mà họ truy cập. Ví dụ: hãy xem cách tiện ích có thể cho phép hành động 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 những gì tiện ích sẽ thực hiện với một hành động trên trang. Chỉ Sự khác biệt là trong Manifest V3, chúng ta đã 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 setExtensionActionOptions) để hiển thị số lượng các yêu cầu bị tiện ích chặn cho một thẻ nhất định. Chức năng này rất quan trọng vì nó cho phép trình chặn nội dung để cập nhật thông tin cho người dùng cuối mà không làm lộ siêu dữ liệu duyệt web có khả năng mang tính nhạy cảm đối với tiện ích.

Tóm tắt

Việc 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 có nghĩa là 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á nền tảng API; đó là mục tiêu của chúng tôi.

Tôi hy vọng bài đăng này đã giúp làm sáng tỏ góc cụ thể này của nền tảng Manifest V3. Người nhận 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 Tầm nhìn của nền tảngTổng quan về các trang Manifest V3 trong tài liệu dành cho nhà phát triển. Bạn cũng có thể thảo luận về các tiện ích của Chrome với các nhà phát triển khác trên chromium-extensions trên Google Group.