使用原生能力

扩展向渲染器提供可复用的宿主操作。capability 会安装扩展后端处理器，并授予特定范围的访问权限。本教程在最小应用中加入文件读取功能：后端授权一个目录，页面请求读取其中的文本文件。

添加文件系统扩展

在 minimal 项目的 moon.mod 中，将以下依赖加入 import { ... }：

"moonbit-community/proton_ext@0.4.0",

在 app/moon.pkg 中使用以下导入，然后执行 moon update：

import {
  "moonbitlang/async",
  "moonbit-community/proton",
  "moonbit-community/proton_ext/fs",
}

supported_targets = "native"

pkgtype(kind: "executable")

准备文件

在项目根目录创建 workspace 目录，并在其中创建 message.txt，内容为：

Hello from the filesystem.

将 app/main.mbt 替换为：

///|
async fn main {
  let html =
    #|<!doctype html>
    #|<html lang="en">
    #|<meta charset="utf-8">
    #|<title>Read a file</title>
    #|<button id="read">Read message.txt</button>
    #|<pre id="result" role="status"></pre>
    #|<script>
    #|  document.querySelector("#read").onclick = async () => {
    #|    const result = document.querySelector("#result");
    #|    try {
    #|      const reply = await window.__MoonBit__.core.invokeOp(
    #|        "ext:fs/read_file", { path: "./workspace/message.txt" }
    #|      );
    #|      result.textContent = reply.content;
    #|    } catch (error) {
    #|      result.textContent = String(error);
    #|    }
    #|  };
    #|</script>
    #|</html>
  @proton.html("Read a file", html)
  ..config(@proton.load_config())
  ..capability(
    @fs.capability([
      @fs.PermissionRoot("./workspace", ["read_file"]),
    ]),
  )
  .run_or_abort()
}

执行 proton_cli dev，点击 Read message.txt，页面应显示文件内容。这是真正的宿主文件读取，不是浏览器文件选择器。