ai-newtab测试指南：如何用Bun与无头Chrome验证「扩展+LLM Agent」这条完整链路-北京尧图网络

【免费下载链接】ai-newtabClaude generates a daily new tab page based on your browser history.项目地址https://gitcode.com/gh_mirrors/ai/ai-newtab点击查看免费下载ai-newtab 是一款让 Claude LLM Agent 替你读网的 Chrome 新标签页扩展它读取你的浏览历史、以你的身份打开常看的页面再写出一段 React 组件作为当天的个性化主页。这类「浏览器扩展 LLM Agent」组合通常最难验证——一半逻辑跑在浏览器里另一半跑在远端 Agent 会话里。而 ai-newtab 仓库自带了一套基于 Bun 与无头 Chrome 的三层测试体系单元测试、扩展集成测试、真实 API 端到端构建每条都能用一两条命令跑完。本文带你完整走一遍。一、为什么这条链路需要三层验证传统项目的测试往往一管到底但 ai-newtab 的构建链路横跨三方角色运行位置职责扩展service worker你的浏览器持有会话流、执行getHistory/getPageHtml、持久化主页编排层Anthropic运行 Agent 循环、持久化事件日志会话沙箱Anthropic对挂载的页面执行read/grep/write关键在于getHistory和getPageHtml必须运行在用户浏览器里依赖chrome.history和chrome.tabs测试环境里的脚本是够不到的。好在仓库把 Agent 循环抽成了宿主无关的 packages/agent-core/——它不 import 任何chrome.*、browser.*或node:*因此同一套编排代码既能在扩展的 service worker 里跑也能在 Bun 脚本里跑。这正是整条链路可以被分层验证的基础层级命令验证什么需要 API Key 第 1 层单元测试pnpm test历史摘要、站点黑名单、流重连、自动重建等纯逻辑❌️ 第 2 层无头 Chrome 扩展测试pnpm extension:testservice worker 注册、新标签页渲染、port 协议、chrome.history权限❌ 第 3 层真实 API 端到端pnpm agent:runpnpm agent:verify会话生命周期、工具调度、页面挂载、沙箱读写、交付物可渲染✅二、准备工作克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/ai/ai-newtab cd ai-newtab npx pnpm10.11.1 install测试全部由 Bun 驱动请先按 Bun 官方说明安装好运行时。第 3 层测试还用到一个 API Key配置文件模板在 .env.example按需复制即可第 1、2 层完全不需要。三、第一层用bun test跑单元测试pnpm test这条命令等价于bun test harness/无需 API、无需网络秒级完成。四个测试文件各守一段关键逻辑历史摘要harness/history-digest.test.ts —— 验证站点列表被截断到上限、按相关度降序、丢弃urls[]明细、上报totalSitesSeen保证塞给模型的内容小而全。站点黑名单harness/site-filter.test.ts —— 用户填google.com时mail.google.com要被拦notgoogle.com不能被误伤连粘贴带协议的完整 URL 也能被规范化。流重连harness/stream-reconnect.test.ts —— 会话流在构建中途断开时编排器必须重连而不是提前收工。自动重建harness/auto-rebuild.test.ts —— 只在早上 5 点到 12 点之间、且每天最多触发一次晨间构建。所有测试共用同一份夹具历史数据来源是 harness/node-bridge.ts 中的fixtureHistory()——模拟了一个常逛 Hacker News、GitHub 的浏览器档案。四、第二层用无头 Chrome 验证扩展本体先构建扩展再运行测试npx pnpm10.11.1 build pnpm extension:test这个测试由 harness/test-extension.ts 完成它的做法相当硬核以--headlessnew启动一个全新临时配置文件的无头 Chrome打开远程调试端口harness/test-extension.ts#L41-L54由于 Chrome 136 已忽略--load-extension参数改用 CDP 的Extensions.loadUnpacked加载构建产物在页面里注入脚本直接与扩展的 service worker 对话。全程不发起任何 API 调用却验证了 Bun 脚本够不到的浏览器侧能力✅ MV3 service worker 成功注册#L118-L125✅ 新标签页覆盖生效全新配置下渲染出 API Key 输入界面#L127-L157✅ 通过subscribe消息收到构建状态快照#L171-L178✅ 未配置 API Key 时startBuild干净地报错而不是静默卡死#L180-L183✅chrome.history真实可读先种入几条历史再确认能查回来#L185-L204 Linux 用户注意测试默认读取 macOS 的 Chrome 路径请通过环境变量指定例如CHROME_PATH$(which google-chrome) pnpm extension:test。全部通过时会打印绿色的EXTENSION VERIFIED。五、第三层用 Bun 跑真实 API 端到端构建这是唯一花 API 额度的层级验证的是Agent 真的能把主页写出来。1. 配置 API Keycp .env.example .env在 .env 中填入ANTHROPIC_API_KEY可选再写一条HOMEPAGE_PROMPT定制风格。2. 完整构建pnpm agent:runharness/run-agent.ts 运行的正是扩展里那份runHomepageBuild编排器只是把浏览器桥接换成了nodeBridge历史数据用夹具页面抓取用普通fetch。构建完成后终端会打印会话信息、耗时以及一组契约检查#L57-L64✅ 默认导出PersonalizedHomepage组件✅ 导入了 React✅ 没有从 react 之外的包导入✅ 页面里含有真实的外链产物写入harness/out/homepage.tsx。⚠️ 一个重要边界nodeBridge用的是裸fetch看不到需要登录或 JS 渲染的页面——这正是生产环境里getPageHtml必须由浏览器执行的全部理由。所以这一层验证的是 Agent 链路本身而不是浏览器抓取能力。3. 交付物可渲染验证pnpm agent:verify长得像 React不等于能渲染。harness/verify-homepage.ts 模拟新标签页的真实渲染路径用 sucrase 把 TSX 转成 JS——与扩展内的 apps/extension/lib/transpile.ts 同一方案在一个只允许import react的 CommonJS 沙箱里求值#L37-L59用renderToString服务端渲染输出少于 500 字节直接判负#L61-L70要求至少 5 个互不重复的真实外链且不允许出现example.com、placeholder这类占位链接#L72-L84。打印VERIFIED即代表 Sandpack iframe 一定能挂载这份组件。4. 可选进阶崩溃恢复与隐私验证断点续建pnpm agent:resume-test会先执行 harness/test-resume.ts 的crash阶段——真实构建进行到 Agent 刚请求getPageHtml的瞬间直接强杀进程模拟在最坏时刻关闭了 Chrome随后resume阶段通过resumeSessionId重新附着重放事件日志、补答那个没人回答的工具调用并最终完成构建#L89-L122。数据留存pnpm agent:retention sessionId运行 harness/check-retention.ts确认会话已删除#L19-L29、Files API 中不残留任何抓取的页面正文#L32-L39——这是隐私声明的实证。sessionId 可以在agent:run的输出里找到。六、结果速读与常见注意点跑完三层后你会得到这样的结论链输出标记含义✅ 各测试用例全绿bun test纯逻辑正确绿色EXTENSION VERIFIED浏览器侧五项检查通过绿色VERIFIED — ... is a renderable homepage交付物可真实渲染且链接可信几个容易踩的点agent:*系列命令会消耗 API 额度agent:resume-test实际会跑两个会话夹具历史不含登录态页面抓取失败的 URL 会以failed形式上报而非隐藏属正常现象三层测试都通过后最后一步是真实的人工验收chrome://extensions→ 开发者模式 → 加载apps/extension/.output/chrome-mv3在新标签页里粘贴 API Key 点Build todays homepage看着进度面板一步步走完。完整的验证矩阵每条命令证明什么也可参考仓库内的 ARCHITECTURE.md它连同事件流图和已知坑位一起是排查问题时的第一手资料。至此从纯逻辑、到无头 Chrome、再到真实 Agent 会话「扩展 LLM Agent」这条完整链路已经全部被验证过一遍。赞分享【免费下载链接】ai-newtabClaude generates a daily new tab page based on your browser history.项目地址https://gitcode.com/gh_mirrors/ai/ai-newtab点击查看免费下载相关推荐3AGameFactory 无 GPU 冒烟测试test/harness 如何秒级验证整条生成链路3AGameFactory 无 GPU 冒烟测试test/harness 如何秒级验证整条生成链路 3AGameFactory 是一个开源的 3A 游戏生成人工智能媒体生成游戏开发AI 应用AI 技能Beav浏览器AI控制原理剖析MCP、Native Host与Chrome扩展如何串联成Agent操控链路Beav浏览器AI控制原理剖析MCP、Native Host与Chrome扩展如何串联成Agent操控链路 Beav 是一款开箱即用的小红书 AI 运营工作台AI 应用人工智能AI AgentMCP 服务浏览器控制音视频三步让NAS认出第三方硬盘Synology HDD db 完整指南三步让NAS认出第三方硬盘Synology HDD db 完整指南装第三方硬盘后群晖存储管理器黄色提示不支持。Synology HDD db 是面向个人CLI开发工具上一篇3个实用技巧轻松突破百度网盘限速baidu-wangpan-parse高效下载终极指南下一篇3分钟学会用Python脚本突破百度网盘下载限速的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

ai-newtab测试指南：如何用Bun与无头Chrome验证「扩展+LLM Agent」这条完整链路

相关推荐

Quark Shell 上架 Mac App Store 指南：WebKit 沙盒、安全与兼容性注意事项

SEO布局指南：新站上线前必做的几件事

大模型推理引擎vLLM(26):INT8 高吞吐/低延迟 EP 代码梳理、疑问、流程差异、DeepEP 通信差异

更多资讯

S7-1200 PUT/GET通信实战：连对、写对、防错三要素

控制器当Git服务器：TwinCAT 3 AdsGitServer版本回退

DeepSeek大模型API接入、流式输出与移动端配置指南

七端口交换板REV 2.1改版拆解：端口拓扑、复位与配置引脚复用

15页5G+VR智慧旅游方案PPT：VR观景台到数据中台的拆解复用

MySQL高阶篇之配置文件详解与各类客户端工具

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？