1. 项目概述一个住在浏览器侧边栏的AI副驾驶如果你和我一样每天的工作都离不开浏览器那一定对重复性的网页操作深恶痛绝。比如每天要登录十几个后台查看数据手动复制粘贴到表格里或者为了研究一个竞品需要在几十个标签页之间来回切换手动截图、记录关键信息。这些工作繁琐、耗时还容易出错。最近我在GitHub上发现了一个名为Parchi的开源项目它完美地解决了我的痛点。简单来说Parchi是一个AI驱动的浏览器副驾驶Chrome/Firefox扩展。它不像传统的浏览器插件那样提供一堆按钮让你点而是直接在你的浏览器侧边栏里开了一个聊天窗口。你可以像跟一个懂技术的助手聊天一样用自然语言告诉它你想做什么比如“帮我把这个页面上所有商品的价格和标题提取出来整理成CSV”或者“打开我的邮箱找到昨天客户发来的那封关于合同的邮件把附件下载下来”。Parchi会理解你的意图并调用一系列浏览器工具导航、点击、读取、输入、截图等来自动化地完成任务。最吸引我的是它的“模型无关”特性。它不绑定任何特定的AI服务商只要提供符合OpenAI API格式的接口无论是官方的GPT、Claude还是开源的本地模型如通过Ollama部署的Llama 3甚至是OpenRouter这样的聚合平台都可以作为它的大脑。这意味着你可以根据自己的需求、预算和隐私考虑灵活选择最合适的“引擎”。2. 核心设计思路为什么是“聊天驱动”的自动化传统的浏览器自动化工具比如Selenium、Puppeteer或者一些RPA软件都需要你编写脚本。你需要精确地告诉程序点击哪个ID的按钮在哪个Class的输入框里填写什么内容。这要求使用者具备一定的编程能力并且当网页结构发生变化时脚本很容易失效。Parchi采取了一种截然不同的思路聊天驱动Chat-driven。它将复杂的浏览器操作抽象成一系列“工具”Tools并将这些工具的描述和能力“告诉”给一个大语言模型LLM。当你用自然语言提出请求时背后的“编排器”Orchestrator会分析你的指令决定调用哪些工具、以什么顺序调用并生成具体的工具调用参数。模型执行工具后将结果比如页面内容、操作状态返回给编排器编排器再决定下一步是继续调用工具还是将最终结果汇总后回复给你。2.1 架构拆解从用户指令到浏览器动作这个过程听起来复杂但Parchi的架构设计得很清晰。我们可以把它拆解成几个核心组件用户界面侧边栏这是你与Parchi交互的窗口。你在这里输入指令、查看AI的思考过程一个可视化的“执行时间线”、检查工具调用记录和最终结果。编排器Orchestrator这是整个系统的“指挥官”。它接收你的指令并与配置的LLM进行多轮对话。它的核心职责是“任务分解”和“工具调度”。例如你让它“总结这篇长文章并发邮件给我”编排器可能会将其分解为读取页面内容-总结内容-打开Gmail-撰写新邮件-填充标题和正文-点击发送。每一步都需要调用不同的工具。工具集Tools这是Parchi的“手和眼睛”。它封装了所有浏览器能做的底层操作。根据项目文档主要包含以下几类导航类navigate跳转到指定URL、go_back、go_forward、reload。内容获取类read获取当前页面的文本内容、链接、图片等结构化信息、screenshot截取整个页面或指定区域。交互类click点击指定元素、type在输入框内输入文字、scroll。标签页管理open_tab、switch_tab、close_tab。信息提取extract基于你提供的描述或示例从页面中提取特定模式的信息。模型服务层这是Parchi的“大脑”。它通过标准的OpenAI兼容API与外部LLM通信。你可以在设置中灵活配置API端点、密钥和模型。这使得Parchi具备了极强的适应性。2.2 模型无关性的优势与考量选择“模型无关”的设计是Parchi一个非常明智的决定。这带来了几个关键优势成本可控你可以根据任务复杂度选择不同价位的模型。简单的信息提取可以用便宜的小模型复杂的逻辑推理再用GPT-4。隐私保护对于涉及敏感数据的操作如公司内部系统你可以将API指向本地部署的模型如Ollama确保数据不出内网。避免供应商锁定不会因为某个AI服务商涨价或服务变更而影响工具的使用。体验定制不同的模型在指令遵循、代码生成、逻辑推理上各有侧重你可以为不同的工作流配置不同的“大脑”。实操心得模型选择策略在实际使用中我摸索出了一套模型搭配策略。对于日常的网页内容总结、简单信息提取我使用gpt-3.5-turbo速度快且成本低。当需要处理复杂逻辑、多步骤规划比如“对比这三个电商网站上某商品的价格和评论”时我会切换到claude-3-opus或gpt-4它们的规划能力更强出错率更低。而对于完全本地的、不联网的文档处理任务我会在本地用Ollama跑一个llama3:8b模型虽然慢一点但绝对安全。3. 从零开始安装、配置与初体验光说不练假把式下面我就带你一步步把Parchi装到你的浏览器里并完成第一次AI驱动的自动化任务。3.1 本地构建与安装Parchi是一个开源项目需要从源码构建。别担心过程非常简单。第一步获取代码并安装依赖打开你的终端命令行执行以下命令# 克隆项目仓库到本地 git clone https://github.com/0xSero/parchi.git # 进入项目目录 cd parchi # 安装项目所需的所有Node.js依赖包 npm install这个过程可能会花费几分钟取决于你的网络速度。第二步构建扩展依赖安装完成后运行构建命令npm run build这个命令会调用项目内的构建脚本将TypeScript源码编译、打包最终在项目根目录下生成一个dist/文件夹里面就是可以在Chrome中加载的扩展程序。第三步加载到Chrome浏览器在Chrome地址栏输入chrome://extensions/并回车打开扩展管理页面。确保页面右上角的“开发者模式”开关是打开状态蓝色为开启。点击左上角的“加载已解压的扩展程序”按钮。在弹出的文件选择器中找到并选中你刚才项目目录下的dist/文件夹然后点击“选择文件夹”。如果一切顺利你会在扩展列表里看到Parchi的图标并且浏览器工具栏右侧也会出现它的图标。点击这个图标就可以打开侧边栏了。注意事项Firefox用户的区别如果你是Firefox用户构建命令稍有不同npm run build:firefox。构建产物会输出到dist-firefox/目录。然后在Firefox地址栏输入about:debugging进入“调试”页面选择“此Firefox”点击“临时载入附加组件”然后选择dist-firefox/目录下的manifest.json文件即可加载。3.2 核心配置连接你的AI大脑安装完成后第一次打开侧边栏最关键的步骤就是配置AI模型。点击侧边栏顶部的设置图标通常是个齿轮进入配置页面。你会看到一个“模型配置”或“API设置”的区域。这里需要填写几个关键信息API端点Endpoint这是你选择的AI服务提供的接口地址。API密钥API Key用于身份验证。模型名称Model你想要使用的具体模型ID。下面我以几种最常见的场景为例说明如何配置场景一使用OpenAI官方API这是最直接的方式。如果你有OpenAI的账号和API Key配置如下端点https://api.openai.com/v1API密钥你的sk-开头的OpenAI API Key。模型例如gpt-4o,gpt-4-turbo,gpt-3.5-turbo。场景二使用开源模型通过Ollama为了隐私和零成本测试我强烈推荐先在本地用Ollama试试。首先确保你已经在电脑上安装并运行了Ollama例如在终端运行ollama run llama3:8b能成功对话。端点http://localhost:11434/v1Ollama默认的兼容OpenAI的API地址API密钥留空即可Ollama本地运行通常不需要密钥。模型填写你在Ollama中拉取的模型名如llama3:8b,qwen2:7b等。场景三使用OpenRouter等聚合平台OpenRouter聚合了多家AI公司的模型用一个API Key就能调用多种模型有时价格更有优势。端点https://openrouter.ai/api/v1API密钥你的OpenRouter API Key。模型OpenRouter支持的模型ID如openai/gpt-4o,anthropic/claude-3-opus等。注意格式是提供商/模型名。配置完成后记得点击“保存”或“测试连接”。如果配置正确侧边栏的聊天输入框就应该可以正常使用了。3.3 你的第一个自动化指令让AI读取网页让我们从一个最简单的任务开始感受一下Parchi的工作方式。打开一个网页比如在浏览器中打开维基百科上关于“人工智能”的页面。激活Parchi点击浏览器工具栏上的Parchi图标打开侧边栏。输入指令在侧边栏的聊天框中输入“请帮我总结一下当前页面的主要内容列出三个关键点。”观察执行点击发送后你会看到侧边栏里AI开始“思考”。更酷的是下方会出现一个“执行时间线”Timeline你可以清晰地看到Parchi背后发生了什么步骤1调用read工具。时间线会显示“正在读取页面内容...”。Parchi会获取当前页面的文本、链接等结构化信息。步骤2AI分析并总结。获取到的页面内容会连同你的指令一起发送给你配置的LLM。LLM会生成总结文本。步骤3返回结果。AI将生成的三个关键点总结显示在聊天窗口中。这个过程完全可视化让你对AI的“黑箱”操作有了白盒化的理解。如果结果不理想你很容易就能判断是页面内容没读全还是AI总结得不好便于下一步调整指令。4. 深入核心功能解锁高效工作流掌握了基础操作后我们来深入探索Parchi那些能真正提升效率的核心功能。4.1 不仅仅是“读取”强大的交互与提取工具read工具只是开始。Parchi真正的威力在于其交互能力。你可以组合使用多种工具完成复杂流程。案例自动填写表单并提交假设你每天需要在一个内部系统里录入数据。你可以对Parchi说“在当前页面找到‘项目名称’输入框填入‘Q3产品迭代’找到‘负责人’下拉框选择‘张三’找到‘提交日期’输入框填入今天的日期最后点击‘保存’按钮。”Parchi的编排器会这样工作调用read工具获取页面所有可交互元素的标识如ID、Name、文本内容。根据你的描述LLM判断需要依次调用type填入项目名称、click点击负责人下拉框、可能再调用read获取下拉选项、再click选择“张三”、再次type填入日期、最后click保存按钮。每一步的执行结果成功或失败都会反馈给LLM确保流程顺利进行。案例跨标签页信息聚合这是我最常用的场景之一。我可以命令Parchi“新建一个标签页打开GitHub搜索‘puppeteer’相关的趋势仓库把前5个仓库的名字、star数和主要语言提取出来然后在一个新标签页里用Markdown表格的形式展示给我。”这个指令涉及open_tab,navigate,read,extract,type可能用于在新标签页的编辑器里生成表格等多个工具的复杂协作。Parchi的编排器会像项目经理一样一步步分解并执行这个多步骤项目。4.2 权限控制与安全边界让自动化更可控浏览器自动化能力强大但也伴随着风险。Parchi在设计上充分考虑到了这一点提供了细致的权限控制。在扩展设置中你可以找到“工具权限”或“安全设置”区域。通常包括全局工具开关你可以完全禁用某些高风险工具比如click和type只保留read功能这样Parchi就变成了一个纯粹的“网页阅读分析助手”。域名白名单你可以设置一个允许自动操作的网站列表如*.your-company.com。只有在这个列表里的网站Parchi才会执行交互类工具点击、输入。对于其他网站即使你发出了指令Parchi也会拒绝执行或者仅执行读取操作。操作确认对于一些关键操作如关闭标签页、提交表单可以设置为需要用户手动确认后再执行。重要安全提醒项目文档开头的安全警告非常重要。请务必理解AI并不完美。它可能误解你的指令或者被网页上的内容误导即“提示词注入”执行错误操作。例如你让它“点击最大的那个按钮”它可能点中广告。因此在初期使用或对重要账户操作时务必开启操作确认并密切观察执行时间线。永远不要让它操作涉及金融交易、敏感数据删除等不可逆行为的页面除非你百分之百信任当前的工作流并已进行充分测试。4.3 会话历史与工作流保存Parchi的侧边栏会保存你的聊天会话历史。这意味着你可以为不同的重复性任务创建不同的“会话”。例如你可以创建一个名为“每日数据收集”的会话里面保存着你每天需要执行的一系列固定指令。第二天你只需要打开这个会话点击“重新运行”或者稍作修改即可无需重新输入所有指令。更进一步你可以将一系列复杂的指令提炼成一个“提示词模板”。比如一个标准的竞品分析模板可能包含“1. 读取页面标题和描述2. 提取核心功能列表3. 查找定价信息4. 总结用户评论中的三个主要观点。” 未来你只需要打开这个模板替换掉目标网址就可以快速生成分析报告。5. 开发与定制如果你是一名开发者Parchi是开源的采用Monorepo结构使用TypeScript编写代码质量很高。如果你不满足于现有功能完全可以对其进行定制化开发。5.1 项目结构导读了解项目结构是定制开发的第一步。根据文档主要目录如下packages/extension/浏览器扩展运行时。这是核心包含了侧边栏UIReact、工具的实现、与后台服务的通信逻辑。如果你想修改界面或添加新的浏览器工具主要就在这里工作。packages/backend/Convex后端服务。处理用户认证、付费订阅如果项目未来商业化、以及为扩展提供API代理可能用于中转某些网络请求或管理密钥。初期个人使用这部分通常不需要改动。packages/shared/共享代码。定义了工具调用、消息传递、配置项等的TypeScript类型和接口。确保前端和后端使用同一套“语言”。scripts/构建、发布、代码检查等脚本。tests/完善的测试套件。包括单元测试、集成测试、端到端E2E测试甚至有针对编排器逻辑的专项测试。这为项目的稳定性和贡献代码提供了保障。5.2 如何添加一个新的浏览器工具假设你想添加一个download_file工具让AI能根据链接下载文件。以下是大概的步骤定义工具接口在packages/shared/src/tools.ts或类似文件中定义一个工具描述对象。这个对象需要告诉LLM这个工具是干什么的、需要什么参数。// 示例非实际代码 export const downloadFileTool { name: download_file, description: Download a file from a given URL to the users default download folder., parameters: z.object({ url: z.string().describe(The direct URL of the file to download.), filename: z.string().optional().describe(Optional custom filename for the downloaded file.), }), };实现工具逻辑在packages/extension/src/tools/目录下创建一个新的文件例如downloadFile.ts。在这里你需要使用浏览器扩展API通常是chrome.downloads.download来实现具体的下载功能。// 示例非实际代码 export async function downloadFile(args: { url: string; filename?: string }) { // 调用浏览器下载API return await chrome.downloads.download({ url: args.url, filename: args.filename, saveAs: false, // 直接下载到默认文件夹 }); }注册工具在扩展的工具注册中心可能是一个toolRegistry.ts文件将你新定义的工具接口和实现函数关联起来使其能被编排器发现和调用。更新提示词为了让LLM更好地理解和使用新工具你可能需要更新给LLM的“系统提示词”System Prompt在其中加入对新工具的描述。这部分代码可能在packages/shared/src/prompts/目录下。编写测试在tests/目录下为你的新工具添加单元测试和集成测试确保其行为符合预期。重新构建完成代码后运行npm run build重新构建扩展并在chrome://extensions页面重新加载即可测试新功能。5.3 本地开发与调试循环开发过程中高效的调试至关重要。启动开发构建通常项目会提供npm run dev或npm run build:watch命令可以在你修改代码后自动重新构建扩展。加载扩展在chrome://extensions中加载dist/目录开发模式下。调试扩展侧边栏UI右键点击侧边栏页面选择“检查”可以打开DevTools调试React组件和网络请求。后台脚本在扩展管理页面找到Parchi点击“service worker”或“背景页”链接可以打开后台脚本的DevTools。内容脚本如果工具涉及与页面直接交互的内容脚本你需要在具体的网页上打开DevTools在“Sources”标签页的“Content scripts”部分找到相关脚本进行调试。查看日志Parchi的执行时间线本身就是最好的日志。结合浏览器DevTools的Console输出可以清晰地追踪整个AI决策和工具调用的流程。6. 常见问题与实战排坑指南在实际使用和开发Parchi的过程中我遇到了不少坑也总结了一些解决方案。6.1 使用类问题问题1AI总是误解我的指令执行错误的操作。原因指令不够精确或者页面元素过于复杂AI无法准确定位。解决方案细化指令不要只说“点击那个按钮”。尝试描述按钮的特征如“点击页面顶部导航栏里文字是‘立即注册’的蓝色按钮”。分步进行对于复杂操作不要试图用一个指令完成。先让AI“描述一下当前页面有哪些可点击的元素”根据它的描述你再发出更精确的下一步指令。使用extract工具辅助你可以先让AI用extract工具按照你提供的示例把页面上所有按钮的文本和特征提取成一个列表然后再基于这个列表发出点击指令。切换更强模型如果简单模型如GPT-3.5经常出错尝试换用指令遵循能力更强的模型如Claude 3或GPT-4。问题2在本地使用Ollama时响应速度非常慢或者经常超时。原因本地模型计算资源不足或者Ollama服务配置有问题。解决方案选择更小的模型尝试llama3:8b或更小的phi3:mini。7B-8B参数量的模型在消费级显卡上通常有不错的速度。调整Ollama参数运行Ollama时指定GPU层数或CPU线程数。例如OLLAMA_NUM_GPU50 ollama run llama3:8b将50%的层放在GPU上。具体参数请参考Ollama文档。检查Parchi超时设置在Parchi的设置中看看是否有API调用超时时间的配置适当调大例如从30秒调到60秒。升级硬件如果条件允许使用更强大的GPU是根本解决方案。问题3在某些网站如使用复杂前端框架的Web应用上read工具获取不到内容。原因这些网站的内容可能是动态加载的初始HTML中只有空壳。Parchi的read工具可能是在页面完全加载前就执行了。解决方案手动等待在发出指令前先手动等待页面完全加载、所有数据渲染完毕。组合指令先让AI执行一个scroll操作或者等待几秒如果Parchi未来版本提供了wait工具。目前可以通过指令变通如“请先向下滚动到页面底部然后再读取内容”。开发者反馈这是一个已知的技术挑战。可以向项目提Issue建议增加“等待元素出现”或“等待网络空闲”等更高级的工具。6.2 开发与部署问题问题1构建失败提示TypeScript类型错误。原因项目使用严格的TypeScript配置任何类型不匹配都会导致构建失败。解决方案运行npm run typecheck单独进行类型检查查看详细的错误信息。确保你新增或修改的代码正确定义了类型。充分利用packages/shared中已定义的类型。如果错误来自第三方库或你觉得可以忽略切勿直接修改tsconfig.json中的严格模式设置。应该修复代码本身。问题2添加了新工具但在侧边栏里调用时AI说“我不知道这个工具”。原因工具没有正确注册或者系统提示词没有更新。排查步骤检查注册确认你的工具已经在工具注册表中导出。检查构建确认npm run build成功并且没有警告。重新加载扩展。检查提示词确认packages/shared/src/prompts/orchestrator.ts或类似文件中工具列表包含了你的新工具。LLM是通过这个提示词来知道有哪些工具可用的。查看网络请求在DevTools中打开侧边栏的检查器查看发送给AI API的请求内容确认请求的tools参数里是否包含了你的新工具描述。问题3想将自定义版的Parchi分享给团队使用但不想每个人都从源码构建。解决方案构建分发包使用npm run build生成dist/目录后可以将整个dist/文件夹压缩成ZIP文件。Chrome应用商店需发布如果你希望像普通扩展一样安装需要注册Chrome开发者账号将ZIP包上传发布。但这需要审核且你的修改必须是公开的或符合商店政策。企业策略部署对于公司内部可以通过Chrome浏览器管理策略直接指定一个网络地址或本地路径来强制安装扩展。这是最专业的内部分发方式。Firefox附加组件Firefox对临时加载的扩展限制较少可以直接分发dist-firefox/目录让同事通过about:debugging加载。Parchi代表了下一代人机交互的一个有趣方向将自然语言理解与具体的软件操作环境深度结合。它降低了自动化的门槛让不熟悉编程的人也能享受到流程自动化的便利。虽然目前它在处理极其复杂、动态多变的网页时仍有局限但对于大量结构清晰、重复性高的浏览器操作来说已经是一个生产力倍增器。我个人会持续关注它的发展并尝试将它融入我的日常研究工作流中把更多时间从机械操作中解放出来投入到真正的思考和决策中去。