chrome.fileBrowserHandler

설명

chrome.fileBrowserHandler API를 사용하여 Chrome OS 파일 브라우저를 확장합니다. 예를 들어 이 API를 사용하여 사용자가 웹사이트에 파일을 업로드하도록 할 수 있습니다.

개념 및 사용법

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

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

ChromeOS 파일 브라우저
ChromeOS 파일 브라우저

권한

fileBrowserHandler

확장 프로그램 매니페스트에서 "fileBrowserHandler" 권한을 선언해야 합니다.

지원 대상

ChromeOS만 해당 포그라운드 전용

"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

    모든[]

    이 작업의 타겟인 파일을 나타내는 Entry 인스턴스의 배열입니다 (ChromeOS 파일 브라우저에서 선택됨).

  • tab_id

    number 선택사항

    이 이벤트를 발생시킨 탭의 ID입니다. 탭 ID는 브라우저 세션 내에서 고유합니다.

이벤트

onExecute

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

ChromeOS 파일 브라우저에서 파일 시스템 작업이 실행되면 실행됩니다.

매개변수