OpenClaw 只能手动写脚本？我用 Chrome 插件实现了“录制即生成“

OpenClaw 只能手动写脚本我用 Chrome 插件实现了录制即生成系列SmartClaw × OpenClaw企业级浏览器自动化实战第②篇日期2026-04-27标签OpenClaw, Chrome Extension, MV3, DSL 生成, 零代码自动化适合谁看前端开发、平台开发、做过录制器/回放器的人前言OpenClaw 的爆火用 AI Prompt 的方式展示了让模型操作浏览器的惊艳操作。但实际使用后你会发现一个致命问题每次执行都需要手写自然语言指令而且模型理解偏差导致执行失败率高达 40%。比如你想让 OpenClaw 登录系统需要写点击登录按钮输入用户名 admin输入密码 123456然后点击提交但如果页面改版了或者按钮文字变了这段指令就失效了。你需要重新调试 Prompt平均需要 3-5 次才能成功。这件事SmartClaw 用 Chrome 扩展实现了零代码录制成功率从 60% 提升到 92%。本文是系列第②篇不讲概念直接拆解 SmartClaw 的录制引擎如何实现用户操作 → DSL 脚本的自动转换。如果你刚好是从 OpenClaw 这个热点点进来的那这篇文章更想回答的是另一个问题从AI 理解指令走到确定性执行中间到底还差什么这篇你会看到 4 个核心问题为什么 OpenClaw 的 Prompt 方式在企业场景不够稳定为什么content.js只监听少量事件而不是全量 DOM 行为为什么 selector 一定要打分而不是随便取一个能用的为什么输入事件必须去抖否则生成的 DSL 会完全不可用一、OpenClaw vs SmartClaw两种自动化思路对比1.1 OpenClaw 的工作流程用户手写 Prompt → AI 模型理解 → 生成操作步骤 → 执行可能失败→ 重新调试 Prompt优点自然语言交互门槛低可以处理模糊指令缺点依赖 AI 模型能力执行结果不确定无法复用每次都要重新描述调试成本高平均 3-5 次才能成功对动态渲染的 SPA 应用识别率低1.2 SmartClaw 的工作流程用户操作 → content.js 捕获 → 结构化事件流 → DSL YAML → 可重复执行优点录制一次成功率 92%可无限次复用确定性执行不依赖 AI 模型支持变量插值同一模板适配不同数据完整的版本管理和审计日志缺点首次使用需要学习录制操作对极度复杂的交互可能需要手动调整 DSL1.3 对比数据维度OpenClawSmartClaw上手难度⭐⭐⭐⭐⭐⭐⭐⭐⭐执行成功率60%92%可复用性⭐⭐⭐⭐⭐⭐⭐调试成本高3-5 次低录制即可适用场景个人演示/实验企业生产环境二、Chrome Extension 三文件架构如果把这三部分职责混在一起会出现两个典型问题content.js太重页面兼容性差容易影响目标页面行为background.js只做转发不做缓冲和批量会导致事件上报过于频繁所以 SmartClaw 的做法是content.js负责贴近页面采集background.js负责与浏览器扩展环境打交道服务端负责真正的理解动作。这背后其实是一个很经典的工程取舍离页面越近越适合采集离业务越近越适合理解。如果把采集和理解都塞进content.js最终得到的通常不是强大的录制器而是一个又重又脆的页面脚本。recorder-extension/ ├── manifest.json # 权限声明 ├── content.js # 注入目标页面监听 DOM 事件 ├── background.js # Service Worker接收消息并上报 Server └── popup.js # 弹窗 UI控制录制开始/停止2.1 content.js —— 注入目标页面// content.js 核心逻辑实际项目代码((){// 防重复注入if(window.__sc_recorder_injected__)return;window.__sc_recorder_injected__true;letenabledfalse;letsessionId;letseqCounter0;letinputDebounceTimernull;// 监听来自 popup 的状态变化chrome.storage.onChanged.addListener((changes,area){if(area!local)return;if(changes.recEnabled!undefined)enabled!!changes.recEnabled.newValue;if(changes.sessionId!undefined)sessionIdchanges.sessionId.newValue||;});// 构建 Selector 候选集functionbuildSelectors(el){consttestIdel.getAttributeel.getAttribute(data-testid)||;constroleel.getAttributeel.getAttribute(role)||;constariaLabelel.getAttributeel.getAttribute(aria-label)||(el.innerText||).trim().slice(0,60);constariarole?role${role}${ariaLabel?[name${ariaLabel}]:}:;constcssel.id?#${el.id}:(el.tagName||).toLowerCase();return{testId,aria,css,xpath:};}// 上报事件functionemit(type,el){if(!enabled||!sessionId)return;constpayload{sessionId,seq:seqCounter,ts:Date.now(),type,page:{url:location.href,title:document.title},target:el?{tag:el.tagName||,text:(el.innerText||).trim().slice(0,120),value:String(el.value!null?el.value:).slice(0,200),selectors:buildSelectors(el),}:null};chrome.runtime.sendMessage({source:smartclaw,payload});}// 点击监听document.addEventListener(click,e{constele.target.closest(button,a,input,textarea,select,[rolebutton]);if(el)emit(CLICK,el);},true);// 输入监听防抖500ms 内最后一次值document.addEventListener(input,e{constele.target;consttag(el.tagName||).toLowerCase();if(tag!inputtag!textarea)return;clearTimeout(inputDebounceTimer);inputDebounceTimersetTimeout(()emit(INPUT,el),500);},true);})();关键设计防重复注入window.__sc_recorder_injected__标记输入防抖500ms 内多次击键只取最后一次避免产生 N 个 fill 步骤只监听有意义的元素button,a,input,textarea,select,[rolebutton]这里特别强调第三点不是所有事件都值得录。如果你把mousemove、focus、keydown都录下来得到的是一堆看起来很全实际上完全不可复用的噪音。这也是很多录制器 Demo 很惊艳、上线后根本不能用的核心原因Demo 关注的是录到了多少真正可用的系统关注的是留下来的是否值得执行三、Selector 优先级打分算法录制到的 DOM 元素可能有多种选择器哪种最稳定优先级高 → 低 >// EventToDslService.java 核心片段privateStringselectBestSelector(RecorderEventevent){//>if(hasValue(event.getSelectorTestid())){return[data-testidevent.getSelectorTestid()];}// CSS id 选择器次之if(hasValue(event.getSelectorCss())event.getSelectorCss().startsWith(#)){returnevent.getSelectorCss();}// aria 语义选择器if(hasValue(event.getSelectorAria())){returnevent.getSelectorAria();}// 兜底 CSSreturnhasValue(event.getSelectorCss())?event.getSelectorCss():*;}这块真正的经验在于不要迷信#id很多现代前端框架生成的 ID 是动态的今天是#input-182明天可能就是#input-241。所以#id并不是天然比aria-label更稳定。data-testid最适合自动化因为它的设计目的就是给程序识别不会因为 UI 文字微调而轻易失效。innerText适合按钮不适合输入框按钮的显示文字通常稳定但输入框里的 placeholder、label、旁边说明文案经常是多个来源拼出来的直接拿来做 selector 风险很大。在真实项目里selector 评分本质上不是美学问题而是维护成本问题你今天选的 selector决定了这个模板是能稳定活 6 个月还是下周页面一改就报废。四、输入去抖与变量抽取4.1 为什么要去抖用户在输入框打字北京天气会产生 4 个input事件B → Bei → Beij → Beijing如果不去抖会生成 4 个 fill 步骤steps:-action:fillparams:selector:#searchvalue:B-action:fillparams:selector:#searchvalue:Bei-action:fillparams:selector:#searchvalue:Beij-action:fillparams:selector:#searchvalue:Beijing这不仅浪费执行时间还可能导致页面响应异常每次输入都触发搜索。SmartClaw 的做法500ms 内只保留最后一次输入值。// content.js 输入防抖letinputDebounceTimernull;document.addEventListener(input,e{constele.target;consttag(el.tagName||).toLowerCase();if(tag!inputtag!textarea)return;clearTimeout(inputDebounceTimer);inputDebounceTimersetTimeout(()emit(INPUT,el),500);},true);生成的 DSL 只有一个 fill 步骤steps:-action:fillparams:selector:#searchvalue:${keyword}# 自动识别为变量4.2 变量自动抽取如果用户输入的内容在不同执行场景中会变化SmartClaw 会自动将其识别为变量// EventToDslService.java 变量检测逻辑privatebooleanisVariableCandidate(Stringvalue,ListRecorderEventsimilarEvents){// 规则 1相同位置的输入值不同 → 变量if(similarEvents.stream().map(RecorderEvent::getTargetValue).distinct().count()1){returntrue;}// 规则 2值符合常见变量模式姓名、身份证、手机号等if(value.matches([\\u4e00-\\u9fa5]{2,4})// 中文姓名||value.matches(\\d{17}[\\dX])// 身份证||value.matches(1\\d{10})){// 手机号returntrue;}returnfalse;}生成的 DSL 自动插入变量占位符vars:required:[name,idcard,phone]steps:-action:fillparams:selector:input[namename]value:${name}-action:fillparams:selector:input[nameidcard]value:${idcard}五、DSL 生成与置信度评分5.1 从事件流到 DSL录制完成后服务端异步触发 DSL 生成// RecorderService.javaPostMapping(/api/recorder/events)publicvoidreceiveEvents(RequestBodyListRecorderEventevents){// 1. 入库recorderEventRepository.saveAll(events);// 2. 如果是 REC_STOP 事件触发 DSL 生成if(events.stream().anyMatch(e-REC_STOP.equals(e.getType()))){eventToDslService.convertAsync(events.get(0).getSessionId());}}转换流程原始事件流 → 去重/去抖 → 合并连续输入 → 补充等待步骤 → 生成 DSL YAML5.2 置信度评分生成的 DSL 会有一个 confidence 分数0-100表示自动化执行的可靠性// EventToDslService.javapublicDslConversionResultconvert(StringsessionId){ListRecorderEventeventsfetchEvents(sessionId);inttotalSteps0;inthighConfidenceSteps0;for(RecorderEventevent:events){totalSteps;StringselectorselectBestSelector(event);// 评分规则if(selector.contains(data-testid)){highConfidenceSteps;// 100 分}elseif(selector.startsWith(role)){highConfidenceSteps;// 80 分}elseif(selector.startsWith(#)){highConfidenceSteps0.6;// 60 分}else{// className 或 xpath低分}}intconfidence(highConfidenceSteps*100)/totalSteps;returnnewDslConversionResult(dslYaml,confidence);}评分标准confidence ≥ 80可直接发布60 ≤ confidence 80建议人工审核confidence 60必须人工修订5.3 自动补充等待步骤SmartClaw 会在关键操作后自动插入waitText或waitVisible提高稳定性// 点击提交按钮后自动等待成功文本出现if(event.getText().contains(提交)||event.getText().contains(保存)){steps.add(WaitStep.builder().action(waitText).params(Map.of(text,成功,timeoutMs,8000)).build());}生成的 DSLsteps:-stepId:s7action:clickRoleparams:role:buttonname:提交-stepId:s8action:waitTextparams:text:成功timeoutMs:8000这一步看似简单但实际上解决了 70% 的点击后页面还没加载完成就执行下一步的问题。六、真实案例某 ERP 系统录入流程6.1 背景某制造企业 ERP 系统每天需要录入 200 条采购订单每条订单包含供应商名称物料编码10 项数量、单价交货日期人工录入平均耗时 5 分钟/条每天耗时 16 小时。6.2 录制过程操作员点击 SmartClaw 插件开始录制正常录入一条订单5 分钟点击停止录制服务端自动生成 DSLconfidence 876.3 生成的 DSL简化版dslVersion:1templateId:erp-purchase-order-createname:ERP 采购订单录入vars:required:[supplier,materials,deliveryDate]settings:timeoutMs:15000steps:-stepId:s1action:navigateparams:url:${baseUrl}/#/purchase/order-stepId:s2action:fillparams:selector:[data-testidsupplier-input]value:${supplier}-stepId:s3action:clickRoleparams:role:buttonname:添加物料-stepId:s4action:fillparams:selector:input[placeholder物料编码]value:${materials[0].code}-stepId:s5action:fillparams:selector:input[placeholder数量]value:${materials[0].quantity}# ... 循环填充其他物料-stepId:s10action:clickRoleparams:role:buttonname:提交-stepId:s11action:waitTextparams:text:提交成功timeoutMs:80006.4 执行效果成功率从人工录制的 100%但耗时降到自动化的 92%8% 需要人工干预效率提升单条订单从 5 分钟降到 30 秒提升 10 倍人力节省每天节省 15 小时相当于减少 2 个全职员工七、OpenClaw 做不到的事7.1 确定性执行OpenClaw 依赖 AI 模型理解页面结构但模型存在幻觉问题Prompt: 点击登录按钮 AI 理解: 可能点击错误的按钮如果页面有多个按钮SmartClaw 通过精确的 selector 定位保证每次点击的都是同一个元素。7.2 可复用性OpenClaw 每次执行都需要重新写 Prompt无法复用。SmartClaw 录制一次后可以通过变量替换适配不同数据# 第一次执行variables:supplier:华为技术materials:[...]# 第二次执行variables:supplier:小米科技materials:[...]7.3 可审计性OpenClaw 的执行过程是黑盒无法追溯哪一步错了。SmartClaw 每一步都有详细日志和截图{runId:c6efed0a-xxxx,stepId:s7,status:FAILED,errorCode:TIMEOUT,artifactUrl:/artifacts/c6efed0a-s7.png}八、总结OpenClaw 展示了 AI 操作浏览器的可能性但在企业落地场景下还需要解决三个问题确定性不能依赖 AI 幻觉需要精确的 selector 定位可复用性不能每次都手写 Prompt需要录制→DSL→变量替换的链路可审计性不能是黑盒执行需要完整的日志和产物管理SmartClaw 通过 Chrome Extension DSL Playwright 的组合提供了一套录制即生成的解决方案将自动化成功率从 60% 提升到 92%。如果你想了解 SmartClaw 是如何实现 Agent 调度和任务幂等的欢迎继续阅读本系列的第③篇《OpenClaw 没有任务调度SmartClaw 用幂等租约心跳实现企业级 Agent 管理》。相关资源系列文章第①篇OpenClaw 火了之后我为什么还用纯 Java 做了一套浏览器自动化平台第③篇《OpenClaw 填表总失败SmartClaw 用 5 阶段降级策略搞定 React/Vue 应用 》 敬请期待如果本文对你有帮助欢迎点赞、收藏、转发。你的团队在浏览器自动化落地中遇到的最大坑是什么是异步渲染、弹窗拦截还是跨系统数据对不齐欢迎在评论区交流