Initial file_handlers demo

GoogleChrome · Nov 1, 2023 · 812f589 · 812f589
1 parent b25a56b
commit 812f589
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 0 deletions.
diff --git a/functional-samples/cookbook.file_handlers/README.md b/functional-samples/cookbook.file_handlers/README.md
@@ -0,0 +1,21 @@
+# Cookbook - File Handling API
+
+This sample demonstrates how to use the File Handling API 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 the same
+way as the
+[equivalent API](https://developer.chrome.com/articles/file-handling/) in web
+applications.
+
+## 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 .txt file on your ChromeOS device.
+4. In the Files app, select the file.
+5. In the toolbar, choose "Open with..." and then "File Handling API".
diff --git a/functional-samples/cookbook.file_handlers/manifest.json b/functional-samples/cookbook.file_handlers/manifest.json
@@ -0,0 +1,15 @@
+{
+  "name": "File Handling API",
+  "version": "1.0",
+  "description": "Shows how to use the file_handlers manifest key.",
+  "manifest_version": 3,
+  "file_handlers": [
+    {
+      "name": "TXT file",
+      "action": "/view-file.html",
+      "accept": {
+        "text/plain": [".txt"]
+      }
+    }
+  ]
+}
diff --git a/functional-samples/cookbook.file_handlers/view-file.html b/functional-samples/cookbook.file_handlers/view-file.html
@@ -0,0 +1,29 @@
+<!--
+ 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.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>File Handling Demo</title>
+    <script defer src="view-file.js"></script>
+  </head>
+  <body>
+    <pre id="data"></pre>
+  </body>
+</html>
diff --git a/functional-samples/cookbook.file_handlers/view-file.js 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.file();
+
+      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);
+}