Chrome DevTools MCP实测：用AI自动操控浏览器写文章并发布

AI不仅能写文章，还能自己发布

用AI生成文章内容已经不新鲜了，但如果AI不仅能写，还能自己打开浏览器、登录平台、填写标题正文、选择分类标签，最后一键发布呢？最近，一位B站UP主演示了利用 Claude Code + 谷歌浏览器 Chrome DevTools MCP 服务，实现从内容生成到平台发布的全自动化流程，整个过程无需人工干预。

这套方案的核心在于谷歌官方推出的 Chrome DevTools MCP 服务，它让AI能够直接操控浏览器，执行点击、输入、导航等一系列自动化操作。下面我们来详细拆解这个流程，并分析其实际可用性。

技术方案：Chrome DevTools MCP 是什么？

MCP 协议与浏览器自动化的结合

MCP（Model Context Protocol，模型上下文协议）是AI工具生态中非常火热的协议标准，它允许大语言模型通过标准化接口调用外部工具和服务。MCP由Anthropic公司于2024年底正式推出并开源，其设计理念类似于USB-C接口之于硬件设备——提供一个统一的标准，让任何AI模型都能以相同的方式连接和调用外部工具，而不需要为每个工具单独开发适配层。在MCP出现之前，各家AI工具的插件系统互不兼容，开发者需要为不同平台重复开发集成方案。MCP的出现极大地降低了这种碎片化问题，目前已经有数千个MCP服务覆盖了数据库查询、文件操作、API调用、浏览器控制等各类场景。

而谷歌官方推出的 Chrome DevTools MCP 服务，则是专门为AI操控浏览器场景设计的。它的底层依赖的是 Chrome DevTools Protocol（CDP），这是Chrome浏览器内置的远程调试协议，最初是为开发者工具（如Chrome的F12调试面板）设计的。CDP允许外部程序通过WebSocket连接与浏览器通信，获取页面信息、执行JavaScript、模拟用户交互等。谷歌所做的工作，是将CDP的能力按照MCP协议标准进行了封装，使得AI模型可以通过标准化的MCP接口直接调用这些浏览器调试能力，而无需了解CDP的底层细节。通过这个MCP服务，AI能够：

• 打开和导航网页
• 读取页面DOM结构
• 模拟点击、输入等用户操作
• 截取页面截图进行视觉反馈

简单来说，AI通过这个MCP服务获得了"一双操作浏览器的手"。

整体技术栈

本次演示使用的技术组合为：

• Claude Code：作为AI推理和决策的核心引擎。Claude Code是Anthropic推出的终端AI编程工具，与普通的Claude网页对话不同，它运行在命令行环境中，能够直接读写本地文件、执行系统命令，并通过MCP协议调用各种外部服务。这种"扎根于开发者工作环境"的设计，使它天然适合作为AI Agent的大脑——不仅能思考和规划，还能直接采取行动。在本次演示中，Claude Code负责理解任务指令、分析页面状态、生成文章内容，并决定每一步的操作策略。
• Chrome DevTools MCP：作为浏览器操控的桥梁
• 提示词工程：预先编写好任务指令，告诉AI具体要做什么

提示词的核心内容包括：打开掘金网页、进入发表页面、撰写文章内容、自动填写分类标签并完成发布。AI根据这些指令逐步拆解任务并执行。

实操演示：AI全自动发布文章的完整流程

第一步：导航与页面识别

AI接收到提示词后，首先进行任务分析和规划。经过一番"思考"，它成功打开了掘金社区的首页，随后自动导航到创作者中心，找到并进入"写文章"界面。这个过程中，AI需要识别页面元素、理解页面结构，并做出正确的点击决策。

值得注意的是，这里的"识别"并非简单的图像识别。AI实际上是通过Chrome DevTools MCP获取页面的DOM树（文档对象模型），DOM树是网页的结构化表示，包含了所有HTML元素及其属性、层级关系和文本内容。AI通过分析这些结构化信息来"理解"页面上有哪些可交互的元素、它们的功能是什么，然后决定应该点击哪个按钮或链接。同时，AI还可以通过截图功能获取页面的视觉快照，结合视觉信息和DOM信息进行综合判断，这使得它在面对复杂页面布局时也能做出相对准确的决策。

第二步：内容生成与填写

AI自动在编辑器中输入文章标题和正文内容。从演示效果来看，AI不仅生成了文章内容，还进行了基本的排版处理。

有意思的是，AI在这一步实际上完成了两个任务的融合：内容创作和界面操作。它需要一边生成有意义的文章内容，一边将内容正确地填入编辑器的对应字段中。这种"边想边做"的能力正是AI Agent区别于传统自动化脚本的关键特征——传统脚本只能执行预设的固定操作，而AI Agent能够根据实时情境动态调整行为。

第三步：发布与元信息填写

内容输入完成后，AI自动点击发布按钮，并在弹出的发布设置中填写分类、标签等元信息，最终完成文章发布。

从发布后的文章详情页来看，AI生成的内容排版清晰、结构合理，具备一定的可读性。整个流程从输入提示词到文章上线，实现了真正的"端到端自动化"。

优缺点分析：酷炫但尚不成熟

三个明显的短板

1. 执行速度偏慢

演示视频中进行了大量快进处理，说明实际执行时间相当长。AI每一步操作都需要经历：分析当前页面状态 → 决策下一步动作 → 执行操作 → 等待页面响应 → 再次分析。这个循环在每个操作步骤都会产生延迟。相比之下，人类完成同样的操作可能只需要几分钟，而AI可能需要十几分钟甚至更长时间。这种速度差距主要来自两方面：一是AI每次决策都需要调用大语言模型进行推理，模型的响应时间本身就有延迟；二是AI需要在每一步操作后重新获取和分析页面状态，这个"感知-思考-行动"的循环远比人类的直觉操作要慢。

2. Token消耗巨大

整个流程下来消耗约 1万个Token。这个数字背后有其技术原因：当AI通过MCP读取网页的DOM结构时，一个现代网页的DOM树序列化后可能包含数千甚至上万个Token——页面中的每一个按钮、链接、文本框、图片标签都会被转化为文本描述传递给AI。而且，浏览器自动化是一个多轮交互过程，AI每执行一步操作就需要重新获取页面状态，这意味着DOM信息会被反复传递。再加上截图的视觉信息处理、AI自身的推理过程、以及上下文窗口中累积的历史操作记录，Token消耗会随着操作步骤的增加而快速膨胀。按照当前API定价，这个成本并不低，如果是批量操作场景，费用会进一步放大。

3. 执行动作不可控

UP主用了一个很形象的比喻——"有点像抽卡"。AI的操作有时会"变形"，比如点错位置、误判元素、操作顺序出错等。这种不确定性意味着同样的任务，每次执行的成功率并不稳定。这个问题的根源在于大语言模型的概率性本质——模型的每次输出都是基于概率分布的采样结果，而非确定性的逻辑运算。同样的页面状态，模型在不同时刻可能会做出不同的操作决策。此外，现代网页的复杂性也增加了出错概率：动态加载的内容、弹窗遮挡、相似的按钮元素等都可能导致AI误判。

核心优势：全自动化的想象空间

尽管存在上述问题，这套方案最大的亮点在于：AI从内容生产到内容分发实现了闭环。传统的AI写作工具只负责生成文本，用户仍需手动复制粘贴、排版、发布。而这套方案让AI"自产自销"，省去了所有中间环节。

这实际上体现了AI领域一个重要的发展趋势：从"对话式AI"向"行动式AI"（即AI Agent）的范式转变。过去的AI只能在对话框里回答问题、生成文本，本质上是一个"顾问"角色；而AI Agent则具备感知环境、制定计划、执行操作、根据反馈调整策略的完整行动能力，更像是一个"执行者"。2024年以来，AI Agent已经成为整个行业最热门的研究和应用方向之一，各大科技公司都在积极布局。本次演示中的"AI自动发布文章"虽然只是一个简单的场景，但它清晰地展示了AI Agent"感知-规划-执行-反馈"的完整工作循环。

应用前景与思考

Chrome DevTools MCP不仅仅能发文章

虽然本次演示聚焦于"写文章并发布"这一场景，但Chrome DevTools MCP的能力远不止于此。理论上，任何需要在浏览器中完成的重复性操作都可以交给AI：

• 批量填写表单
• 自动化数据采集
• 定期检查网页状态并生成报告
• 跨平台内容同步分发

与Selenium、Playwright等传统自动化工具的对比

相比Selenium、Playwright等传统浏览器自动化工具，AI驱动的方案有一个本质区别：它不需要预先编写精确的脚本。

这里有必要简单介绍一下这两个传统工具的背景。Selenium 诞生于2004年，是最早也是最广泛使用的浏览器自动化框架，它通过WebDriver协议控制浏览器，支持几乎所有主流编程语言，在自动化测试领域有着统治级的地位。Playwright 则是微软于2020年推出的新一代浏览器自动化工具，它直接基于CDP等浏览器原生协议通信，在速度、稳定性和现代Web特性支持方面相比Selenium有显著提升，近年来增长势头迅猛。这两个工具都需要开发者针对每个页面元素编写精确的CSS选择器或XPath表达式来定位元素，然后编写具体的操作逻辑。一旦目标网站改版——比如按钮的class名称变了、页面布局调整了——自动化脚本就可能立即失效，需要人工排查和修复。

而AI驱动的方案则完全不同。AI可以通过"理解"页面的语义内容来动态决策——即使按钮的样式和位置发生了变化，只要按钮上的文字仍然是"发布"，AI就能识别并正确操作。这种基于语义理解而非精确定位的方式，赋予了AI方案更强的适应性和容错能力。

当然，这种灵活性目前是以速度和稳定性为代价的。在实际生产环境中，传统自动化工具在可靠性方面仍然占据明显优势。两种方案的适用场景也有所不同：对于结构稳定、需要高频执行的任务，传统脚本方案更合适；对于页面多变、一次性或低频的任务，AI驱动方案的优势则更加明显。

未来展望

随着MCP生态的完善和大语言模型能力的提升，AI操控浏览器的速度和准确率都有望大幅改善。当执行成本降低、稳定性提升到一定程度时，这类"AI Agent + 浏览器"的组合很可能成为个人效率工具的标配。

事实上，这个方向已经吸引了大量创业公司和开源项目的关注。除了谷歌的Chrome DevTools MCP之外，还有诸如Browser Use、Stagehand等开源项目也在探索AI驱动的浏览器自动化方案。可以预见，随着竞争的加剧和技术的迭代，这类工具的易用性和可靠性将会快速提升。未来，普通用户可能只需要用自然语言描述一个任务——比如"帮我把这篇文章同时发布到掘金、知乎和CSDN"——AI就能自动完成所有操作，真正实现"动嘴不动手"的工作方式。

总结

Chrome DevTools MCP为AI操控浏览器提供了一条官方且标准化的路径。虽然当前阶段在速度、Token成本和稳定性方面还有明显不足，但它展示了AI从"内容生成"走向"任务执行"的重要一步。对于喜欢尝鲜的开发者来说，Chrome DevTools MCP配合Claude Code的这套浏览器自动化方案，是一个值得关注和动手实验的方向。