Automa扩展构建器：创建独立Chrome扩展的完整流程

Automa扩展构建器（Automa CEB）是一个强大的工具，能够将你的Automa工作流转换为独立的Chrome浏览器扩展。通过这个完整指南，你将学会如何从零开始构建自己的自动化扩展，无需复杂的编程知识。

🚀 Automa扩展构建器是什么？

Automa扩展构建器是基于Automa项目的一个子功能，它允许你将设计好的工作流打包成独立的Chrome扩展。这意味着你可以创建专门针对特定任务的自动化工具，并将其分享给他人使用。

核心优势：

• 无需手动编写manifest.json文件
• 自动处理依赖关系和资源打包
• 支持Chrome和Firefox浏览器
• 基于Webpack的现代化构建流程

📦 环境准备与项目设置

首先，你需要克隆Automa项目到本地：

git clone https://gitcode.com/gh_mirrors/aut/automa
cd automa
yarn install

在运行构建命令前，需要在src/utils目录下创建getPassKey.js文件：

export default function() {
  return 'your-custom-passkey';
}

🛠️ 构建独立扩展的完整步骤

1. 开发模式构建

对于Chrome浏览器开发：

yarn dev

对于Firefox浏览器开发：

yarn dev:firefox

2. 生产环境构建

生成Chrome扩展：

yarn build

生成Firefox扩展：

yarn build:firefox

3. 打包为ZIP文件

创建可发布的扩展包：

yarn build:zip

🔧 构建配置详解

Automa使用Webpack进行扩展构建，主要配置文件位于webpack.config.js。该配置定义了多个入口点：

• newtab: 新标签页界面
• popup: 弹出窗口界面
• background: 后台脚本
• contentScript: 内容脚本
• elementSelector: 元素选择器

📁 项目结构说明

Automa项目采用模块化设计：

src/
├── components/          # Vue组件
├── workflowEngine/      # 工作流引擎
├── content/            # 内容脚本处理
├── background/         # 后台服务
└── assets/            # 静态资源

主要配置文件：

• package.json - 项目依赖和脚本
• manifest.chrome.json - Chrome扩展清单
• manifest.firefox.json - Firefox扩展清单

🎯 本地安装与测试

Chrome浏览器安装

1. 打开 chrome://extensions/
2. 启用"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择 automa/build 目录

Firefox浏览器安装

1. 打开 about:debugging#/runtime/this-firefox
2. 点击"加载临时附加组件"
3. 选择 automa/build/manifest.json 文件

💡 最佳实践建议

1. 工作流设计: 先在Automa编辑器中完成工作流设计
2. 测试验证: 在开发模式下充分测试功能
3. 资源优化: 确保图片和资源文件大小合理
4. 权限配置: 合理设置manifest权限要求

🔍 故障排除

常见问题及解决方案：

构建失败: 检查Node.js版本（要求>=14.18.1） 权限错误: 验证manifest.json中的权限设置 资源加载失败: 检查文件路径和复制配置

通过Automa扩展构建器，你可以将复杂的浏览器自动化任务封装成易于使用的独立扩展，大大提升了工作效率和代码复用性。