Nội dung mô tả
Dùng API chrome.fileBrowserHandler
để mở rộng trình duyệt tệp Chrome OS. Ví dụ: Bạn có thể sử dụng API này để cho phép người dùng tải tệp lên trang web của bạn.
Khái niệm và cách sử dụng
Trình duyệt tệp ChromeOS sẽ xuất hiện khi người dùng nhấn tổ hợp phím Alt + Shift + M hoặc kết nối với một thiết bị lưu trữ bên ngoài, chẳng hạn như thẻ SD, khoá USB, ổ đĩa ngoài hoặc máy ảnh kỹ thuật số. Ngoài việc hiển thị tệp trên thiết bị bên ngoài, trình duyệt tệp cũng có thể hiển thị các tệp mà trước đó người dùng đã lưu vào hệ thống.
Khi người dùng chọn một hoặc nhiều tệp, trình duyệt tệp sẽ thêm các nút đại diện cho các trình xử lý hợp lệ cho những tệp đó. Ví dụ: trong ảnh chụp màn hình sau đây, việc chọn một tệp có hậu tố ".png" sẽ dẫn đến nút "Lưu vào thư viện" mà người dùng có thể nhấp vào.
Quyền
fileBrowserHandler
Bạn phải khai báo quyền "fileBrowserHandler"
trong tệp kê khai tiện ích.
Phạm vi cung cấp
Bạn phải sử dụng trường "file_browser_handlers"
để đăng ký tiện ích làm trình xử lý thuộc ít nhất một loại tệp. Bạn cũng nên cung cấp biểu tượng 16 x 16 để hiển thị trên nút. Ví dụ:
{
"name": "My extension",
...
"file_browser_handlers": [
{
"id": "upload",
"default_title": "Save to Gallery", // What the button will display
"file_filters": [
"filesystem:*.jpg", // To match all files, use "filesystem:*.*"
"filesystem:*.jpeg",
"filesystem:*.png"
]
}
],
"permissions" : [
"fileBrowserHandler"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
...
}
Triển khai trình xử lý trình duyệt tệp
Để sử dụng API này, bạn phải triển khai một hàm xử lý sự kiện onExecute
của chrome.fileBrowserHandler
. Hàm của bạn sẽ được gọi mỗi khi người dùng nhấp vào nút đại diện cho trình xử lý trình duyệt tệp. Trong hàm, hãy sử dụng File System API (API Hệ thống tệp) để truy cập vào nội dung tệp. Dưới đây là ví dụ:
chrome.fileBrowserHandler.onExecute.addListener(async (id, details) => {
if (id !== 'upload') {
return; // check if you have multiple file_browser_handlers
}
for (const entry of detail.entries) {
// the FileSystemFileEntry doesn't have a Promise API, wrap in one
const file = await new Promise((resolve, reject) => {
entry.file(resolve, reject);
});
const buffer = await file.arrayBuffer();
// do something with buffer
}
});
Trình xử lý sự kiện của bạn được chuyển hai đối số:
id
- Giá trị
id
trong tệp kê khai. Nếu tiện ích của bạn triển khai nhiều trình xử lý, bạn có thể kiểm tra giá trị mã nhận dạng để xem trình xử lý nào đã được kích hoạt. details
- Đối tượng mô tả sự kiện. Bạn có thể lấy tệp hoặc các tệp mà người dùng đã chọn từ trường
entries
của đối tượng này (là một mảng các đối tượngFileSystemFileEntry
).
Loại
FileHandlerExecuteEventDetails
Tải trọng thông tin chi tiết về sự kiện cho sự kiện fileBrowserHandler.onExecute.
Thuộc tính
-
mục nhập
bất kỳ[]
Mảng gồm các thực thể Mục nhập biểu thị các tệp là mục tiêu của hành động này (được chọn trong trình duyệt tệp ChromeOS).
-
tab_id
số không bắt buộc
Mã của thẻ đã phát sinh sự kiện này. Mã thẻ là duy nhất trong một phiên trình duyệt.
Sự kiện
onExecute
chrome.fileBrowserHandler.onExecute.addListener(
callback: function,
)
Được kích hoạt khi thao tác trên hệ thống tệp được thực thi qua trình duyệt tệp ChromeOS.
Tham số
-
số gọi lại
hàm
Tham số
callback
sẽ có dạng như sau:(id: string, details: FileHandlerExecuteEventDetails) => void
-
id
string
-
chi tiết
-