这是一篇关于 Nanobrowser 源码定制的实战指南。本文将带你从源码层面深入了解如何通过修改逻辑、注入自定义工具和优化 Prompt，打造一个完全契合你个人工作流的 AI 自动化助手。
在前几期的源码分析中，我们深入探讨了 Nanobrowser 的多代理架构（Multi-Agent System）以及它如何通过 Planner（规划者） 和 Navigator（导航者） 的协作实现复杂的网页自动化。
本篇为实战篇，我们将"卷起袖子"，看看如何基于这套优秀的开源代码，通过二次开发定制出一个专属的 AI 助手。
为什么要基于源码定制？
虽然 Nanobrowser 提供了开箱即用的功能，但对于有特殊需求的用户（如特定的垂直领域数据抓取、复杂的自动化 OA 流程、或者接入私有模型），通过源码定制可以实现：
-
私有化 Prompt 注入：让 AI 更懂你的特定业务逻辑。
-
扩展 Action 动作库：让 AI 具备原本不支持的操作能力。
-
深度 UI 定制：打造沉浸式的侧边栏工具栏。
-
模型适配：接入本地运行的 DeepSeek 或 Llama 模型，确保隐私与低成本。
第一阶段：环境准备与源码编译
在开始定制前，请确保你的开发环境已准备就绪。
-
Node.js: 建议 v22.12.0 或更高版本。
-
包管理工具 :
pnpm(推荐)。 -
浏览器: Google Chrome 或 Edge。
1. 克隆与安装
Bash
git clone https://github.com/nanobrowser/nanobrowser.git
cd nanobrowser
pnpm install2. 编译并加载插件
执行编译命令生成 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）来操控浏览器。
实战：增加一个"截图并识别"功能
如果你希望助手在完成操作后自动截取屏幕并发送到你的钉钉/飞书，可以按照以下步骤：
-
定义新 Action ：在
src/runtime/actions.ts中注册一个新的 action 类型take_screenshot_and_notify。 -
实现执行逻辑 ：调用 Chrome Extension 的
tabs.captureVisibleTabAPI 捕获图像。 -
告知 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 个电商平台，搜索指定产品，并将最低价格汇总成表格发送给我。
定制步骤：
-
预设任务流 ：在源码中增加一个
presets目录，将复杂的搜索和对比 Prompt 硬编码进去。 -
数据提取优化 ：修改
src/runtime/extractor.ts，利用更精准的 CSS 选择器逻辑协助 AI 识别价格标签。 -
定时触发 ：利用 Chrome 的
alarmsAPI，在background.ts中添加定时唤醒逻辑。
结语
基于 Nanobrowser 的源码定制，本质上是在一个成熟的 "浏览器操控引擎" 上加装你的 "业务大脑"。这种方式比从零开发一个 Web Agent 节省了至少 80% 的工作量，同时也比直接使用现成产品具备更高的灵活性。
下一步建议：
你可以先尝试修改 src/agents/planner/prompt.ts 中的提示词，观察 AI 行为的变化，这是理解 Nanobrowser 运作逻辑的最快路径。