https://github.com/kunkunsh/tauri-api-adapter
Enable Tauri API for iframe and web worker
https://github.com/kunkunsh/tauri-api-adapter
api tauri
Last synced: 3 months ago
JSON representation
Enable Tauri API for iframe and web worker
- Host: GitHub
- URL: https://github.com/kunkunsh/tauri-api-adapter
- Owner: kunkunsh
- License: mit
- Created: 2024-06-21T05:19:07.000Z (12 months ago)
- Default Branch: dev
- Last Pushed: 2025-02-25T07:20:35.000Z (3 months ago)
- Last Synced: 2025-03-01T14:52:54.529Z (3 months ago)
- Topics: api, tauri
- Language: TypeScript
- Homepage: https://huakunshen.github.io/tauri-api-adapter/
- Size: 1020 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# tauri-api-adapter
[](https://github.com/HuakunShen/tauri-api-adapter/actions/workflows/docs.yml)
[](https://github.com/HuakunShen/tauri-api-adapter/actions/workflows/ci.yml)
### Documentation: https://huakunshen.github.io/tauri-api-adapter/
Regular Tauri APIs allow communication between Rust and JavaScript, so system APIs can be called from JavaScript.
This package provides a way to call Tauri APIs from iframe and web worker.
## Potential use cases:
1. Use Tauri APIs within iframe
2. Use Tauri APIs within web worker
3. Build extension with iframe and web worker
## Usage
### Server
Within Regular Webview (have access to Tauri APIs)
I call it server because it serves the API, execute the requests and return the result.
```ts
import { IframeParentIO, RPCChannel, WorkerParentIO } from 'kkrpc/browser'
import type { AllPermission } from 'tauri-api-adapter/permissions'
const permissions: AllPermission[] = [
'clipboard:read-all',
'fetch:all',
'dialog:all',
'fs:read',
'fs:write',
'notification:all',
'os:all',
'shell:execute',
'shell:open',
'updownload:download',
'updownload:upload',
'system-info:all',
'network:port',
'network:interface'
]
const serverAPI = constructServerAPIWithPermissions(permissions)
const io = new IframeParentIO(iframe.contentWindow)
const rpc = new RPCChannel(io, { expose: serverAPI })
// Or expose to worker
const worker = new Worker('worker.js')
const io = new WorkerParentIO(worker)
const rpc = new RPCChannel(io, {
expose: serverAPI
})
```
### Client
Within iframe or web worker (no access to native Tauri APIs)
I call it client because it calls the API.
```ts
import { clipboard, defaultClientAPI, network, sysInfo } from 'tauri-api-adapter/iframe'
import { clipboard, defaultClientAPI, network, sysInfo } from 'tauri-api-adapter/worker'
console.log('Clipboard Text: ', await clipboard.readText())
console.log(await sysInfo.cpuInfo())
console.log(await network.getNonEmptyInterfaces())
```
## Permission Control
Permission control is provided by the package to limit API access from iframe and web worker.
> Tauri 2 comes with a nice and strict permission control system for Tauri Plugins. However it doesn't allow dynamic permission control. Permissions for each window is hard coded during compilation.
>
> In cases where you want to dynamically load content with iframe or web worker, this library gives you the ability to control the permission of each iframe and web worker.
To limit the API access, you need to construct the API object manually.
In the main window, you can construct the API object like this:
The API constructors takes in a list of permission strings. The type can be found in the `src/permission`. You can also find the type in the documentation.
With `clipboard:read-text` set, the clipboard API in iframe and worker will only have access to the `readText`, `readHtml`, `readRtf` functions. The image reading related functions will not be available.
## Extend API
This library provides a list of predefined APIs (which I personally use in my projects).
- clipboard
- dialog
- notification
- shell
- network
- system info
- os
- file system
- event
This doesn't mean you can only use the provided APIs.
You can extend the functionalities by adding more APIs.
To add support for a new API, add a file to `src/api/server/` and `src/api/client/` (may not be necessary).
Add the API type to `src/api/client/types`.
Implement the type in server and client.
Also look at `src/iframe.ts` and `src/worker.ts` to see how the API is exposed to iframe and worker.