Bun.WebView 是内置在运行时中的无头浏览器。使用它来加载页面、在其中运行 JavaScript、模拟真实用户输入,并截取屏幕截图 — 不需要 Puppeteer、Playwright,也不需要单独下载浏览器。
Bun.WebView 使用系统的 WKWebView — 无需安装任何东西。在 Linux 和 Windows 上,它会通过 Chrome DevTools Protocol 驱动已安装的 Chrome、Chromium、Edge 或 Brave;在 Windows 上,预装的 Edge 就足够了。
每个视图都会在单独的渲染器进程中运行其页面。所有输入方法(click、type、press、scroll)都会分发原生浏览器事件,因此页面会看到 isTrusted: true — 与真实用户一致。
创建视图
await 的第一个操作(例如 navigate() 或 evaluate())会等待浏览器准备就绪。
如果传入 url,视图会在构造函数返回前开始导航,效果与在下一行调用 view.navigate(url) 相同。不同之处在于:构造函数会将导航的 promise 保留在内部,因此失败时不会产生拒绝。设置 onNavigationFailed 以便观察导航失败。
使用 using 的自动清理
Bun.WebView 实现了 Symbol.dispose 和 Symbol.asyncDispose,因此你可以使用 using 或 await using,当视图超出作用域时自动关闭:
持久化存储
默认情况下,每个视图使用短暂的内存存储 — cookies、localStorage、IndexedDB 和缓存都会在视图关闭时丢弃。要在多次运行之间持久化状态,请传入目录:
directory 的视图会共享 cookies 和存储。传入 dataStore: "ephemeral"(默认值)以显式回到内存存储。
使用 Chrome 后端时,
dataStore.directory 会映射到 --user-data-dir,并应用于整个 Chrome 进程,而非每个视图。Bun 每个进程只生成一次 Chrome,因此第一个视图的目录会被后续所有视图使用。使用 WebKit 后端时,持久化存储需要 macOS 15.2+。在旧版本的 macOS 上,请使用
dataStore: "ephemeral"(默认值)。后端
Bun.WebView 支持两种渲染引擎。默认取决于你的平台:
在 macOS 上,默认后端是
"webkit";其他平台默认使用 "chrome"。在非 macOS 平台请求 backend: "webkit" 会抛出异常。"chrome" 后端每个进程驱动一个浏览器,且只能从主线程使用;在 Worker 中构造它会抛出异常。
WebKit 后端如何工作
Bun 会生成一个轻量级宿主子进程(即bun 二进制文件本身,以特殊模式重新运行),由它在主线程上管理 WKWebView。你的 Bun 进程通过 Unix socket 使用紧凑的二进制协议与其通信。Bun 只生成一次宿主进程,你的程序中的每个 "webkit" 视图都会共用它。
Chrome 后端如何工作
Bun 要么连接到一个已经运行的 Chrome(通过 WebSocket),要么生成一个无头 Chrome 子进程,并通过管道与它通信(--remote-debugging-pipe)。无论哪种方式,通信都使用 Chrome DevTools Protocol。
Bun 每个进程只生成(或连接)一次 Chrome。每个 new Bun.WebView({ backend: "chrome" }) 都会在该 Chrome 实例中使用 Target.createTarget 创建一个新标签页。
查找 Chrome 可执行文件
当 Bun 需要生成 Chrome 时,它会按以下顺序搜索:- 你在
backend: { type: "chrome", path: "..." }中传入的path BUN_CHROME_PATH环境变量$PATH(google-chrome-stable、google-chrome、chromium-browser、chromium、brave-browser、microsoft-edge、chrome;在 Windows 上为chrome、chromium、brave、msedge)- 标准安装位置(
/Applications/Google Chrome.app、~/Applications/...、/usr/bin/...、/snap/bin/...;在 Windows 上为%ProgramFiles%、%ProgramFiles(x86)%和%LOCALAPPDATA%下的Application\*.exe目录) - Playwright 的缓存(
~/Library/Caches/ms-playwright、~/.cache/ms-playwright或%LOCALAPPDATA%\ms-playwright)中的chrome-headless-shell
Microsoft Edge 无法在 Windows
LocalSystem 帐户下启动:它会立即退出,并且第一个操作会以 “Chrome process closed the pipe” 拒绝。仅能使用 Edge 的服务或 CI 代理需要以普通用户帐户运行 Bun。连接到已在运行的 Chrome
默认情况下,在生成浏览器之前,Bun 会从标准配置文件目录读取DevToolsActivePort 文件,以检查是否已经有启用了远程调试的 Chrome 系浏览器在运行。如果找到,Bun 会通过 WebSocket 连接到该浏览器,而不是生成新浏览器 — 你的视图会作为标签页在现有浏览器中打开。
要在运行中的 Chrome 中启用远程调试,请访问 chrome://inspect/#remote-debugging 并打开开关,或者使用 --remote-debugging-port=9222 启动 Chrome。使用 chrome://inspect 开关时,Chrome 会在每次建立新连接时请求权限。
要显式控制这一行为,请使用 backend 的对象形式:
DevToolsActivePort 文件(Chrome 崩溃或重启),WebSocket 连接将失败,并且 Bun 会透明地回退到生成自己的 Chrome。显式指定 url: "ws://..." 不会回退 — 连接失败会直接抛出异常。
传入
path 或 argv 会隐含进入生成模式并跳过自动探测。url: "ws://..." 不能与 path 或
argv 组合使用。启动参数
生成时,Bun 会传入一组最小的参数:argv 把你自己的参数追加进去 — Chrome 处理重复开关时采用“最后生效”,因此你可以覆盖任意默认值:
子进程输出
浏览器子进程的 stdout/stderr 默认会被静默处理。尤其是 Chrome,其 stderr 输出十分嘈杂(字体配置警告、GCM 注册、更新程序检查)。要查看这些输出 — 在 Chrome 静默崩溃时很有用 — 请传入"inherit":
"webkit" 后端也接受相同的 stdout/stderr 选项。
导航
load 事件触发时,navigate() 才会解析完成。解析完成后,view.url 和 view.title 会反映新页面,且 view.loading 为 false。
如果导航失败(DNS 失败、连接被拒绝、URL 无效),该 promise 会以描述失败原因的 Error 形式拒绝。
每个视图在任一时刻只能进行一个正在进行的导航。若在另一个 navigate() 仍待处理时再次调用 navigate(),会同步抛出 ERR_INVALID_STATE。
历史记录
goBack()(或 goForward())会直接解析为 undefined,不进行导航 — 不会拒绝。
导航回调
设置onNavigated 和 onNavigationFailed 来观察每一次导航,包括页面自身触发的导航(点击链接、location.href = ...、重定向)以及由 reload()/goBack()/goForward() 触发的导航:
navigate() promise 完成(settle)之前触发,因此当你 await view.navigate(...) 返回时,你的回调已经运行过了。设置为 null 可移除。
计算 JavaScript
在页面的主框架中运行一个表达式,并把结果作为原生 JavaScript 值返回:await (<your script>),因此:
- 它必须是一个表达式,而不是语句序列。若要运行多个语句,请将它们包装在 IIFE 中:
evaluate("(() => { let x = foo(); return x + 1 })()")。 - 如果计算结果是一个
Promise,evaluate()会等待该 promise,并返回其解析后的值。
JSON.stringify,在 Bun 侧通过 JSON.parse 来往返传递。数组和普通对象会以真实结构返回;undefined、函数和 symbol 会解析为 undefined;循环引用会导致拒绝。
evaluate() 会拒绝,并把消息作为页面侧异常信息的一部分返回一个 Error。
每个视图在任一时刻只能进行一个正在进行的 evaluate();第二个并发调用会同步抛出 ERR_INVALID_STATE。
截图
把当前视口捕获成图片:图片格式
quality。"webp" 只在 backend: "chrome" 时可用 — WebKit 后端会抛出异常。
返回类型
encoding 选项控制 Bun 如何返回图片字节:
终端图形的共享内存
encoding: "shmem" 专为 Kitty 的终端图形协议 t=s 传输模式设计。Bun 会将图片写入 POSIX 共享内存段并返回其名称。终端会直接读取它,并在完成后取消链接。无需通过管道复制。
/bun-webview-<pid>-<seq>;在 Chrome 上是 /bun-chrome-<pid>-<seq>。如果你请求 "shmem",但没有把名称交给某个会执行 shm_unlink 的逻辑,那么共享内存段会在你的进程退出前一直泄漏。
输入模拟
所有输入方法都会分发原生浏览器事件。页面会收到isTrusted: true 的 pointerdown/mousedown/keydown/wheel 事件。CSS :active 和 :hover 状态会生效。默认操作(表单提交、链接导航、文本选择)会与用户实际操作时完全一样地触发。
点击
在视口坐标处点击:mousedown → mouseup → click 序列(包括任何 JavaScript 处理程序)后解析。无需轮询 — 后续的 evaluate() 可以看到结果。
通过选择器点击
传入 CSS 选择器而不是坐标,Bun 会等待元素变为可操作,然后点击其中心:- 存在于 DOM 中
- 拥有非零的边界框
- 位于视口内
- 已保持稳定(在连续两帧动画中边界框未改变)
- 在其中心点处是最上层元素(没有被覆盖物遮挡)
requestAnimationFrame 的频率运行。如果该元素在 timeout 毫秒内始终未变为可操作(默认 30000),promise 会以类似 timeout waiting for '#submit' to be actionable 的错误拒绝。
Bun 会将选择器作为数据传递,而不是将其插入脚本中,因此包含引号或 JavaScript 语法的选择器也是安全的。
输入文本
把文本插入到当前聚焦的元素中:type() 使用浏览器的 InsertText 编辑命令(与粘贴使用同一路径),而不是逐字符的按键模拟。它会触发带 isTrusted: true 的 beforeinput/input 事件,但不会触发 keydown/keyup 事件。不会进行 IME 处理,也不会进行智能引号替换 — 文本会被按原样精确写入。
按下按键
Enter、Tab、Space、Backspace、Delete、Escape、ArrowLeft、ArrowRight、ArrowUp、ArrowDown、Home、End、PageUp、PageDown。
任意单个字符(例如 "a")与 modifiers 组合使用时,会发送键盘组合键。
在 WebKit 后端上,大多数命名按键(不带修饰键)会映射到 DeleteBackward、MoveLeft 和 InsertNewline 等编辑命令,并在页面应用这些命令后解析。Escape、Space 和带有修饰键的任何按键都会回退到原始的 keydown/keyup 事件。这些按键会触发页面可观察到的 keydown,但没有完成屏障。如果需要观察结果,请接着调用 evaluate()。
修饰键名称:"Shift"、"Control"(或 "Ctrl")、"Alt"(或 "Option")、"Meta"(或 "Cmd" / "Command")。
滚动
按像素增量滚动 — 在视口中心触发一个原生wheel 事件:
dy 会向下滚动(内容向上移动),与 window.scrollBy 一致。如果视口中心下方有可滚动元素,它会接收到 wheel 事件,而不是整个文档。
通过选择器把元素滚入视野:
scrollTo() 会以 requestAnimationFrame 的频率等待元素存在,然后调用 element.scrollIntoView({ block, behavior: "instant" })。它会滚动所有可滚动祖先,而不仅仅是文档。默认 timeout 为 30000 ms。
调整大小
1 到 16384 之间。
控制台捕获
通过在构造函数中传入console 选项,把页面侧的 console.* 调用转发到你的 Bun 进程。
镜像到 Bun 的控制台
传入globalThis.console(实际对象,按引用传递)。页面侧的 console.log("hi") 会使用 Bun 的格式化程序将 hi 打印到 stdout,console.error 则会输出到 stderr。此路径通过 Bun 的控制台实现直接分发,不会产生每次调用都要承担的 JavaScript 开销。
自定义处理器
传入一个函数来接收每次调用:null、undefined)会解包为它们的原始值。对象参数会以序列化描述符的形式到达:
- Chrome 后端:原始的 CDP
RemoteObject— 一个包含type、className、description,以及(在可用时)preview.properties数组的对象。 - WebKit 后端:对象经过
JSON.stringify往返后的结果。函数、循环引用以及其他不可序列化值会回退为String(...)的强制转换。
console,Bun 会丢弃页面侧的控制台输出。
顺序保证:你传递给
evaluate() 的脚本中的 console.log(...) 会在该
evaluate() 完成之前到达你的处理器。两者通过同一个 IPC 连接传输。原始 Chrome DevTools Protocol
当使用backend: "chrome" 时,如果高层 API 没有覆盖你想要的能力,你可以直接切换到原始的 CDP 命令。
发送命令
cdp(method, params?) 会返回 CDP 响应中的 result 对象。如果 Chrome 返回错误(未知方法、参数错误),该 promise 会以 error.message 拒绝。
命令会被限定在此视图的会话范围内(目标是此标签页)。在调用 cdp() 之前至少要 await navigate(...) 一次 — 第一次导航会建立会话。若在那之前调用 cdp() 会抛出 ERR_INVALID_STATE。
params 必须是可 JSON 序列化的对象;对于不带参数的命令可省略。每个视图同一时刻最多只能有一个 cdp() 调用正在进行。
订阅事件
Bun.WebView 扩展了 EventTarget。使用 Chrome 后端时,视图会将 CDP 事件作为 DOM 事件分发,其 type 为 CDP 方法名称,data 为解析后的 params 对象:
params 之前就将其丢弃,因此如果你只监听一两种事件类型,启用像 Network 这样的高频事件域也不会造成开销。
在 WebKit 后端上,cdp() 会抛出 ERR_METHOD_NOT_IMPLEMENTED — 没有 DevTools Protocol 的桥接。EventTarget 接口仍然可用于你自己对 dispatchEvent() 的调用。
生命周期
关闭视图
Error("WebView closed") 拒绝该视图上所有待处理的 promise,并使之后的每次方法调用都抛出 ERR_INVALID_STATE。这些拒绝会被标记为已处理:你持有的 promise 仍可以捕获到拒绝,但没有被任何对象持有的待处理操作不会触发 unhandledRejection。
view[Symbol.dispose] 和 view[Symbol.asyncDispose] 都指向 close(),所以 using / await using 可以正常工作。
杀死所有浏览器
SIGKILL)所有浏览器子进程(包括 Chrome 子进程和 WebKit 宿主子进程)。每个视图上的待处理 promise 会在下一次事件循环 tick 时拒绝。之后的 new Bun.WebView() 调用会在需要时重新生成。
Bun 会在进程退出时自动调用它,因此浏览器子进程不会在你的脚本之外存活。
事件循环行为
浏览器子进程本身不会让 Bun 的事件循环保持运行。打开的WebView 仅会在存在待处理操作(例如尚未完成的 navigate() 或 evaluate())时让进程保持运行。一旦你关闭最后一个视图,或最后一个待处理操作完成,Bun 就会自然退出。
子进程死亡
如果浏览器子进程意外死亡(崩溃、被 OOM-kill、SIGKILL),每个视图上所有待处理的 promise 都会以描述其死亡原因的错误拒绝("Chrome killed by signal 9"、"WebView host process died")。对这些视图进行后续操作会抛出异常。
并发模型
每个视图都有少量用于并发的独立“操作槽位”。同一种操作在任一时刻最多只有一个在执行:- 一个
navigate()(在 Chrome 后端与reload()/goBack()/goForward()共享) - 一个
evaluate() - 一个
screenshot() - 一个
cdp()(仅 Chrome) - 一个“简单”操作 —
click()、type()、press()、scroll()、scrollTo()、resize()(以及 WebKit 后端的reload()/goBack()/goForward())共享此槽位
ERR_INVALID_STATE — 它不会排队。实际上,请对每次调用使用 await。
不同视图之间的操作完全独立,并会并行运行 — 每个视图都有自己的渲染器进程。