Deskripsi
Gunakan chrome.fileBrowserHandler
API untuk memperluas file browser Chrome OS. Misalnya, Anda dapat menggunakan API ini agar pengguna dapat mengupload file ke situs Anda.
Konsep dan penggunaan
File browser ChromeOS akan muncul saat pengguna menekan Alt+Shift+M atau menghubungkan perangkat penyimpanan eksternal, seperti kartu SD, kunci USB, drive eksternal, atau kamera digital. Selain menampilkan file di perangkat eksternal, file browser juga dapat menampilkan file yang sebelumnya telah disimpan pengguna ke sistem.
Saat pengguna memilih satu atau beberapa file, browser file menambahkan tombol yang mewakili pengendali yang valid untuk file tersebut. Misalnya, dalam screenshot berikut, memilih file dengan akhiran ".png" akan menghasilkan tombol "Simpan ke Galeri" yang dapat diklik pengguna.
Izin
fileBrowserHandler
Anda harus menyatakan izin "fileBrowserHandler"
dalam manifes ekstensi.
Ketersediaan
Anda harus menggunakan kolom "file_browser_handlers"
untuk mendaftarkan ekstensi sebagai pengendali setidaknya satu jenis file. Anda juga harus menyediakan ikon berukuran 16 x 16 untuk ditampilkan pada tombol tersebut. Contoh:
{
"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"
},
...
}
Mengimplementasikan pengendali browser file
Untuk menggunakan API ini, Anda harus mengimplementasikan fungsi yang menangani peristiwa onExecute
dari chrome.fileBrowserHandler
. Fungsi Anda akan dipanggil setiap kali pengguna mengklik tombol yang merepresentasikan pengendali file browser Anda. Dalam fungsi Anda, gunakan File System API untuk mendapatkan akses ke konten file. Berikut ini contohnya:
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
}
});
Pengendali peristiwa menerima dua argumen:
id
- Nilai
id
dari file manifes. Jika ekstensi Anda menerapkan beberapa pengendali, Anda dapat memeriksa nilai ID untuk melihat pengendali mana yang telah dipicu. details
- Objek yang mendeskripsikan peristiwa. Anda bisa mendapatkan file yang dipilih pengguna dari kolom
entries
objek ini, yang merupakan array objekFileSystemFileEntry
.
Jenis
FileHandlerExecuteEventDetails
Payload detail peristiwa untuk peristiwa fileBrowserHandler.onExecute.
Properti
-
entri
setiap[]
Array instance Entri yang mewakili file yang menjadi target tindakan ini (dipilih di file browser ChromeOS).
-
tab_id
nomor opsional
ID tab yang memunculkan peristiwa ini. ID tab bersifat unik dalam sesi browser.
Peristiwa
onExecute
chrome.fileBrowserHandler.onExecute.addListener(
callback: function,
)
Diaktifkan saat tindakan sistem file dijalankan dari file browser ChromeOS.
Parameter
-
callback
fungsi
Parameter
callback
terlihat seperti:(id: string, details: FileHandlerExecuteEventDetails) => void
-
id
string
-