Skip to content

Commit 0aa6d71

Browse files
oliverdunkAmySteamjpmedley
authored
Add File Handling API / file_handlers sample (GoogleChrome#1024)
* Initial file_handlers demo * Fix code and update README with correct UI text * Update README with screenshot * Add minimum_chrome_version field * Apply suggestions from code review Co-authored-by: amysteamdev <[email protected]> * Apply suggestions from code review Co-authored-by: Joe Medley <[email protected]> --------- Co-authored-by: amysteamdev <[email protected]> Co-authored-by: Joe Medley <[email protected]>
1 parent 31439d3 commit 0aa6d71

File tree

5 files changed

+112
-0
lines changed

5 files changed

+112
-0
lines changed

‎functional-samples/cookbook.file_handlers/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Cookbook - File Handling
2+
3+
This sample demonstrates file handling in an extension.
4+
5+
## Overview
6+
7+
On ChromeOS only, extensions can use the `file_handlers` manifest key to
8+
register as a file handler for particular file types. This behaves in a similar way to the
9+
[equivalent key](https://developer.mozilla.org/docs/Web/Manifest/file_handlers) in web
10+
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.
11+
12+
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.
13+
14+
<img src="screenshot.png" height=300 alt="Screenshot showing the File Handling API demo running in Chrome.">
15+
16+
## Running this extension
17+
18+
**This API is only supported on ChromeOS**.
19+
20+
1. Clone this repository.
21+
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
22+
3. Create a text file on your ChromeOS device.
23+
4. In the Files app, select the file.
24+
5. In the toolbar, choose "Open" and then "File Handling Demo".

‎functional-samples/cookbook.file_handlers/manifest.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "File Handling Demo",
3+
"version": "1.0",
4+
"minimum_chrome_version": "120",
5+
"description": "Shows how to use the file_handlers manifest key with the web platform's Launch Handler API.",
6+
"manifest_version": 3,
7+
"file_handlers": [
8+
{
9+
"name": "TXT file",
10+
"action": "/view-file.html",
11+
"accept": {
12+
"text/plain": [".txt"]
13+
}
14+
}
15+
]
16+
}

‎functional-samples/cookbook.file_handlers/screenshot.png

29.9 KB
Loading

‎functional-samples/cookbook.file_handlers/view-file.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
Copyright 2023 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
17+
<!DOCTYPE html>
18+
<html lang="en">
19+
<head>
20+
<meta charset="UTF-8" />
21+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
22+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
23+
<title>File Handling Demo</title>
24+
<script defer src="view-file.js"></script>
25+
</head>
26+
<body>
27+
<pre id="data"></pre>
28+
</body>
29+
</html>

‎functional-samples/cookbook.file_handlers/view-file.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright 2023 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
const OUTPUT_ELEMENT_ID = 'data';
16+
17+
async function consumer(launchParams) {
18+
if (!launchParams.files || !launchParams.files.length) return;
19+
20+
// Get metadata for each file.
21+
const files = await Promise.all(
22+
launchParams.files.map(async (f) => {
23+
const file = await f.getFile();
24+
25+
return {
26+
name: file.name,
27+
size: file.size
28+
};
29+
})
30+
);
31+
32+
// Show data on DOM.
33+
document.getElementById(OUTPUT_ELEMENT_ID).innerText = JSON.stringify(
34+
files,
35+
undefined,
36+
2
37+
);
38+
}
39+
40+
// Register a consumer if the launchQueue API is available.
41+
if ('launchQueue' in window) {
42+
window.launchQueue.setConsumer(consumer);
43+
}

0 commit comments

Comments
 (0)