Automa 浏览器扩展自动化：从克隆源码到加载进浏览器的完整上手指南

【免费下载链接】automaA browser extension for automating your browser by connecting blocks项目地址: https://gitcode.com/gh_mirrors/au/automa

Automa 是一款做浏览器自动化的扩展：用可视化块连出流程，让浏览器替你填表单、点击、抓数据，还能定时执行。本文带你从克隆源码到把扩展装进 Chrome 和 Firefox，命令可直接照抄。

路线先看清楚

1. 两条命令完成环境自检
2. 克隆仓库、装依赖、创建密钥文件
3. 启动开发模式，把扩展加载进浏览器
4. 打包生产版本
5. 把打包产物加载到目标浏览器
6. 核心文件速查与常见故障对照

两条命令完成环境自检

硬性要求只有三项：

• Node.js 14.18 以上，推荐 18+
• 包管理器用 pnpm（仓库自带 pnpm-lock.yaml）
• Chrome 或 Firefox 浏览器

运行这两条命令确认环境：

node --version pnpm --version

pnpm 没装的话，先跑npm i -g pnpm。

从源码到跑通：克隆、装依赖、起开发模式

打开终端，先克隆仓库并进入目录：

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

再安装依赖：

pnpm install

跑 dev 或 build 之前还有一步前置工作：创建src/utils/getPassKey.js，内容如下。它是工作流保护和凭证加密用的密钥文件，返回值可以是任意字符串，但文件必须存在：

export default function() { return 'anything-you-want'; }

现在启动开发模式。开发模式带热重载，产物会实时写入build/目录，浏览器里直接加载该目录即可，改完代码刷新扩展就能生效。

Chrome 环境

pnpm dev

Firefox 环境

pnpm dev:firefox

两条命令的区别只是最终选用的 manifest 不同，产物同样落在build/。

一条命令打包，再加载进浏览器

按目标浏览器二选一：

pnpm build pnpm build:firefox

所有产物输出到build/目录，其中的manifest.json由构建脚本从对应模板自动复制生成。

加载到 Chrome

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

加载到 Firefox

1. 打开about:debugging#/runtime/this-firefox
2. 点击"加载临时扩展"
3. 选择build/manifest.json

注意：Firefox 的临时扩展只在当前会话有效，重启浏览器后要重新加载一次。

核心文件速查

卡住了？对号入座

• 现象：构建或启动失败，报找不到 getPassKey 模块 → 先创建src/utils/getPassKey.js（见上文步骤），再重新运行命令。
• 现象：扩展加载后新标签页空白或报错 → 核对浏览器与构建命令是否匹配，build:firefox的产物只能装进 Firefox；Chrome 里确认选的是build目录而不是项目根目录。
• 现象：开发模式下改了代码，浏览器里行为没变 → 最新产物已经写入build/，到扩展管理页点刷新图标重新加载扩展即可。
• 现象：Firefox 里重启浏览器后扩展消失 → 这是临时扩展的预期行为，按同样步骤重新加载即可。

接下来做什么

打开扩展的新标签页，先复制一个内置示例工作流，跑一遍看块与块之间的执行顺序。然后用录制功能把一组手动操作直接变成工作流。想改某个块的行为时，去 src/workflowEngine/blocksHandler/ 找对应实现；构建逻辑看 webpack.config.js，完整说明在 README.md。

【免费下载链接】automaA browser extension for automating your browser by connecting blocks项目地址: https://gitcode.com/gh_mirrors/au/automa