Welcome What's new in Chrome extensions Getting started API Reference Samples

chrome.fileBrowserHandler

  • Description

    Use the chrome.fileBrowserHandler API to extend the Chrome OS file browser. For example, you can use this API to enable users to upload files to your website.

  • Permissions
    fileBrowserHandler
  • Availability
    Foreground only

The ChromeOS file browser comes up when the user either presses Alt+Shift+M or connects an external storage device, such as an SD card, USB key, external drive, or digital camera. Besides showing the files on external devices, the file browser can also display files that the user has previously saved to the system.

When the user selects one or more files, the file browser adds buttons representing the valid handlers for those files. For example, in the following screenshot, selecting a file with a ".png" suffix results in an "Save to Gallery" button that the user can click.

File browser screenshot

Manifest

You must declare the "fileBrowserHandler" permission in the extension manifest, and you must use the "file_browser_handlers" field to register the extension as a handler of at least one file type. You should also provide a 16x16 icon to be displayed on the button. For example:

{
"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"
},
...
}

Note: You can specify locale-specific strings for the value of "default_title". See Internationalization (i18n) for details.

Implementing a file browser handler

To use this API, you must implement a function that handles the onExecute event of chrome.fileBrowserHandler. Your function will be called whenever the user clicks the button that represents your file browser handler. In your function, use the File System API to get access to the file contents. Here is an example:

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
}
});

Your event handler is passed two arguments:

id
The "id" value from the manifest file. If your extension implements multiple handlers, you can check the id value to see which handler has been triggered.
details
An object describing the event. You can get the file or files that the user has selected from the entries field of this object, which is an array of FileSystemFileEntry objects.

Summary

Types

FileHandlerExecuteEventDetails

Event details payload for fileBrowserHandler.onExecute event.

Properties

  • entries

    any[]

    Array of Entry instances representing files that are targets of this action (selected in ChromeOS file browser).

  • tab_id

    number optional

    The ID of the tab that raised this event. Tab IDs are unique within a browser session.

Methods

selectFile

chrome.fileBrowserHandler.selectFile(
  selectionParams: object,
  callback?: function,
)
Promise

Prompts user to select file path under which file should be saved. When the file is selected, file access permission required to use the file (read, write and create) are granted to the caller. The file will not actually get created during the function call, so function caller must ensure its existence before using it. The function has to be invoked with a user gesture.

Parameters

  • selectionParams

    object

    Parameters that will be used while selecting the file.

    • allowedFileExtensions

      string[] optional

      List of file extensions that the selected file can have. The list is also used to specify what files to be shown in the select file dialog. Files with the listed extensions are only shown in the dialog. Extensions should not include the leading '.'. Example: ['jpg', 'png']

    • suggestedName

      string

      Suggested name for the file.

  • callback

    function optional

    The callback parameter looks like: (result: object) => void

    • result

      object

      Result of the method.

      • entry

        object optional

        Selected file entry. It will be null if a file hasn't been selected.

      • success

        boolean

        Whether the file has been selected.

Returns

  • Promise<object>

    Pending

    This only returns a Promise when the callback parameter is not specified, and with MV3+. The type inside the Promise is the same as the 1st argument to callback.

Events

onExecute

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

Fired when file system action is executed from ChromeOS file browser.

Parameters