Tài liệu ngoài màn hình trong Manifest V3

Ian Stanion
Ian Stanion

Để thay thế chức năng trong quá trình chuyển đổi từ trang nền sang worker dịch vụ tiện ích, nhà phát triển có thể sử dụng API chrome.offscreen và quyền tệp kê khai kể từ Chrome 109. Việc yêu cầu quyền này cho phép tạo tài liệu ngoài màn hình để sử dụng các API DOM mà không cần mở cửa sổ hoặc thẻ mới gây phiền toái, làm gián đoạn trải nghiệm người dùng. API chrome.offscreen hiện có trong các tiện ích Chrome.

Trong Chromium, các tiện ích Tệp kê khai V3 dựa trên worker dịch vụ, nhưng worker dịch vụ không hỗ trợ các API và cơ chế giống như các trang dựa trên tài liệu đầy đủ (bao gồm cả trang nền và trang sự kiện). Ngoài ra, việc sử dụng tập lệnh nội dung để truy cập vào API DOM trên các trang web sẽ khiến tiện ích phụ thuộc vào các chính sách bảo mật nội dung khác nhau trên từng trang. Để giải quyết vấn đề này, chúng tôi sẽ ra mắt Tài liệu ngoài màn hình để hỗ trợ các tính năng và API liên quan đến DOM bằng cách cho phép các tiện ích Tệp kê khai V3 mở tài liệu ngoài màn hình ở mức tối thiểu, có giới hạn và tương đối không được cấp quyền trong thời gian chạy thông qua một API chuyên dụng.

Thông tin về tính năng

Vì tài liệu ngoài màn hình được thiết kế riêng để xử lý các trường hợp sử dụng không được hỗ trợ trong worker dịch vụ (ví dụ: phát âm thanh), nên thời gian hoạt động của trang này và các quyền mà trang này được cấp sẽ tách biệt với thời gian hoạt động của worker dịch vụ tiện ích. Trang này sẽ có cơ chế thời gian hoạt động tương tự như các trang sự kiện trong Tệp kê khai V2, theo đó trang này sẽ bị huỷ khi ngừng thực hiện hành động. Ngoài ra, tác nhân người dùng có thể đặt thêm các hạn chế về thời gian hoạt động dành riêng cho mục đích đã chỉ định. Tài liệu ngoài màn hình được thiết kế để lấp đầy khoảng trống từ các API chỉ có thể truy cập được bằng API DOM; do đó, các API tiện ích không cần được hiển thị trực tiếp trong ngữ cảnh này. Để giảm khả năng các tiện ích sử dụng các API này làm "thay thế trang nền", chỉ API nhắn tin chrome.runtime mới được hiển thị cho tài liệu ngoài màn hình. (Nhà phát triển cũng có thể sử dụng tính năng nhắn tin trên web bằng cách xác nhận quyền sở hữu tài liệu ngoài màn hình dưới dạng Ứng dụng thông qua worker dịch vụ.) Vì một số trường hợp sử dụng (đặc biệt là việc thu thập thông tin trang web) yêu cầu quyền truy cập vào các khung trên nhiều nguồn gốc, nên chúng tôi cho phép các tài liệu này nhúng các khung trên nhiều nguồn gốc theo các quy tắc tương tự như các trang tiện ích hiện có. Trong tài liệu ngoài màn hình, các tập lệnh nội dung do tiện ích chỉ định có thể chạy trong các khung này để thu thập mọi nội dung cần thiết, giống như đối với mọi trang web thông thường.

Lý do và yêu cầu mục đích

Bạn cần nêu lý do và giải thích thêm khi tạo tài liệu ngoài màn hình. Những lý do này được liệt kê trong tài liệu tham khảo API và xử lý thời gian hoạt động của tài liệu theo nhiều cách. Ví dụ: một tài liệu được mở để phát âm thanh hiện có các quy tắc khác được áp dụng cho toàn bộ thời gian hoạt động so với một tài liệu được mở để quản lý bảng nhớ tạm. Bạn cũng có thể thêm thông tin chi tiết khác về mục đích của tài liệu ngoài màn hình trong lý do hợp lý. Đây là một chuỗi do nhà phát triển viết chứ không phải là một tham số có hiệu ứng trên tài liệu. Theo thời gian, API có thể thêm các lý do khác khi nhà phát triển chia sẻ ý kiến phản hồi và trường hợp sử dụng của họ.

Hướng tới tương lai

Để dễ dàng triển khai, phiên bản đầu tiên của API này chỉ hỗ trợ một trang cho mỗi tiện ích, mỗi hồ sơ tại một thời điểm. Trong các phiên bản sau này, chúng tôi có thể nới lỏng quy định này để hỗ trợ nhiều trang. Hiện tại, nếu tiện ích đang chạy ở chế độ phân tách với một hồ sơ ẩn danh đang hoạt động, thì cả hồ sơ thông thường và hồ sơ ẩn danh đều có thể có một tài liệu ngoài màn hình. Chúng tôi cũng dự định cung cấp chức năng DOM cho worker của tiện ích sau này. Bạn có thể "đảm bảo tương lai" cho các tiện ích của mình bằng cách ghép nối các hàm sử dụng API ngoài màn hình với một hàm được chú thích tương đương trong worker dịch vụ để hoán đổi sau này.

// Solution 1 - Service workers cannot directly interact with
// the system clipboard. To work around this, we'll create an offscreen
// document and pass the data we want to write to the clipboard.
async function addToClipboard(value) {
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: [chrome.offscreen.Reason.CLIPBOARD],
      justification: 'Write text to the clipboard.',
    });
  }


// Solution 2 – Once extension service workers can use the Clipboard API,
// replace the offscreen document based implementation with something like this
async function addToClipboardV2(value) {
  navigator.clipboard.writeText(value);
}

Ngoài ra, khi chức năng DOM và API được thêm vào worker dịch vụ, danh sách lý do tạo tài liệu sẽ được thêm vào hoặc giảm đi tuỳ thuộc vào trạng thái hiện tại của worker dịch vụ và lý do sử dụng tài liệu ngoài màn hình.

Kết luận

Tài liệu ngoài màn hình cho phép các tiện ích yêu cầu quyền truy cập vào hoạt động tương tác với DOM hoặc cửa sổ mà hiện không thể thực hiện được trong worker dịch vụ. Phương pháp này cũng cung cấp một phương pháp linh hoạt, trong đó bạn có thể thêm các trường hợp sử dụng mới và xoá các trường hợp sử dụng đã giải quyết trong tương lai. Các tiện ích nên sử dụng API tài liệu ngoài màn hình được đề xuất cho các trường hợp sử dụng cụ thể và ngữ cảnh nền chính của tiện ích phải vẫn là worker dịch vụ được chỉ định trong tệp kê khai. Tài liệu ngoài màn hình không phải là nơi lưu trữ logic tiện ích chính vì tài liệu này có quyền truy cập API hạn chế. Vòng đời của tài liệu ngoài màn hình độc lập với worker dịch vụ đã tạo tài liệu đó. Chúng tôi sẽ đề cập đến các trường hợp sử dụng và điều cần cân nhắc về thời gian hoạt động của worker trong tiện ích trong một bài đăng trên blog riêng. Lý do sử dụng tài liệu ngoài màn hình sẽ thay đổi theo thời gian khi các tính năng và API được thêm vào chính worker dịch vụ. Chúng tôi rất mong nhận được ý kiến phản hồi của nhà phát triển trong quá trình triển khai.

Ảnh chụp của Kari Shea trên Unsplash