Automa v1.28.27：可调试、可版本化的WebUI自动化运行时

简介：Automa 是一款面向前端开发者、测试工程师及自动化需求用户的免费开源 Chrome 浏览器插件，通过无代码拖拽式工作流编排，轻松实现网页自动填写、数据抓取、截图、重复任务执行等典型 WebUI 自动化场景，显著降低自动化入门门槛。资源包为 v1.28.27 官方发布版，共含 69 个文件：44 个 JavaScript 文件构成核心逻辑与各模块功能（如 contentScript、popup、background、newtab 等），6 个 CSS 文件负责多主题界面样式（含 light/dark/system 三套主题），5 个 HTML 页面提供插件各入口视图，另有 SVG/PNG 图标、WOFF2 字体及本地化 JSON 资源（覆盖中、英、法、日、越、乌、土、意、台等十余种语言），整体仅 2.1MB，轻量易部署。目前已有 2622 人学习下载，资源结构完整、模块职责清晰，开箱即用，适合快速集成到日常开发、RPA 探索或教学演示中。

1. Automa Chrome 插件 v1.28.27：不是“录屏式点击器”，而是可调试、可版本化、能嵌入真实业务流的 WebUI 自动化黑匣子

你有没有试过用某款“一键自动填表”插件，点开网页就卡死，换了个按钮位置就全崩，导出的流程根本没法 git commit？Automa 不是那种玄学工具——它本质是一个运行在 Chrome 渲染进程内的轻量级自动化运行时，把 DOM 操作、XPath/CSS 选择、条件分支、HTTP 请求、JSON 解析、变量传递全部封装成可视化节点，但底层仍暴露完整 JS 执行沙箱和开发者工具联动能力。v1.28.27 是当前稳定分支中最后一个支持 Manifest V2 的完整功能版（后续版本强制升级 V3 后，部分高级能力如 background script 注入、跨域 content script 全局监听被阉割），这意味着它仍能可靠触发页面内未暴露 API 的私有事件、劫持 XHR 响应体、甚至 patch 页面原始函数——这些恰恰是金融后台、内部 ERP、教育平台等强交互系统自动化绕不开的硬需求。适合三类人：需要把重复性 Web 操作固化为可交接 SOP 的测试/运营同学；想在不改后端的前提下快速补全前端缺失批量操作能力的产品/开发；以及正在构建低代码 RPA 流程链、需要一个高可控 Web 端执行器的工程师。它不承诺“零代码”，但承诺“每一步都可断点、可日志、可回滚”。

2. 安装与初始化：从离线包解压到 DevTools 联调，绕过 Chrome 商店的实操闭环

Automa 的核心价值不在“安装快”，而在“装完即控”。v1.28.27 是 ZIP 包而非 crx，这是刻意为之——Chrome 从 2023 年起禁止直接拖拽未签名 crx，而 ZIP 解压后加载 unpacked extension 才是开发者真正常用路径。下面步骤全程离线可复现，不依赖任何外部服务。

2.1 解压与加载 unpacked extension：必须关闭其他 Automa 实例

# 假设下载包保存在 ~/Downloads/automa-chrome-v1.28.27.zip unzip ~/Downloads/automa-chrome-v1.28.27.zip -d ~/workspace/automa-v1.28.27

提示：解压后目录结构必须含manifest.json、popup.html、content.js、background.js四个核心文件。若出现dist/或build/嵌套子目录，说明解压层级错误，需重解压并确认根目录直出 manifest.json。

打开 Chrome，访问chrome://extensions/→ 右上角开启「开发者模式」→ 点击「加载已解压的扩展程序」→ 选择~/workspace/automa-v1.28.27目录。此时地址栏右侧会出现 Automa 图标（蓝底白“A”），但此时尚未激活——因为 v1.28.27 默认禁用所有 workflow，需手动启用。

2.2 首次启动配置：三个必设开关与一个隐藏调试入口

点击 Automa 图标 → 弹出面板右上角「⚙️ Settings」→ 进入设置页：

• ✅Enable Automa：主开关，不开启则所有 workflow 均不运行
• ✅Run on all sites：关键！默认为 off，仅对https://*/*白名单生效；勾选后才能在任意内部系统（如http://192.168.1.100:8080）运行
• ✅Show debug logs in console：必须开启！否则console.log()在 content script 中静默丢弃，排查时两眼抓瞎

注意：设置页底部有个灰色小字「Advanced」，点击后展开隐藏项：

• Disable CSP bypass：保持关闭（默认即关）。若开启，Automa 将无法注入<script>执行 eval 或 patch 页面函数，导致 80% 的复杂交互失败。
• Use experimental features：v1.28.27 中此选项实际无作用，忽略即可。

2.3 验证运行环境：用最简 workflow 测试 DOM 控制权

新建一个 workflow（点击左上角「+ New Workflow」）→ 命名为test-dom-access→ 拖入一个「Get Element」节点：

再拖入一个「Execute JavaScript」节点，接在 Get Element 之后：

// 此脚本在目标页面上下文中执行，this === window console.log('[Automa] Body height:', document.body.scrollHeight); return { height: document.body.scrollHeight, url: location.href };

逻辑说明：这段 JS 不是在 Automa 插件后台运行，而是在你当前激活标签页的页面 JS 沙箱中执行。document.body.scrollHeight能读取，证明 Automa 已获得完整 DOM 访问权限；location.href可验证是否处于正确页面上下文；return的对象会成为该节点输出，供后续节点使用。参数说明：无需填写「Script」以外的字段；「Run in page context」必须为 true（默认即此）；若误选「Run in extension context」，则document为 undefined。

保存 workflow → 点击右上角「▶ Run」→ 打开任意网页（如 chrome://version）→ 观察浏览器控制台（F12 → Console）是否打印[Automa] Body height: xxx。若出现，说明 Automa 已成功接管页面；若报错Refused to execute inline script，则是 CSP 设置问题（见 4.1 节避坑）。

3. 核心工作流构建：从单步点击到条件循环，用节点链替代手写 Selenium 脚本

Automa 的生产力不来自“图形化”，而来自节点语义化 + 输出自动传递 + 错误中断机制。一个典型 WebUI 自动化任务（如：登录后台 → 导航到订单页 → 筛选昨日订单 → 导出 CSV）在 Automa 中不是写 50 行 Python，而是 7 个节点的链式调用，且每个节点失败时自动 halt，不污染后续状态。

3.1 登录流程：用「Fill Form」+「Click」组合规避验证码识别陷阱

假设目标系统登录页为https://admin.example.com/login，用户名输入框input[name="username"]，密码框input[name="password"]，提交按钮button[type="submit"]。

1. 「Navigate to URL」节点

   • URL:https://admin.example.com/login
   • Wait for page load:true（强制等待 DOMContentLoaded）

2. 「Fill Form」节点（比逐个「Set Value」更鲁棒）

   • Selector:form（自动查找最近的 form 元素）
   • Fields:

     [ {"selector": "input[name='username']", "value": "{{ secrets.username }}"}, {"selector": "input[name='password']", "value": "{{ secrets.password }}"} ]

   说明：{{ secrets.username }}是 Automa 内置密钥管理占位符，值在 Settings → Secrets 中预设。绝不硬编码密码；Fill Form会自动触发input和change事件，比Set Value更接近真实用户行为。

3. 「Click」节点

   • Selector:button[type="submit"]
   • Click type:normal（模拟鼠标左键）
   • Wait for navigation:true（等待页面跳转，超时则报错）

参数说明：Wait for navigation是关键开关。若目标系统用history.pushState无刷新跳转（如 Vue Router），则需改为Wait for selector并填入新页面特征元素（如#dashboard-title），否则 workflow 会卡在“等待导航”无限期超时。

3.2 条件分支：用「If」节点实现“登录失败则重试，成功则继续”

登录提交后，系统可能返回https://admin.example.com/login?error=1（失败）或https://admin.example.com/dashboard（成功）。用「Get URL」+「If」判断：

• 「Get URL」节点：无参数，输出url字段（字符串）
• 「If」节点（接在 Get URL 后）：
  • Condition:{{ url.includes('dashboard') }}
  • True branch: 接后续「Navigate to Order Page」等节点
  • False branch: 接「Wait」（2s）→ 「Refresh Page」→ 返回登录节点（形成重试环）

逻辑说明：Automa 的If支持完整 JS 表达式，{{ }}中可访问上游所有节点的输出字段。此处url来自「Get URL」节点输出，includes()是原生字符串方法，无需额外 import。不要用正则/dashboard/.test(url)—— v1.28.27 的表达式引擎对 RegExp 字面量支持不稳定。

3.3 循环处理列表：用「For Each」遍历动态生成的订单行

进入订单页后，订单表格由 JS 动态渲染，DOM 结构类似：

<tbody> <tr>Selector: tbody tr[data-id] // 等待带>const el = document.querySelector("input[name='password']"); el.dispatchEvent(new Event('blur', {bubbles: true})); el.dispatchEvent(new Event('change', {bubbles: true}));

4.5 现象：导出 CSV 后文件名乱码（如文件.csv），且内容中文为??

原因：Automa 的「Download File」节点默认以utf-8编码保存，但部分后端返回的 CSV 响应头为Content-Type: text/csv; charset=gbk，导致编码错配。
解决：

• 不用「Download File」，改用「Send HTTP Request」获取响应体 → 「Execute JavaScript」节点解码：

  // 假设 response.body 是 ArrayBuffer const decoder = new TextDecoder('gbk'); // 显式指定 gbk const csvText = decoder.decode(response.body); // 然后用 downloadBlob() 下载 const blob = new Blob([csvText], {type: 'text/csv;charset=gbk'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'orders.csv'; a.click(); URL.revokeObjectURL(url);

5. 进阶技巧：用「Custom Code」节点接入外部库，把 Automa 变成轻量级 Puppeteer 替代品

Automa 的「Execute JavaScript」节点虽强大，但受限于运行时环境（无 Node.js API、无 fs/promises）。而「Custom Code」节点（v1.28.27 新增）允许你上传本地 JS 文件，并在 extension context 中执行——这意味着你可以引入axios、cheerio（精简版）、甚至pdf-lib来处理 PDF 表单。这不是噱头，而是解决“纯前端无法完成任务”的务实方案。

5.1 场景：从 HTML 表格生成 PDF 报表并邮件发送（无后端参与）

某内部系统只提供 HTML 表格，但领导要求每日邮件发送 PDF 版。传统方案需搭后端服务，而 Automa + Custom Code 可在浏览器端闭环。

步骤分解：

1. 用「Get Element」获取<table>的 outerHTML
2. 用「Custom Code」节点加载html2canvas+jsPDF（需提前下载这两个库的 UMD 版本）
3. 在 Custom Code 中执行截图 → PDF 生成 → 触发邮件客户端

具体操作：

• 下载html2canvas.min.js（v1.4.1）和jspdf.umd.min.js（v2.5.1）到本地
• 在 workflow 中添加「Custom Code」节点 → 点击「Upload file」上传两个 JS 文件
• 在代码编辑区写：

// Custom Code 节点内执行（extension context） // 注意：此处 document 是 extension 的 document，非目标页 // 所以需先获取目标页 DOM，通过 sendMessage 通信 return new Promise((resolve, reject) => { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { const tabId = tabs[0].id; // 向目标页 content script 发送消息，获取 table HTML chrome.tabs.sendMessage(tabId, {action: "get-table-html"}, (response) => { if (!response || !response.html) return reject("No table HTML"); // 动态创建 iframe 加载 html2canvas/jspdf（避免污染全局） const iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); const doc = iframe.contentDocument; doc.open(); doc.write(` <script src="${chrome.runtime.getURL('html2canvas.min.js')}"></script> <script src="${chrome.runtime.getURL('jspdf.umd.min.js')}"></script> <script> // 在 iframe 中执行转换 html2canvas(document.body).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jspdf.jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); const pdfBlob = pdf.output('blob'); // 将 blob 传回 extension context window.parent.postMessage({action: 'pdf-ready', blob: pdfBlob}, '*'); }); </script> `); doc.close(); // 监听 iframe 返回 window.addEventListener('message', (e) => { if (e.data.action === 'pdf-ready') { resolve({pdfBlob: e.data.blob}); document.body.removeChild(iframe); } }, false); }); }); });

说明：Custom Code 节点本质是创建一个隔离的 JS 执行环境，通过chrome.runtime.getURL()加载本地资源，用postMessage与 iframe 通信。这样既规避了 CSP，又获得了完整 Canvas/PDF 操作能力。resolve()返回的对象会成为该节点输出，供后续「Download File」节点使用。

5.2 参数化 workflow：用「Import Workflow」+「Variables」实现一套流程适配多环境

团队有 dev/staging/prod 三套环境，URL、API Key、Selector 略有不同。手动改 workflow 效率极低。Automa 支持 workflow 导出为 JSON，其中所有字符串值均可替换为变量。

操作流程：

• 在 Settings → Variables 中预设：

  Name	Value
  BASE_URL	https://dev.example.com
  API_KEY	dev_abc123

• 在 workflow 节点中，所有 URL 字段填{{ BASE_URL }}/api/orders，所有 Header 填{"X-API-Key": "{{ API_KEY }}"}
• 导出 workflow（右上角 ⋯ → Export）→ 得到workflow.json
• 为 staging 环境，新建一个staging-vars.json：

  {"BASE_URL": "https://staging.example.com", "API_KEY": "stg_def456"}

• 使用「Import Workflow」节点，导入workflow.json，同时传入staging-vars.json→ Automa 自动替换所有{{ }}占位符

这相当于把 workflow 变成了模板引擎，配合 CI/CD 可实现“一次编写，多环境部署”。我一般会把 variables.json 存在 Git 仓库，而 workflow.json 作为制品发布，每次 Jenkins 构建时注入对应环境变量。

从那以后我每次交付 WebUI 自动化需求，都会强制走一遍「本地解压 → DevTools 联调 → 变量化导出」三步。不是为了炫技，而是确保三年后新人接手时，不用翻 ChatGPT 查“Automa 怎么装”，直接unzip && load就能跑通第一行日志。希望帮到你。

本文还有配套的精品资源，点击获取