Automa 浏览器扩展自动化从克隆源码到加载进浏览器的完整上手指南【免费下载链接】automaA browser extension for automating your browser by connecting blocks项目地址: https://gitcode.com/gh_mirrors/au/automaAutoma 是一款做浏览器自动化的扩展用可视化块连出流程让浏览器替你填表单、点击、抓数据还能定时执行。本文带你从克隆源码到把扩展装进 Chrome 和 Firefox命令可直接照抄。路线先看清楚两条命令完成环境自检克隆仓库、装依赖、创建密钥文件启动开发模式把扩展加载进浏览器打包生产版本把打包产物加载到目标浏览器核心文件速查与常见故障对照两条命令完成环境自检硬性要求只有三项Node.js 14.18 以上推荐 18包管理器用 pnpm仓库自带 pnpm-lock.yamlChrome 或 Firefox 浏览器运行这两条命令确认环境node --version pnpm --versionpnpm 没装的话先跑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 devFirefox 环境pnpm dev:firefox两条命令的区别只是最终选用的 manifest 不同产物同样落在build/。一条命令打包再加载进浏览器按目标浏览器二选一pnpm build pnpm build:firefox所有产物输出到build/目录其中的manifest.json由构建脚本从对应模板自动复制生成。加载到 Chrome打开chrome://extensions开启右上角的开发者模式点击加载已解压的扩展程序选择项目的build目录加载到 Firefox打开about:debugging#/runtime/this-firefox点击加载临时扩展选择build/manifest.json注意Firefox 的临时扩展只在当前会话有效重启浏览器后要重新加载一次。核心文件速查文件作用位置build/manifest.json浏览器实际加载的扩展清单构建时自动生成build/ 目录src/manifest.chrome.json、src/manifest.firefox.json两套浏览器各自的清单模板构建时按浏览器选用src/webpack.config.js构建配置定义所有入口产物输出到 build/项目根目录package.json依赖清单与 dev/build 脚本项目根目录src/utils/getPassKey.js工作流保护与凭证加密的密钥文件需自行创建src/utils/卡住了对号入座现象构建或启动失败报找不到 getPassKey 模块 → 先创建src/utils/getPassKey.js见上文步骤再重新运行命令。现象扩展加载后新标签页空白或报错 → 核对浏览器与构建命令是否匹配build:firefox的产物只能装进 FirefoxChrome 里确认选的是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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
