chrome.fileBrowserHandler

설명

개념 및 사용

사용자가 Alt+Shift+M을 누르거나 SD 카드, USB 키, 외장 드라이브, 디지털 카메라와 같은 외부 저장소 기기를 연결하면 ChromeOS 파일 브라우저가 표시됩니다. 파일 브라우저는 외부 기기의 파일을 표시하는 것 외에도 사용자가 이전에 시스템에 저장한 파일을 표시할 수도 있습니다.

사용자가 하나 이상의 파일을 선택하면 파일 브라우저가 해당 파일의 유효한 핸들러를 나타내는 버튼을 추가합니다. 예를 들어 다음 스크린샷에서 '.png' 접미사가 있는 파일을 선택하면 사용자가 클릭할 수 있는 '갤러리에 저장' 버튼이 표시됩니다.

권한

확장 프로그램 매니페스트에서 "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 객체의 배열입니다.

chrome.fileBrowserHandler.onExecute.addListener(
  callback: function,
)