diff --git a/functional-samples/cookbook.file_handlers/README.md b/functional-samples/cookbook.file_handlers/README.md new file mode 100644 index 00000000..79e934ee --- /dev/null +++ b/functional-samples/cookbook.file_handlers/README.md @@ -0,0 +1,24 @@ +# Cookbook - File Handling + +This sample demonstrates file handling in an extension. + +## Overview + +On ChromeOS only, extensions can use the `file_handlers` manifest key to +register as a file handler for particular file types. This behaves in a similar way to the +[equivalent key](https://developer.mozilla.org/docs/Web/Manifest/file_handlers) in web +applications. As with web applications, you use the [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API) to open and process a file. + +This extension lets you open text files and see their name and size on the opened extension page. This could be a good starting point for building an extension that displays or interacts with an opened file. + +Screenshot showing the File Handling API demo running in Chrome. + +## Running this extension + +**This API is only supported on ChromeOS**. + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Create a text file on your ChromeOS device. +4. In the Files app, select the file. +5. In the toolbar, choose "Open" and then "File Handling Demo". diff --git a/functional-samples/cookbook.file_handlers/manifest.json b/functional-samples/cookbook.file_handlers/manifest.json new file mode 100644 index 00000000..69b23fab --- /dev/null +++ b/functional-samples/cookbook.file_handlers/manifest.json @@ -0,0 +1,16 @@ +{ + "name": "File Handling Demo", + "version": "1.0", + "minimum_chrome_version": "120", + "description": "Shows how to use the file_handlers manifest key with the web platform's Launch Handler API.", + "manifest_version": 3, + "file_handlers": [ + { + "name": "TXT file", + "action": "/view-file.html", + "accept": { + "text/plain": [".txt"] + } + } + ] +} diff --git a/functional-samples/cookbook.file_handlers/screenshot.png b/functional-samples/cookbook.file_handlers/screenshot.png new file mode 100644 index 00000000..e5332a71 Binary files /dev/null and b/functional-samples/cookbook.file_handlers/screenshot.png differ diff --git a/functional-samples/cookbook.file_handlers/view-file.html b/functional-samples/cookbook.file_handlers/view-file.html new file mode 100644 index 00000000..0202aacc --- /dev/null +++ b/functional-samples/cookbook.file_handlers/view-file.html @@ -0,0 +1,29 @@ + + + + + + + + + File Handling Demo + + + + 

+  
+
diff --git a/functional-samples/cookbook.file_handlers/view-file.js b/functional-samples/cookbook.file_handlers/view-file.js
new file mode 100644
index 00000000..c60f3786
--- /dev/null
+++ b/functional-samples/cookbook.file_handlers/view-file.js
@@ -0,0 +1,43 @@
+// Copyright 2023 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const OUTPUT_ELEMENT_ID = 'data';
+
+async function consumer(launchParams) {
+  if (!launchParams.files || !launchParams.files.length) return;
+
+  // Get metadata for each file.
+  const files = await Promise.all(
+    launchParams.files.map(async (f) => {
+      const file = await f.getFile();
+
+      return {
+        name: file.name,
+        size: file.size
+      };
+    })
+  );
+
+  // Show data on DOM.
+  document.getElementById(OUTPUT_ELEMENT_ID).innerText = JSON.stringify(
+    files,
+    undefined,
+    2
+  );
+}
+
+// Register a consumer if the launchQueue API is available.
+if ('launchQueue' in window) {
+  window.launchQueue.setConsumer(consumer);
+}