說明
使用 chrome.fileBrowserHandler
API 擴充 Chrome OS 檔案瀏覽器。舉例來說,您可以使用這個 API 讓使用者將檔案上傳至您的網站。
概念和用法
當使用者按下 Alt + Shift + M 鍵或連接外部儲存裝置 (例如 SD 卡、USB 金鑰、外接硬碟或數位相機) 時,ChromeOS 檔案瀏覽器就會出現。除了在外部裝置上顯示檔案之外,檔案瀏覽器也可以顯示使用者先前儲存在系統中的檔案。
當使用者選取一或多個檔案時,檔案瀏覽器會新增按鈕,代表這些檔案的有效處理常式。舉例來說,在下方的螢幕截圖中,選取包含「.png」字尾的檔案時,系統會顯示「儲存至圖片庫」按鈕,讓使用者點選。
權限
fileBrowserHandler
您必須在擴充功能資訊清單中宣告 "fileBrowserHandler"
權限。
適用國家/地區
您必須使用 "file_browser_handlers"
欄位,將擴充功能註冊為至少一種檔案類型的處理常式。您也應該要提供要在按鈕上顯示的 16x16 圖示。例如:
{
"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"
},
...
}
實作檔案瀏覽器處理常式
如要使用這個 API,您必須實作處理 chrome.fileBrowserHandler
的 onExecute
事件的函式。每當使用者點擊代表檔案瀏覽器處理常式的按鈕時,系統就會呼叫您的函式。在函式中,使用 File System API 存取檔案內容。範例如下:
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
}
});
事件處理常式會傳送兩個引數:
id
- 資訊清單檔案中的
id
值。如果擴充功能實作了多個處理常式,您可以查看 ID 值,瞭解目前已觸發的處理常式。 details
- 用於說明事件的物件。您可以透過這個物件的
entries
欄位 (即FileSystemFileEntry
物件的陣列),取得使用者選取的一或多個檔案。
類型
FileHandlerExecuteEventDetails
fileBrowserHandler.onExecute 事件的事件詳細資料酬載。
屬性
-
entries
任何 []
項目例項陣列,代表這個動作目標的檔案 (在 ChromeOS 檔案瀏覽器中選取)。
-
tab_id
數字 選填
引發此事件的分頁 ID。分頁 ID 是瀏覽器工作階段內唯一的。
活動
onExecute
chrome.fileBrowserHandler.onExecute.addListener(
callback: function,
)
透過 ChromeOS 檔案瀏覽器執行檔案系統動作時觸發。
參數
-
回呼
功能
callback
參數如下所示:(id: string, details: FileHandlerExecuteEventDetails) => void
-
id
字串
-