1. 项目概述当AI智能体学会“看”网页最近在折腾一个挺有意思的东西我把它叫做“DOMSteer”。简单来说这是一个能让AI智能体像人一样“看见”并“操作”网页界面的框架。它不是简单地调用API也不是基于图像识别而是直接与网页的DOM文档对象模型结构打交道实现一种“原位辅助”的能力。想象一下这个场景你正在一个复杂的后台管理系统里填写表单或者在一个满是选项的配置页面里不知所措。这时候如果有一个智能助手不仅能理解你的问题比如“帮我把这个用户的权限改成编辑”还能直接“伸手”在网页上帮你点选、输入、提交整个过程就像有一个隐形的专家坐在你旁边帮你操作一样。DOMSteer要做的就是这件事——让AI智能体获得这种基于DOM的“动手能力”。它的核心价值在于将大语言模型的理解与决策能力与浏览器环境的精确操控能力结合起来解决那些需要复杂、多步骤交互的网页任务自动化问题。无论是电商运营、数据录入、系统巡检还是软件测试只要是在浏览器里完成的工作它都有可能帮上忙。2. 核心思路为什么是DOM而不是图像或API在构思DOMSteer时我们面临几个主流技术路线的选择基于图像识别的RPA机器人流程自动化、基于浏览器API的自动化如Puppeteer、Selenium以及我们最终选择的基于DOM操作的路径。这里详细拆解一下背后的思考。2.1 图像识别路线的局限性基于图像识别或计算机视觉的方案其优点是“所见即所得”不关心底层代码模仿人类视觉。但缺点也很明显稳定性差UI样式、主题、分辨率、字体大小的微小变化都可能导致识别失败。一个按钮颜色从蓝色变成绿色可能就让AI“找不着北”了。效率低下需要持续截屏、推理计算开销大响应速度慢。缺乏语义AI看到的是一个“色块”它很难理解这个色块是一个“提交按钮”、一个“下拉菜单”还是一个“警告弹窗”除非进行额外的、复杂的上下文训练。2.2 纯API自动化路线的不足像Puppeteer这样的工具非常强大可以编程控制浏览器的几乎所有行为。但它本质上是一个“脚本执行器”缺乏“智能”。你需要为它编写精确的、步骤固定的脚本。如果页面结构变了脚本就会报错。它无法处理“如果这个按钮没找到试试另一种方法”这类需要理解和变通的情况。2.3 DOM操作路线的优势与挑战DOM是浏览器对网页结构的内部表示一个由标签、属性、文本节点构成的树。选择基于DOM操作是基于以下考量优势高精度与稳定性通过CSS选择器、XPath或属性定位元素只要页面核心逻辑和DOM结构不变定位就极其稳定。比图像识别可靠得多。富语义信息DOM节点天然携带语义信息。一个button标签大概率是可点击的一个input typetext是需要填写的一个select是下拉框。这些信息可以直接被AI理解。高效轻量获取和解析DOM树是浏览器的原生能力速度极快数据量也比图像小几个数量级。可模拟复杂交互不仅能点击和输入还能获取元素状态是否可见、是否禁用、当前值、监听事件、执行复杂的JavaScript操作实现高度拟人的交互。挑战DOM结构的复杂性现代网页的DOM树可能非常庞大和嵌套包含大量无关的样式、脚本节点。如何从中提取出对任务有用的、简洁的“语义视图”是一大难点。动态内容处理单页应用SPA会动态更新DOM如何捕获这些变化并同步给智能体安全与权限浏览器安全策略如跨域限制、Shadow DOM会阻碍对某些DOM的访问。DOMSteer的设计目标就是最大化DOM路线的优势同时系统性地解决这些挑战。3. 系统架构与核心模块设计DOMSteer不是一个单一的工具而是一个包含多个协同模块的框架。下图展示了其核心架构注此处用文字描述架构图实际博文中可根据发布平台支持情况决定是否嵌入 整个系统可以看作一个“感知-思考-行动”的循环运行在Chrome扩展环境中。3.1 感知层DOM提取与抽象模块这是智能体的“眼睛”。它的任务不是把整个DOM树丢给AI那太“嘈杂”了。我们需要一个“过滤器”和“翻译器”。功能注入到目标网页的Content Script监听DOM变化。核心工作简化与过滤移除script,style合并纯文本节点过滤掉仅用于布局的div和span。目标是保留有交互语义的节点可操作元素和关键信息节点文本内容。属性增强为每个元素计算并附加对AI有用的属性is_visible: 是否在视口内且未被遮挡。is_interactable: 是否可点击、可输入非disabled。importance_score: 基于位置、大小、标签类型如button比div得分高的启发式评分。结构扁平化与语义分组将深度嵌套的DOM树转换为一个相对扁平的、带层级关系的元素列表。同时将逻辑上属于一组的元素如表单域和其标签关联起来。输出一个结构化的JSON对象描述了当前页面的“可操作界面状态”。这个JSON远比原始DOM简洁但包含了所有必要信息。3.2 思考层智能体决策引擎这是智能体的“大脑”。它接收来自感知层的页面状态和用户指令决定下一步做什么。核心组件一个大语言模型LLM例如GPT-4、Claude 3或开源的DeepSeek-V2等。关键是要选择支持长上下文、且推理能力强的模型。提示词工程这是成败的关键。我们给AI的指令Prompt需要精心设计角色定义“你是一个网页操作专家可以通过操作DOM元素来完成任务。”输入格式说明明确告知AI它将收到一个页面状态JSON并解释其中字段的含义。动作规范定义一套AI可以执行的原子操作例如CLICK(selector),TYPE(selector, text),SELECT(selector, option_value),SCROLL(direction),WAIT(condition),EXTRACT_DATA(selector)。推理链要求要求AI逐步思考Chain-of-Thought先分析目标再评估当前页面状态最后选择最合适的动作。必须输出JSON格式的指令。工作流程将“页面状态JSON”和“用户指令”组装成Prompt发送给LLM。LLM返回一个JSON例如{action: CLICK, selector: #submit-button, reason: 用户要求提交表单这是提交按钮。}3.3 行动层指令执行与安全模块这是智能体的“手”。它负责将AI的决策安全、准确地转化为浏览器中的真实操作。指令解析器验证AI返回的JSON格式是否正确动作是否在允许列表中。安全沙箱这是至关重要的部分防止AI执行危险操作。操作白名单只允许执行预定义的安全操作点击、输入等。禁止执行如eval()、修改window.location到未知域名等危险行为。选择器验证在执行前尝试用document.querySelector查找元素。如果找不到或找到多个元素则视为无效指令触发错误处理流程。操作节流与确认对于“删除”、“确认支付”等高风险操作可以设置为需要用户二次确认。执行器通过Chrome扩展的API在页面上执行验证通过的操作。同时它还会监控执行结果如点击后是否触发了页面跳转或DOM更新并将结果反馈给感知层开启下一个“感知-思考-行动”循环。3.4 控制中枢Chrome扩展后台服务协调以上所有模块。管理用户会话、维护操作历史、处理与LLM服务的通信、提供用户配置界面如设置API密钥、选择模型、定义高风险操作列表等。4. 实操从零搭建一个基础版DOMSteer理论讲完了我们动手实现一个简化版让你感受一下整个流程。我们将以开发一个Chrome扩展为核心。4.1 环境准备与项目初始化首先创建一个新的目录作为项目根目录。mkdir domsteer-demo cd domsteer-demo我们需要一个标准的Chrome扩展结构。创建以下文件和文件夹domsteer-demo/ ├── manifest.json # 扩展配置文件 ├── background.js # 后台服务脚本 ├── content.js # 注入到页面的内容脚本感知层 ├── popup.html # 扩展弹出窗口的界面 ├── popup.js # 弹出窗口的逻辑 └── icons/ # 扩展图标目录 ├── icon16.png ├── icon48.png └── icon128.pngmanifest.json是扩展的“身份证”我们配置基础信息和权限{ manifest_version: 3, name: DOMSteer Demo, version: 1.0, description: 一个基于DOM操作的GUI智能体原型, permissions: [ activeTab, scripting, storage ], host_permissions: [ all_urls ], background: { service_worker: background.js }, content_scripts: [ { matches: [all_urls], js: [content.js], run_at: document_idle } ], action: { default_popup: popup.html, default_icon: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }注意host_permissions设置为all_urls是为了演示方便。在产品化时应遵循最小权限原则改为[*://*.your-target-domain.com/*]。4.2 感知层实现内容脚本content.js这个脚本负责抓取和简化DOM。我们实现一个简化版的提取器。// content.js (function() { use strict; // 判断元素是否可见 function isElementVisible(el) { if (!el) return false; const rect el.getBoundingClientRect(); const style window.getComputedStyle(el); return !!(rect.width rect.height style.visibility ! hidden style.display ! none); } // 判断元素是否可交互 function isElementInteractable(el) { if (!el || !isElementVisible(el)) return false; if (el.disabled) return false; // 简单判断如果是表单元素、链接、按钮或有点击事件监听器则认为可交互 const tagName el.tagName.toLowerCase(); const interactableTags [input, button, a, select, textarea]; if (interactableTags.includes(tagName)) return true; // 这里可以更复杂比如检查是否有onclick属性或事件监听器 return false; } // 计算元素的重要性分数简化版 function calculateImportance(el) { let score 0; const tagName el.tagName.toLowerCase(); const role el.getAttribute(role); const area el.offsetWidth * el.offsetHeight; // 标签权重 const tagWeights { button: 10, input: 8, a: 6, select: 5, textarea: 5 }; score tagWeights[tagName] || 1; // ARIA角色权重 if (role button || role link) score 5; // 面积权重越大越重要 if (area 1000) score 3; else if (area 100) score 1; return score; } // 生成唯一且稳定的CSS选择器简化版生产环境需用更健壮的库 function generateSelector(el) { if (el.id) return #${el.id}; // 简单路径生成可能不稳定仅用于演示 const path []; let current el; while (current current.nodeType Node.ELEMENT_NODE) { let selector current.tagName.toLowerCase(); if (current.className typeof current.className string) { const classes current.className.trim().split(/\s/).filter(c c); if (classes.length 0) { selector . classes.join(.); } } path.unshift(selector); if (current.id) break; // 有ID就终止保证唯一性 current current.parentElement; } return path.join( ); } // 主函数提取页面可操作元素状态 function extractPageState() { const allElements document.querySelectorAll(*); const interactiveElements []; allElements.forEach(el { if (isElementInteractable(el)) { const selector generateSelector(el); // 避免重复选择器生成方法不完美可能导致重复 if (interactiveElements.some(item item.selector selector)) return; const tagName el.tagName.toLowerCase(); const type el.type || ; const name el.name || ; const value el.value || ; const text el.textContent?.trim().substring(0, 50) || ; // 截取前50字符 const placeholder el.placeholder || ; interactiveElements.push({ selector: selector, tagName: tagName, type: type, name: name, value: value, text: text, placeholder: placeholder, visible: isElementVisible(el), importance: calculateImportance(el) }); } }); // 按重要性排序 interactiveElements.sort((a, b) b.importance - a.importance); // 返回页面状态摘要 return { url: window.location.href, title: document.title, timestamp: Date.now(), interactiveElements: interactiveElements.slice(0, 50) // 只返回最重要的50个元素 }; } // 监听来自popup或background的请求 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action GET_PAGE_STATE) { const state extractPageState(); sendResponse({ success: true, state: state }); } return true; // 保持消息通道异步打开 }); console.log(DOMSteer Content Script loaded.); })();4.3 思考与行动层实现弹出窗口与后台服务popup.html提供一个简单的用户界面!DOCTYPE html html head style body { width: 400px; padding: 15px; font-family: sans-serif; } textarea, button { width: 100%; margin-top: 10px; box-sizing: border-box; } textarea { height: 80px; } #status { margin-top: 10px; padding: 10px; border-radius: 4px; } .success { background-color: #d4edda; color: #155724; } .error { background-color: #f8d7da; color: #721c24; } .info { background-color: #d1ecf1; color: #0c5460; } /style /head body h3DOMSteer 控制器/h3 p当前页面: span idcurrent-url.../span/p textarea iduser-instruction placeholder输入你的指令例如在搜索框输入AI然后点击搜索按钮/textarea button idexecute-btn执行指令/button div idstatus/div script srcpopup.js/script /body /htmlpopup.js处理用户交互并与content script、background script通信// popup.js document.addEventListener(DOMContentLoaded, function() { const userInstructionInput document.getElementById(user-instruction); const executeButton document.getElementById(execute-btn); const statusDiv document.getElementById(status); const currentUrlSpan document.getElementById(current-url); // 获取当前活动标签页的URL chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0]) { currentUrlSpan.textContent new URL(tabs[0].url).hostname; } }); executeButton.addEventListener(click, async function() { const instruction userInstructionInput.value.trim(); if (!instruction) { showStatus(请输入指令。, error); return; } showStatus(正在分析页面并执行..., info); executeButton.disabled true; try { // 1. 获取当前标签页ID const [tab] await chrome.tabs.query({active: true, currentWindow: true}); // 2. 向content script发送消息获取页面状态 const pageStateResponse await chrome.tabs.sendMessage(tab.id, {action: GET_PAGE_STATE}); if (!pageStateResponse || !pageStateResponse.success) { throw new Error(无法获取页面状态。请刷新页面重试。); } const pageState pageStateResponse.state; // 3. 构建Prompt调用LLM这里模拟一个简单的本地逻辑实际应调用API // 模拟一个非常简单的规则引擎代替真实的LLM调用 const aiResponse simulateLLM(instruction, pageState); // 4. 执行AI返回的动作 if (aiResponse.action CLICK aiResponse.selector) { await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: (selector) { const el document.querySelector(selector); if (el) { el.click(); return 已点击: ${selector}; } else { throw new Error(未找到元素: ${selector}); } }, args: [aiResponse.selector] }); showStatus(执行成功: ${aiResponse.reason}, success); } else if (aiResponse.action TYPE aiResponse.selector aiResponse.text) { await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: (selector, text) { const el document.querySelector(selector); if (el (el.tagName.toLowerCase() input || el.tagName.toLowerCase() textarea)) { el.value text; el.dispatchEvent(new Event(input, { bubbles: true })); // 触发输入事件 return 已在 ${selector} 输入: ${text}; } else { throw new Error(无法向元素 ${selector} 输入文本。); } }, args: [aiResponse.selector, aiResponse.text] }); showStatus(执行成功: ${aiResponse.reason}, success); } else { showStatus(AI返回了未知或无法执行的动作: ${JSON.stringify(aiResponse)}, error); } } catch (error) { console.error(执行出错:, error); showStatus(出错: ${error.message}, error); } finally { executeButton.disabled false; } }); // 模拟LLM的函数实际项目中替换为真实的API调用 function simulateLLM(instruction, pageState) { // 这是一个极其简化的演示逻辑 const elements pageState.interactiveElements; const lowerInstruction instruction.toLowerCase(); // 规则1寻找包含“搜索”字样的输入框和按钮 if (lowerInstruction.includes(搜索)) { const searchInput elements.find(el (el.tagName input (el.type text || el.type search)) (el.placeholder.toLowerCase().includes(搜索) || el.name.toLowerCase().includes(search)) ); const searchButton elements.find(el el.tagName button el.text.toLowerCase().includes(搜索) ); if (searchInput lowerInstruction.includes(输入)) { // 提取要搜索的词这里简单处理 const match instruction.match(/输入\s*[]?([^])[]?/); const searchText match ? match[1] : AI; return { action: TYPE, selector: searchInput.selector, text: searchText, reason: 在搜索框输入“${searchText}”。 }; } else if (searchButton) { return { action: CLICK, selector: searchButton.selector, reason: 点击搜索按钮。 }; } } // 规则2寻找提交按钮 if (lowerInstruction.includes(提交)) { const submitBtn elements.find(el (el.tagName input el.type submit) || (el.tagName button (el.type submit || el.text.toLowerCase().includes(提交))) ); if (submitBtn) { return { action: CLICK, selector: submitBtn.selector, reason: 点击提交按钮。 }; } } // 默认返回一个错误或等待指令 return { action: WAIT, reason: 无法理解指令或未找到对应元素。 }; } function showStatus(message, type) { statusDiv.textContent message; statusDiv.className type; statusDiv.style.display block; setTimeout(() { statusDiv.style.display none; }, 5000); } });background.js在Manifest V3中是service worker这里我们先实现一个简单的版本用于未来扩展如长时任务管理// background.js chrome.runtime.onInstalled.addListener(() { console.log(DOMSteer扩展已安装。); }); // 可以在这里添加更多后台监听事件例如监听所有标签页的更新等。4.4 加载与测试打开Chrome浏览器进入chrome://extensions/。开启右上角的“开发者模式”。点击“加载已解压的扩展程序”选择你的domsteer-demo文件夹。扩展加载成功后打开任何一个网页例如百度。点击扩展图标弹出控制窗口。在文本框中输入“在搜索框输入人工智能然后点击搜索按钮”注意我们的模拟LLM规则只识别“搜索”和“输入”关键词且对选择器匹配很粗糙。点击“执行指令”。如果页面元素能被我们简单的规则匹配到你会看到搜索框被填入了文字。重要提示这只是一个极度简化的原型。simulateLLM函数是硬编码的规则非常脆弱。真实系统中这里必须替换为调用真实的LLM API如OpenAI、Anthropic或本地部署的模型并设计复杂的Prompt和结果解析逻辑。5. 进阶实现集成真实LLM与健壮化要让DOMSteer真正可用必须用真实的LLM替换掉我们简陋的规则引擎并大幅提升各个模块的健壮性。5.1 集成OpenAI API示例修改popup.js中的simulateLLM函数改为真实的API调用。你需要一个OpenAI API密钥。// 在popup.js顶部添加你的API密钥注意前端明文存储密钥不安全生产环境必须通过后台服务中转 const OPENAI_API_KEY sk-your-api-key-here; // 警告仅为演示实际应通过后台服务代理 async function callRealLLM(instruction, pageState) { const prompt 你是一个网页操作自动化助手。你的任务是根据用户指令和当前网页的状态决定下一步对哪个DOM元素执行什么操作。 当前网页URL: ${pageState.url} 网页标题: ${pageState.title} 当前页面上的可交互元素按重要性排序: ${JSON.stringify(pageState.interactiveElements, null, 2)} 用户指令: ${instruction} 请严格按照以下JSON格式输出你的决策 { thought: 你的思考过程分析用户意图和页面元素。, action: 动作类型只能是以下之一CLICK, TYPE, SELECT, SCROLL_UP, SCROLL_DOWN, WAIT, FINISH, selector: CSS选择器字符串用于唯一标识目标元素仅CLICK/TYPE/SELECT动作需要。, text: 需要输入的文本内容仅TYPE动作需要。, reason: 简短说明选择这个动作和元素的理由。 } 注意 1. 选择器必须从上面提供的“interactiveElements”列表的“selector”字段中精确选取。 2. 如果用户指令已完成或无法理解动作设为“FINISH”。 3. 确保你的输出是且仅是一个合法的JSON对象。 ; try { const response await fetch(https://api.openai.com/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${OPENAI_API_KEY} }, body: JSON.stringify({ model: gpt-4o-mini, // 或 gpt-4-turbo messages: [{ role: user, content: prompt }], temperature: 0.1, // 低随机性保证输出稳定 max_tokens: 500 }) }); if (!response.ok) { throw new Error(API请求失败: ${response.status}); } const data await response.json(); const content data.choices[0]?.message?.content?.trim(); // 尝试从返回内容中解析JSON const jsonMatch content.match(/json\n?([\s\S]*?)\n?/) || content.match(/{[\s\S]*}/); const jsonString jsonMatch ? jsonMatch[1] || jsonMatch[0] : content; return JSON.parse(jsonString); } catch (error) { console.error(调用LLM失败:, error); return { action: WAIT, reason: LLM处理失败: ${error.message} }; } } // 然后在按钮点击事件中用 callRealLLM 替换 simulateLLM5.2 健壮化改进要点选择器生成使用稳健的库如jquery的$.fn.getPath思路或开源库unique-selector生成唯一且稳定的CSS选择器能抵抗DOM微小变化。元素状态验证在执行动作前再次检查元素是否存在、是否可见、是否可交互。因为从获取状态到执行动作之间页面可能已发生变化。动作重试与回退策略如果点击后页面没有预期变化如跳转或DOM更新应能设定超时和重试机制或尝试备用选择器。操作日志与回滚记录每一步操作在任务失败或用户撤销时有可能进行回滚虽然DOM操作回滚非常复杂。Shadow DOM支持现代Web组件大量使用Shadow DOM。需要递归遍历shadowRoot来获取内部的交互元素。后台服务代理将LLM API调用放在后台服务background.js或独立的服务器中保护API密钥并可以管理请求队列、缓存和错误重试。6. 常见问题与实战避坑指南在实际开发和测试中我遇到了不少坑。这里总结一下希望能帮你节省时间。6.1 选择器稳定性最大的痛点问题自动生成的CSS选择器非常脆弱。开发人员加个div、改个类名选择器就失效了。解决思路多属性组合不要只依赖id或单个class。生成像input[nameemail].form-control[data-testidsignup-email]这样的复合选择器。使用相对定位如果目标元素没有稳定属性尝试用其邻近的、有稳定属性的兄弟或父元素进行相对定位例如#stable-header div .target-button。备用选择器列表为同一个元素生成2-3个不同优先级的备选选择器。主选择器失败时按顺序尝试备选。视觉定位作为最后手段在DOM选择器全部失效时可以回退到计算元素的相对位置如“距离顶部100px左侧200px”但这是下策兼容性差。6.2 处理动态加载与SPA问题页面内容通过Ajax或前端框架动态加载初始的DOM抓取会遗漏这些内容。解决方案MutationObserver监听在content.js中设置MutationObserver监听整个document或特定容器的子节点、属性变化。当检测到新增的交互元素时更新页面状态缓存并通知智能体。主动等待策略在AI的动作序列中加入显式的WAIT动作直到某个特定元素出现或某个条件满足。例如点击“加载更多”后等待新的商品卡片元素出现。6.3 AI的“幻觉”与指令解析错误问题LLM可能会“捏造”一个不存在的选择器或者误解用户指令。缓解措施严格的输出约束在Prompt中强制要求AI必须从提供的元素列表里选择并严格限定输出格式。使用JSON Schema或类似技术描述输出。后置验证在执行前用document.querySelectorAll验证选择器。如果返回结果不为1不是唯一匹配则拒绝执行并将错误信息反馈给AI要求它重新决策。分步确认高风险操作对于删除、付款、提交重要表单等操作不要完全自动化。可以设计为AI高亮目标元素由用户手动点击确认。6.4 性能优化问题频繁抓取和发送整个页面的交互元素列表数据量大影响性能和LLM的Token消耗。优化方案增量更新利用MutationObserver只发送发生变化的那部分DOM元素。智能过滤进一步过滤元素。例如只关注视口viewport内的元素或者重要性分数高于某个阈值的元素。页面分区将页面划分为几个逻辑区域如导航栏、侧边栏、主内容区一次只分析和处理一个区域。本地轻量模型对于简单的意图识别如“点击下一个”、“提交”可以先尝试用本地规则或小模型处理复杂指令再上大模型。7. 应用场景与未来展望DOMSteer这类技术打开了一扇新的大门其应用远不止于简单的自动化脚本。7.1 核心应用场景复杂工作流自动化跨多个系统如CRM、ERP、OA的数据录入与同步处理需要大量点击和条件分支的日常任务。无障碍辅助为视障或行动不便的用户提供强大的语音或手势控制网页的能力AI理解指令后直接操作DOM比传统的屏幕阅读器更主动、更智能。软件测试与QA自动生成和执行端到端E2E测试用例。测试人员只需用自然语言描述测试场景AI就能执行并报告结果。尤其适合测试UI频繁变化的敏捷开发。实时操作指导与辅助集成到客服或培训系统。新员工在操作复杂系统时AI助手可以实时高亮下一步该点的按钮并自动填写部分字段。RPA的增强与传统RPA工具结合。RPA负责流程调度和桌面级操作DOMSteer负责处理Web应用中那些难以用图像识别或固定坐标搞定的部分。7.2 技术演进方向多模态融合单纯的DOM信息有时不足以理解UI比如一个图形化的图表。未来需要融合视觉信息截图和DOM信息让AI对界面的理解更接近人类。记忆与学习能力智能体应该能记住过去操作过的页面结构和成功路径形成“经验”。再次遇到类似页面时可以更快更准地操作实现持续学习。更自然的交互从单轮指令发展到多轮对话。用户可以说“不对不是那个是下面那个蓝色的链接”AI能理解并修正。标准化与开源出现类似“网页操作指令集”的标准化描述语言以及开源的、针对不同前端框架React, Vue, Angular优化的DOM语义化提取库降低实现门槛。DOMSteer的理念是让AI从“旁观的分析者”变为“沉浸的操作者”。这条路还很长挑战很多从选择器的稳定性到AI决策的可靠性每一个环节都需要深耕。但它的潜力是巨大的——它试图用机器理解的方式去桥接人类模糊的自然语言意图与机器精确的结构化操作之间的鸿沟。我实现的这个demo只是一个起点希望它能为你提供一个清晰的思路和可行的起点。
