centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-26 13:19:49 +07:00
Code Issues Packages Projects Releases Wiki Activity

Add File Handling API / file_handlers sample (#1024)

Browse Source 
* 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 <37001393+AmySteam@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Joe Medley <jmedley@google.com>

---------

Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>
Co-authored-by: Joe Medley <jmedley@google.com>
This commit is contained in:
Oliver Dunk
2023-11-01 19:49:32 +00:00
committed by GitHub
parent 31439d3b4e
commit 0aa6d711a0
5 changed files with 112 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
functional-samples/cookbook.file_handlers/README.md Normal file
View File

@@ -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.
<img src="screenshot.png" height=300 alt="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".

16
functional-samples/cookbook.file_handlers/manifest.json Normal file
View File

@@ -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"]
}
}
]
}

BIN
functional-samples/cookbook.file_handlers/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

29
functional-samples/cookbook.file_handlers/view-file.html Normal file
View File

@@ -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>

43
functional-samples/cookbook.file_handlers/view-file.js Normal file
View File

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