คำอธิบาย
ใช้ chrome.fileBrowserHandler
API เพื่อขยายการใช้งานเบราว์เซอร์ไฟล์ของ Chrome OS ตัวอย่างเช่น คุณสามารถใช้ API นี้เพื่อให้ผู้ใช้สามารถอัปโหลดไฟล์ไปยังเว็บไซต์ของคุณได้
แนวคิดและการใช้งาน
โปรแกรมเรียกดูไฟล์ของ ChromeOS จะปรากฏขึ้นเมื่อผู้ใช้กด Alt+Shift+M หรือเชื่อมต่ออุปกรณ์จัดเก็บข้อมูลภายนอก เช่น การ์ด SD, คีย์ USB, ไดรฟ์ภายนอก หรือกล้องดิจิทัล นอกจากจะแสดงไฟล์ในอุปกรณ์ภายนอกแล้ว โปรแกรมเรียกดูไฟล์ยังแสดงไฟล์ที่ผู้ใช้เคยบันทึกไว้ในระบบแล้วด้วย
เมื่อผู้ใช้เลือกไฟล์อย่างน้อย 1 ไฟล์ โปรแกรมเรียกดูไฟล์จะเพิ่มปุ่มต่างๆ ที่แสดงตัวแฮนเดิลที่ถูกต้องสำหรับไฟล์เหล่านั้น ตัวอย่างเช่น ในภาพหน้าจอต่อไปนี้ การเลือกไฟล์ที่มีส่วนต่อท้าย ".png" จะทำให้เกิดปุ่ม "บันทึกลงในแกลเลอรี" ที่ผู้ใช้สามารถคลิกได้
![โปรแกรมเรียกดูไฟล์ ChromeOS](https://developer.chrome.com/static/docs/extensions/reference/api/fileBrowserHandler/images/filebrowserhandler.png?authuser=5&hl=th)
สิทธิ์
fileBrowserHandler
คุณต้องประกาศสิทธิ์ "fileBrowserHandler"
ในไฟล์ Manifest ของส่วนขยาย
ความพร้อมใช้งาน
คุณต้องใช้ฟิลด์ "file_browser_handlers"
เพื่อลงทะเบียนส่วนขยายเป็นตัวแฮนเดิลของไฟล์อย่างน้อย 1 ประเภท นอกจากนี้ คุณยังควรระบุไอคอนขนาด 16 x 16 บนปุ่มดังกล่าวด้วย เช่น
{
"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 นี้ คุณต้องใช้ฟังก์ชันที่จัดการเหตุการณ์ onExecute
ของ chrome.fileBrowserHandler
ระบบจะเรียกใช้ฟังก์ชันของคุณทุกครั้งที่ผู้ใช้คลิกปุ่มที่แสดงเครื่องจัดการโปรแกรมเรียกดูไฟล์ ในฟังก์ชัน ให้ใช้ 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
}
});
ตัวแฮนเดิลเหตุการณ์มีการส่งอาร์กิวเมนต์ 2 รายการดังนี้
id
- ค่า
id
จากไฟล์ Manifest หากส่วนขยายใช้เครื่องจัดการหลายรายการ คุณสามารถตรวจสอบค่ารหัสเพื่อดูว่ามีตัวแฮนเดิลใดถูกเรียกใช้ details
- วัตถุที่อธิบายกิจกรรม คุณสามารถดูไฟล์ที่ผู้ใช้เลือกจากช่อง
entries
ของออบเจ็กต์นี้ ซึ่งเป็นอาร์เรย์ของออบเจ็กต์FileSystemFileEntry
รายการ
ประเภท
FileHandlerExecuteEventDetails
เพย์โหลดรายละเอียดเหตุการณ์สำหรับเหตุการณ์ fileBrowserHandler.onExecute
พร็อพเพอร์ตี้
-
รายการ
ทั้งหมด[]
อาร์เรย์ของอินสแตนซ์รายการที่แสดงไฟล์ที่เป็นเป้าหมายของการดำเนินการนี้ (เลือกในโปรแกรมเรียกดูไฟล์ของ ChromeOS)
-
tab_id
ตัวเลข ไม่บังคับ
รหัสของแท็บที่ทำให้เกิดเหตุการณ์นี้ รหัสแท็บจะไม่ซ้ำกันในเซสชันของเบราว์เซอร์
กิจกรรม
onExecute
chrome.fileBrowserHandler.onExecute.addListener(
callback: function,
)
เริ่มทำงานเมื่อระบบเรียกใช้การทำงานของระบบไฟล์จากโปรแกรมเรียกดูไฟล์ ChromeOS
พารามิเตอร์
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(id: string, details: FileHandlerExecuteEventDetails) => void
-
id
string
-
รายละเอียด
-