Automa浏览器自动化插件：用积木式编程重构你的网页交互体验

你是否还在为重复填写表单、定期数据抓取、批量内容发布等机械性网页操作而烦恼？Automa浏览器自动化插件（Automation）通过可视化积木式编程，让任何人都能零代码构建复杂的网页自动化流程。无需专业编程知识，只需拖拽模块并连接，即可将繁琐操作转化为一键执行的工作流，效率提升可达80%以上。

核心能力：用模块串联网页自动化逻辑

Automa的核心创新在于将复杂的网页操作抽象为可拖拽的功能模块（Block），每个模块封装了特定网页操作逻辑。通过连接不同模块，用户可以构建从简单到复杂的自动化流程。

1. 丰富的模块生态系统

Automa提供超过50种预制模块，覆盖网页交互全场景：

• 基础操作：点击元素模块、表单填写模块、延迟等待模块
• 数据处理：获取文本模块、正则提取模块、表格存储模块
• 流程控制：条件判断模块、循环数据模块、错误捕获模块
• 高级功能：截图模块、HTTP请求模块、Google Sheets集成

每个模块都配有直观的配置界面，例如"点击元素"模块支持可视化选择网页元素，自动生成CSS选择器：

<template>
  <block-basic 
    :id="componentId"
    :data="data"
    :block-id="id"
    :block-data="block"
    class="block-basic group"
    @edit="$emit('edit')"
    @delete="$emit('delete', id)"
  >
    <!-- 模块内容 -->
  </block-basic>
</template>

模块基础组件实现：src/components/block/BlockBasic.vue

2. 可视化工作流编辑器

Automa提供拖拽式流程图编辑器，用户可通过画布直观编排模块执行顺序。编辑器支持：

• 模块嵌套：通过模块组功能将相关模块折叠为逻辑单元
• 分支流程：利用条件模块实现"如果...则..."的逻辑判断
• 循环迭代：通过循环元素模块处理列表数据
• 错误处理：每个模块可配置错误时的重试策略或备用流程

编辑器支持三种连线样式（直线/阶梯/平滑），通过样式配置文件自定义外观，满足不同复杂度的流程可视化需求。

3. 多场景触发机制

Automa工作流可通过多种方式触发，满足不同自动化需求：

• 手动触发：点击插件图标一键执行
• 定时任务：通过Cron表达式设置周期性执行
• 事件触发：当网页元素变化、页面加载完成或满足特定条件时自动启动
• 上下文菜单：右键菜单直接触发指定工作流
• 快捷键：自定义键盘组合快速启动

{
  "trigger": {
    "name": "触发器",
    "description": "工作流从这里开始执行",
    "items": {
      "manual": "手动",
      "interval": "间隔",
      "cron-job": "Cron任务",
      "element-change": "元素更改时",
      "keyboard-shortcut": "键盘快捷键"
    }
  }
}

触发器模块配置：src/locales/zh/blocks.json

实战案例：3分钟构建"电商价格监控"工作流

以下通过一个完整案例，展示如何使用Automa构建实用的自动化流程。

场景需求

监控电商页面商品价格，当价格低于设定阈值时发送通知。

实现步骤

1. 新建工作流
   在工作流管理页面点击"新建"，命名为"价格监控"。

2. 添加模块链
   拖拽以下模块并配置：

   • 新建标签页：打开目标商品页面
   • 等待元素：等待价格元素加载完成
   • 获取文本：提取价格数值（使用CSS选择器定位）
   • 条件判断：比较当前价格与目标价格
   • 发送通知：如果价格达标则显示系统通知

3. 配置触发器
   设置为每日9:00自动执行，或页面加载时触发。

4. 保存并测试
   点击"执行"按钮测试流程，通过日志系统查看执行状态。

核心代码解析

工作流执行引擎通过WorkflowEngine.js实现核心调度逻辑：

class WorkflowEngine {
  constructor(workflow, { states, logger, blocksHandler }) {
    this.id = nanoid();
    this.states = states;
    this.logger = logger;
    this.workflow = workflow;
    this.blocksHandler = blocksHandler;
    this.workers = new Map();
    // 初始化工作流状态
  }

  async init() {
    // 解析工作流配置
    // 查找触发器模块
    const triggerBlock = nodes.find(node => node.label === 'trigger');
    if (!triggerBlock) {
      console.error("工作流缺少触发器模块");
      return;
    }
    // 创建工作线程执行流程
    this.addWorker({ blockId: triggerBlock.id });
  }

  // 其他核心方法...
}

技术架构与扩展能力

1. 插件架构设计

Automa采用分层架构设计，确保稳定性和可扩展性：

• 表现层：基于Vue的UI组件，包括编辑器、设置界面等
• 核心层：工作流引擎、模块处理器、状态管理器
• 适配层：浏览器API封装、跨浏览器兼容性处理

2. 扩展性设计

• 自定义模块：通过开发者文档创建自定义功能模块
• 主题定制：支持浅色/深色/系统主题切换，通过主题配置实现
• 数据持久化：使用IndexedDB存储工作流配置和执行日志

3. 安全与权限

Automa遵循最小权限原则，仅请求必要的浏览器权限：

• 标签页管理：操作网页导航
• 存储权限：保存工作流数据
• 通知权限：发送提醒
• 脚本注入：执行页面操作

用户可在权限设置页管理具体权限。

安装与使用

环境要求

• Chrome 88+ 或 Firefox 85+ 浏览器
• 网络连接（用于模块市场和更新）

安装步骤

1. 获取源码

   git clone https://gitcode.com/gh_mirrors/au/automa
   

2. 构建项目

   # 安装依赖
   pnpm install
   
   # 开发环境构建（Chrome）
   pnpm dev
   
   # 生产环境构建（Firefox）
   pnpm build:firefox
   

3. 浏览器安装

   • Chrome：打开chrome://extensions，启用"开发者模式"，加载build目录
   • Firefox：打开about:debugging，临时加载build/manifest.json

学习资源

• 官方文档：项目README.md提供详细配置指南
• 模块参考：blocks.json包含所有模块的中文说明
• 示例工作流：安装后自动导入多个演示流程，可直接修改使用

结语：释放重复劳动的价值

Automa通过"模块化+可视化"的创新 approach，打破了技术壁垒，让普通用户也能构建专业级网页自动化流程。无论是内容创作者、电商运营还是数据分析师，都能通过Automa将重复工作自动化，释放宝贵的时间专注于创造性任务。

随着Web技术的发展，Automa正逐步支持更复杂的自动化场景，包括AI辅助模块配置、跨浏览器同步、团队协作等高级功能。现在就安装Automa，体验"拖拉拽"编程的魅力，让浏览器成为你的自动化助理！

项目地址：https://gitcode.com/gh_mirrors/au/automa
贡献指南：欢迎通过Issue和PR参与项目改进