opfs-finder 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +93 -0
- package/README.md +36 -58
- package/package.json +4 -2
package/README.ja.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# opfs-finder
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp" alt="opfs-finder logo">
|
|
5
|
+
</p>
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/opfs-finder">
|
|
8
|
+
<img
|
|
9
|
+
src="https://img.shields.io/npm/v/opfs-finder?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
|
|
10
|
+
alt="npm version"
|
|
11
|
+
/>
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://www.npmtrends.com/opfs-finder">
|
|
14
|
+
<img
|
|
15
|
+
src="https://img.shields.io/npm/dy/opfs-finder.svg?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
|
|
16
|
+
alt="downloads"
|
|
17
|
+
/>
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://github.com/tseijp/opfs-finder">
|
|
20
|
+
<img
|
|
21
|
+
src="https://img.shields.io/npm/l/opfs-finder?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
|
|
22
|
+
alt="license MIT"
|
|
23
|
+
/>
|
|
24
|
+
</a>
|
|
25
|
+
<a href="https://opfs-finder.tsei.jp/">
|
|
26
|
+
<img
|
|
27
|
+
src="https://img.shields.io/badge/docs-available-000.svg?style=for-the-badge&colorA=5EACED&colorB=E6E3E4"
|
|
28
|
+
alt="docs available"
|
|
29
|
+
/>
|
|
30
|
+
</a>
|
|
31
|
+
</p>
|
|
32
|
+
|
|
33
|
+
<p align="center">
|
|
34
|
+
<b>ブラウザに隠されたファイルを、Finder そのままに見る。</b>
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
どの web サイトも、ブラウザの中に静かにファイルを溜め込んでいます。これまでは、それを見るだけでも DevTools が必要でした。**opfs-finder** は、その隠されたストレージを、あなたがすでに使い方を知っている window で開きます — アイコン、リスト、カラム、ギャラリーの各表示、ドラッグ&ドロップ、名前の変更、タグ、検索。新しく覚えることは何もありません。ただ Finder のように感じられるだけです。
|
|
38
|
+
|
|
39
|
+
## 二つの使い方
|
|
40
|
+
|
|
41
|
+
### Chrome 拡張として
|
|
42
|
+
|
|
43
|
+
どのサイトでも、ツールバーのボタンを押すだけ。Finder が開き、そのサイトのファイルが表示されます。閲覧し、プレビューし、名前を変え、移動し、削除する — どこにいても、同じ見慣れた window です。
|
|
44
|
+
|
|
45
|
+
> [Chrome Web Store][cws] からインストールしてください。
|
|
46
|
+
|
|
47
|
+
### npm パッケージとして
|
|
48
|
+
|
|
49
|
+
あなた自身のアプリに、ファイル管理機能を一行で追加できます。ユーザーは自分のデータのための本物の Finder を手にします — 自分で作る必要はありません。
|
|
50
|
+
|
|
51
|
+
```sh
|
|
52
|
+
pnpm install opfs-finder
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
<!-- prettier-ignore -->
|
|
56
|
+
```tsx
|
|
57
|
+
import finder from 'opfs-finder'
|
|
58
|
+
|
|
59
|
+
<button onClick={finder}>
|
|
60
|
+
Manage my files
|
|
61
|
+
</button>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
これだけです。一つの import と一つの呼び出しで、あなたのアプリに Finder が宿ります。
|
|
65
|
+
|
|
66
|
+
## 手に入るもの
|
|
67
|
+
|
|
68
|
+
- **四つの表示** — アイコン、リスト、カラム、ギャラリー。まさに macOS の通りに。
|
|
69
|
+
- **すべてのファイル操作** — 開く、作成、名前の変更、複製、コピー、移動、削除。
|
|
70
|
+
- **ドラッグ&ドロップ** — ファイルを動かしたり、デスクトップから取り込んだり。
|
|
71
|
+
- **タグ、お気に入り、検索** — あなたがすでにしているやり方で、整理し、見つける。
|
|
72
|
+
- **何でもプレビュー** — 生のバイナリすら、読めるhex 表示で。
|
|
73
|
+
|
|
74
|
+
セットアップ不要。設定不要。あなたの好みを覚え、邪魔をしません。
|
|
75
|
+
|
|
76
|
+
## 対応ブラウザ
|
|
77
|
+
|
|
78
|
+
opfs-finder は、あらゆるモダンブラウザで動きます。詳しくは: [Can I use…][ciu]
|
|
79
|
+
|
|
80
|
+
| Chrome | Edge | Firefox | Safari | Opera |
|
|
81
|
+
| :----: | :--: | :-----: | :----: | :---: |
|
|
82
|
+
| 108+ | 108+ | 111+ | 16.4+ | 94+ |
|
|
83
|
+
|
|
84
|
+
## リンク
|
|
85
|
+
|
|
86
|
+
- [Chrome Web Store][cws]
|
|
87
|
+
- [npm パッケージ][npm]
|
|
88
|
+
- [ドキュメント][docs]
|
|
89
|
+
|
|
90
|
+
[cws]: https://chromewebstore.google.com/detail/opfs-finder/xxx
|
|
91
|
+
[npm]: https://www.npmjs.com/package/opfs-finder
|
|
92
|
+
[docs]: https://opfs-finder.tsei.jp/
|
|
93
|
+
[ciu]: https://caniuse.com/wf-origin-private-file-system
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# opfs-finder
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp">
|
|
4
|
+
<img width="128px" src="https://opfs-finder.tsei.jp/opfs.webp" alt="opfs-finder logo">
|
|
5
5
|
</p>
|
|
6
6
|
<p align="center">
|
|
7
7
|
<a href="https://www.npmjs.com/package/opfs-finder">
|
|
@@ -30,86 +30,64 @@
|
|
|
30
30
|
</a>
|
|
31
31
|
</p>
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
<p align="center">
|
|
34
|
+
<b>Browse your browser's hidden files — exactly like the Finder.</b>
|
|
35
|
+
</p>
|
|
34
36
|
|
|
35
|
-
opfs-finder
|
|
37
|
+
Every website quietly stores files inside your browser. Until now, you needed DevTools to even see them. **opfs-finder** opens that hidden storage in a window you already know how to use — icons, list, column, and gallery views, drag & drop, rename, tag, search. Nothing new to learn. It just feels like Finder.
|
|
36
38
|
|
|
37
|
-
|
|
38
|
-
[npm]: https://www.npmjs.com/package/opfs-finder
|
|
39
|
+
## Two ways to use it
|
|
39
40
|
|
|
40
|
-
### Chrome
|
|
41
|
+
### As a Chrome extension
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
Click the toolbar button on any site. The Finder opens, showing that site's files. Browse, preview, rename, move, and delete — wherever you are, the same familiar window.
|
|
43
44
|
|
|
44
|
-
|
|
45
|
+
> Install from the [Chrome Web Store][cws].
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
### As an npm package
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
Add file management to your own app in one line. Your users get a real Finder for their data — no need to build one yourself.
|
|
50
|
+
|
|
51
|
+
```sh
|
|
49
52
|
pnpm install opfs-finder
|
|
50
53
|
```
|
|
51
54
|
|
|
52
|
-
2. import finder function and register click event
|
|
53
|
-
|
|
54
55
|
<!-- prettier-ignore -->
|
|
55
56
|
```tsx
|
|
56
|
-
import
|
|
57
|
+
import finder from 'opfs-finder'
|
|
57
58
|
|
|
58
59
|
<button onClick={() => finder()}>
|
|
59
|
-
|
|
60
|
+
Manage my files
|
|
60
61
|
</button>
|
|
61
62
|
```
|
|
62
63
|
|
|
63
|
-
|
|
64
|
+
That's it. One import, one call, and your app has a Finder.
|
|
64
65
|
|
|
65
|
-
|
|
66
|
+
## What you get
|
|
66
67
|
|
|
67
|
-
-
|
|
68
|
-
-
|
|
69
|
-
-
|
|
70
|
-
-
|
|
71
|
-
-
|
|
68
|
+
- **Four views** — icons, list, column, and gallery, just like macOS.
|
|
69
|
+
- **Full file actions** — open, create, rename, duplicate, copy, move, delete.
|
|
70
|
+
- **Drag & drop** — move files around, or drop files in from your desktop.
|
|
71
|
+
- **Tags, favorites, search** — organize and find files the way you already do.
|
|
72
|
+
- **Preview anything** — even raw binary, shown as readable hex.
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
No setup. No config. It remembers how you like things and stays out of your way.
|
|
74
75
|
|
|
75
|
-
##
|
|
76
|
+
## Supported browsers
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
opfs-finder runs on every modern browser. More: [Can I use…][ciu]
|
|
78
79
|
|
|
79
|
-
|
|
80
|
+
| Chrome | Edge | Firefox | Safari | Opera |
|
|
81
|
+
| :----: | :--: | :-----: | :----: | :---: |
|
|
82
|
+
| 108+ | 108+ | 111+ | 16.4+ | 94+ |
|
|
80
83
|
|
|
81
|
-
|
|
84
|
+
## Links
|
|
82
85
|
|
|
83
|
-
|
|
86
|
+
- [Chrome Web Store][cws]
|
|
87
|
+
- [npm package][npm]
|
|
88
|
+
- [Documentation][docs]
|
|
84
89
|
|
|
85
|
-
[
|
|
86
|
-
[
|
|
87
|
-
[
|
|
88
|
-
[
|
|
89
|
-
[mdn5]: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryHandle/getDirectoryHandle
|
|
90
|
-
|
|
91
|
-
<!-- prettier-ignore -->
|
|
92
|
-
```tsx
|
|
93
|
-
// Get a opfs root directory
|
|
94
|
-
const root = await navigator.storage.getDirectory()
|
|
95
|
-
|
|
96
|
-
// Create a hierarchy of files and folders
|
|
97
|
-
const file = await root.getFileHandle('root file')
|
|
98
|
-
const folder = await root.getDirectoryHandle('root folder')
|
|
99
|
-
const nestedFile = await folder.getFileHandle('nested file')
|
|
100
|
-
const nestedFolder = await folder.getDirectoryHandle('nested folder')
|
|
101
|
-
|
|
102
|
-
// Access existing files and folders via their names
|
|
103
|
-
const existingFile = await root.getFileHandle('root file')
|
|
104
|
-
const existingFolder = await root.getDirectoryHandle('root folder')
|
|
105
|
-
|
|
106
|
-
// Deleting a file or folder
|
|
107
|
-
await file.remove()
|
|
108
|
-
await folder.remove({ recursive: true })
|
|
109
|
-
|
|
110
|
-
// Listing the contents of a folder
|
|
111
|
-
for await (let [name, handle] of folder) {}
|
|
112
|
-
for await (let [name, handle] of folder.entries()) {}
|
|
113
|
-
for await (let handle of folder.values()) {}
|
|
114
|
-
for await (let name of folder.keys()) {}
|
|
115
|
-
```
|
|
90
|
+
[cws]: https://chromewebstore.google.com/detail/opfs-finder/xxx
|
|
91
|
+
[npm]: https://www.npmjs.com/package/opfs-finder
|
|
92
|
+
[docs]: https://opfs-finder.tsei.jp/
|
|
93
|
+
[ciu]: https://caniuse.com/wf-origin-private-file-system
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "opfs-finder",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"author": "tseijp",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -84,11 +84,13 @@
|
|
|
84
84
|
"preview": "vite preview"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
|
+
"@material-symbols/svg-400": "^0.44.12",
|
|
87
88
|
"@types/markdown-it": "^14.1.2",
|
|
88
89
|
"markdown-it": "^14.2.0",
|
|
89
90
|
"prism-react-renderer": "2.4.1",
|
|
90
|
-
"
|
|
91
|
+
"glre": "0.54.0",
|
|
91
92
|
"tsup": "8.5.1",
|
|
93
|
+
"gsap": "3.15.0",
|
|
92
94
|
"typescript": "~6.0.3",
|
|
93
95
|
"vite": "^8.0.14"
|
|
94
96
|
}
|