chrome.fileBrowserHandler

คำอธิบาย

ใช้ chrome.fileBrowserHandler API เพื่อขยายการใช้งานเบราว์เซอร์ไฟล์ของ Chrome OS ตัวอย่างเช่น คุณสามารถใช้ API นี้เพื่อให้ผู้ใช้สามารถอัปโหลดไฟล์ไปยังเว็บไซต์ของคุณได้

แนวคิดและการใช้งาน

โปรแกรมเรียกดูไฟล์ของ ChromeOS จะปรากฏขึ้นเมื่อผู้ใช้กด Alt+Shift+M หรือเชื่อมต่ออุปกรณ์จัดเก็บข้อมูลภายนอก เช่น การ์ด SD, คีย์ USB, ไดรฟ์ภายนอก หรือกล้องดิจิทัล นอกจากจะแสดงไฟล์ในอุปกรณ์ภายนอกแล้ว โปรแกรมเรียกดูไฟล์ยังแสดงไฟล์ที่ผู้ใช้เคยบันทึกไว้ในระบบแล้วด้วย

เมื่อผู้ใช้เลือกไฟล์อย่างน้อย 1 ไฟล์ โปรแกรมเรียกดูไฟล์จะเพิ่มปุ่มต่างๆ ที่แสดงตัวแฮนเดิลที่ถูกต้องสำหรับไฟล์เหล่านั้น ตัวอย่างเช่น ในภาพหน้าจอต่อไปนี้ การเลือกไฟล์ที่มีส่วนต่อท้าย ".png" จะทำให้เกิดปุ่ม "บันทึกลงในแกลเลอรี" ที่ผู้ใช้สามารถคลิกได้

โปรแกรมเรียกดูไฟล์ ChromeOS
โปรแกรมเรียกดูไฟล์ ChromeOS

สิทธิ์

fileBrowserHandler

คุณต้องประกาศสิทธิ์ "fileBrowserHandler" ในไฟล์ Manifest ของส่วนขยาย

ความพร้อมใช้งาน

ChromeOS เท่านั้น ที่ทำงานอยู่เบื้องหน้าเท่านั้น

คุณต้องใช้ฟิลด์ "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

พารามิเตอร์