如何 3 步上手 Automa可视化拖拽搭建浏览器自动化工作流完整指南【免费下载链接】automaA browser extension for automating your browser by connecting blocks项目地址: https://gitcode.com/gh_mirrors/au/automaAutoma 是一款浏览器扩展让你把一个个功能模块block连成工作流就能自动填表、抓数据、截图、执行重复操作甚至按时间定时触发。它适合不想写代码、却想让浏览器替你干活的人。装好扩展、拖出第一个流程大概只需要几分钟。 快速上手安装 Automa 与加载扩展你不需要改源码只要把扩展跑起来就行。下面是从零到可用的最小步骤。克隆仓库git clone https://gitcode.com/gh_mirrors/au/automa安装依赖pnpm install准备构建密钥文件在src/utils目录下新建getPassKey.js让它默认导出一个函数、返回任意字符串即可构建会用到缺了会报错构建 Chrome 版本pnpm build想要 Firefox 版本就用pnpm build:firefox加载扩展Chrome 打开chrome://extensions打开「开发者模式」点「加载已解压的扩展程序」选择刚生成的build目录想边改边看效果可以改用pnpm dev启动本地开发改完自动刷新加载成功后浏览器工具栏会出现 Automa 图标点开就是你的工作台。图Automa 可视化工作流编辑器的画布网格背景模块就在这样的网格上拖拽、连线 核心功能解析四个最能替你省力的能力拖拽搭建工作流编辑器它让你把操作变成一块块模块拖进画布、拖出连线就完成了一个流程不用手写任何逻辑。使用方式打开工作台新建工作流从左侧模块列表把「访问网页」「点击」「等待」等模块拖到画布再把它们首尾相连最后点运行即可。源码路径编辑器主体逻辑在 src/components/newtab/workflow/editor/工作流引擎在 src/workflowEngine/WorkflowEngine.js。多方式触发器它能按你的条件自动开跑定时、打开某个网址、页面元素变化、快捷键、Cron 表达式都行适合做无人值守的任务。使用方式在工作流里放一个触发器模块选触发类型如间隔、Cron、访问网页配好参数后保存之后满足条件就会自动执行无需手动点击。源码路径触发逻辑在 src/background/BackgroundWorkflowTriggers.js界面配置见 src/components/newtab/workflow/edit/Trigger/。覆盖常见的模块库点击、填表、循环、条件判断、正则、变量运算、Google Sheets 读写……这些模块帮你把网页上能做的事基本都自动化了。使用方式在模块列表搜索关键词找到对应模块拖入画布双击它即可编辑参数条件模块可分叉循环模块可包裹一组子步骤。源码路径各模块的执行实现集中在 src/workflowEngine/blocksHandler/内容脚本侧的交互模块在 src/content/blocksHandler/。变量与数据存储它帮你把抓取到的结果存下来、在模块之间传递还能落到本地表格里让工作流可复用、可累积。使用方式用变量类模块给数据命名再用「插入数据」「导出」等模块把结果写进存储或导出成文件之后任何模块都能引用它。源码路径存储层在 src/db/storage.js界面见 src/components/newtab/storage/。 场景实战三个高频需求怎么做场景一批量抓取列表页数据目标把一个商品/文章列表页里的标题、价格挨个抓下来导出成可打开的表格。用到的功能访问网页、循环元素、获取文本、导出数据。操作步骤拖入「访问网页」模块填目标网址让它打开列表页。拖入「循环元素」模块用元素选择器指定列表项让它逐个遍历。在循环里放「获取文本」模块取出每项的标题与价格存进变量。循环结束后接「导出数据」模块把收集到的行导出为 CSV 或 Excel。场景二每天定时打开页面执行任务目标每天固定时间自动打开某个后台页面完成签到或拉取数据这类固定动作。用到的功能定时触发器、访问网页、点击、等待。操作步骤放一个触发器模块选「间隔」或「Cron」类型设成你想要的时间点。接「访问网页」打开目标地址。用「等待」确保页面加载完成再放「点击」完成关键动作。保存工作流保持浏览器在运行即可到点自动执行。场景三自动填写重复表单目标把一套固定信息姓名、邮箱、备注等自动填进网页表单并提交。用到的功能表单填写、点击。操作步骤拖入表单相关模块逐个绑定输入框选择器与要填的值。支持从变量或存储读取内容避免每次都手写。最后接「点击」模块提交需要时再接一步确认或结果抓取。️ 进阶技巧与避坑指南先掌握变量和存储你的流程才跑得顺。抓取结果先存进变量跨模块用同一名字引用需要长期保留的落到存储表格里导出和复用都方便。跑出问题别慌先看日志。每次执行都有逐步日志标红的那一步就是出错点点开看它的报错信息多数问题选择器没匹配到、等待太短一眼就能定位。日志能力在 src/workflowEngine/WorkflowLogger.js界面在 src/components/newtab/app/AppLogs.vue。一条高频报错的定位方法构建时报「找不到 getPassKey」或类似模块缺失通常是第 3 步的src/utils/getPassKey.js没建。补上这个文件并重启构建绝大多数情况就过去了。❓ 常见问题构建报错说缺少 getPassKey 怎么办在src/utils下新建getPassKey.js让它默认导出一个返回任意字符串的函数即可。补完后重新执行pnpm build报错一般会消失。Chrome 提示需要开发者模式打开chrome://extensions先把右上角「开发者模式」开关打开。之后「加载已解压的扩展程序」按钮才会出现再选build目录即可。Firefox 每次重启扩展就没了Firefox 走的是临时加载重启后需要重新加载一次。在about:debugging#/runtime/this-firefox里重新选择build目录下的manifest.json。画布空白或找不到工作流点工作台顶部的「新建」创建一个空白工作流再开始拖模块。若仍异常先在日志页看有无加载错误多数是扩展未正确加载重新加载build目录即可。 总结你到现在已经会装、会拖第一个流程、会定时跑、会抓数据了剩下就是把模块组合得更精细。下一步建议去翻一翻各模块的参数说明挑一个你最常做的重复任务试着搭出来。官方帮助入口在 src/newtab/pages/Welcome.vue里面有文档、市场与社区的引导卡片可以顺着往下走。【免费下载链接】automaA browser extension for automating your browser by connecting blocks项目地址: https://gitcode.com/gh_mirrors/au/automa创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考