【Nanobrowser 源码分析 5】实战篇：如何基于 Nanobrowser 源码定制属于你的 AI 自动化助手

这是一篇关于 Nanobrowser 源码定制的实战指南。本文将带你从源码层面深入了解如何通过修改逻辑、注入自定义工具和优化 Prompt，打造一个完全契合你个人工作流的 AI 自动化助手。

在前几期的源码分析中，我们深入探讨了 Nanobrowser 的多代理架构（Multi-Agent System）以及它如何通过 Planner（规划者） 和 Navigator（导航者） 的协作实现复杂的网页自动化。

本篇为实战篇，我们将"卷起袖子"，看看如何基于这套优秀的开源代码，通过二次开发定制出一个专属的 AI 助手。

---

为什么要基于源码定制？

虽然 Nanobrowser 提供了开箱即用的功能，但对于有特殊需求的用户（如特定的垂直领域数据抓取、复杂的自动化 OA 流程、或者接入私有模型），通过源码定制可以实现：

1. 私有化 Prompt 注入：让 AI 更懂你的特定业务逻辑。

2. 扩展 Action 动作库：让 AI 具备原本不支持的操作能力。

3. 深度 UI 定制：打造沉浸式的侧边栏工具栏。

4. 模型适配：接入本地运行的 DeepSeek 或 Llama 模型，确保隐私与低成本。

---

第一阶段：环境准备与源码编译

在开始定制前，请确保你的开发环境已准备就绪。

• Node.js: 建议 v22.12.0 或更高版本。

• 包管理工具 : pnpm (推荐)。

• 浏览器: Google Chrome 或 Edge。

1. 克隆与安装

Bash

git clone https://github.com/nanobrowser/nanobrowser.git
cd nanobrowser
pnpm install

2. 编译并加载插件

执行编译命令生成 dist 目录：

Bash

pnpm build

随后，打开 Chrome 浏览器，访问 chrome://extensions/，开启 "开发者模式" ，点击 "加载解压的扩展程序" ，选择项目中的 dist 文件夹。

---

第二阶段：定制你的 AI 灵魂（Prompt 优化）

Nanobrowser 的核心逻辑在于 Planner 和 Navigator 的系统提示词（System Prompt）。

定制路径：src/agents/

如果你希望 AI 助手在处理任务时更像一个"专业会计"或"论文助手"，你需要修改这里的 Prompt 模板。

• 修改 Planner 逻辑 ：在 src/agents/planner/prompt.ts 中，你可以添加行业特定的约束。例如，要求它在寻找财务报表时必须优先关注 PDF 下载链接。

• 增加输出规范：强制要求 Planner 以特定 JSON 格式输出中间步骤，以便于后续与你的企业后台对接。

---

第三阶段：扩展 AI 的"手"（Action 库定制）

Nanobrowser 通过一组预定义的 Action（如 click, type, scroll）来操控浏览器。

实战：增加一个"截图并识别"功能

如果你希望助手在完成操作后自动截取屏幕并发送到你的钉钉/飞书，可以按照以下步骤：

1. 定义新 Action ：在 src/runtime/actions.ts 中注册一个新的 action 类型 take_screenshot_and_notify。

2. 实现执行逻辑 ：调用 Chrome Extension 的 tabs.captureVisibleTab API 捕获图像。

3. 告知 Navigator ：在 src/agents/navigator/prompt.ts 中添加对新 action 的描述，让 AI 知道什么时候该调用它。

---

第四阶段：接入私有模型（LLM 层定制）

Nanobrowser 默认支持 OpenAI、Anthropic 和 Gemini。但对于开发者来说，接入 Ollama 或 DeepSeek 等本地/国产模型是降低成本的关键。

修改位置：src/llm/

通过修改 src/llm/providers.ts，你可以轻松添加一个新的 Provider：

TypeScript

// 伪代码示例：添加自定义模型支持
export const CustomProvider = {
  id: 'my-local-ai',
  baseUrl: 'http://localhost:11434/v1', // 适配 Ollama
  // 实现标准的 chat completion 接口...
}

---

第五阶段：UI 界面定制

Nanobrowser 的侧边栏采用了现代化的 UI 设计。如果你想为你的助手增加特定的功能按钮（如"一键生成日报"），可以修改 React 组件。

• 主面板 ：src/sidepanel/SidePanel.tsx

• 任务历史 ：src/components/History.tsx

你可以根据需求，将原本通用的聊天界面修改为任务看板，或者增加实时资源监控插件。

---

实战案例：打造一个"竞品价格监控助手"

需求：每天自动打开 5 个电商平台，搜索指定产品，并将最低价格汇总成表格发送给我。

定制步骤：

1. 预设任务流 ：在源码中增加一个 presets 目录，将复杂的搜索和对比 Prompt 硬编码进去。

2. 数据提取优化 ：修改 src/runtime/extractor.ts，利用更精准的 CSS 选择器逻辑协助 AI 识别价格标签。

3. 定时触发 ：利用 Chrome 的 alarms API，在 background.ts 中添加定时唤醒逻辑。

---

结语

基于 Nanobrowser 的源码定制，本质上是在一个成熟的 "浏览器操控引擎" 上加装你的 "业务大脑"。这种方式比从零开发一个 Web Agent 节省了至少 80% 的工作量，同时也比直接使用现成产品具备更高的灵活性。

下一步建议：

你可以先尝试修改 src/agents/planner/prompt.ts 中的提示词，观察 AI 行为的变化，这是理解 Nanobrowser 运作逻辑的最快路径。